- Overview
- Transcript
2.1 Use CSS Shorthand
CSS code can be written in a few different ways, but the more concise, the better. To achieve that, you have to use shorthand CSS which is basically a shorter, faster way of writing code. By doing this you make sure the code you write is cleaner and easier to understand.
1.Introduction
1.1Welcome00:41
2.Typography
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion
7.1Recap01:47
2.1 Use CSS Shorthand
CSS code can be written in a few different ways. But the more concise, the better. To achieve that, you have to use shorthand CSS which is basically a shorter, faster way of writing code. By doing this, you make sure the code you write is cleaner and easier to understand. So let me give you a few examples to illustrate the differences. First of all, we have a simple paragraph here which has a class of demo-p. Now, I also have a CSS file linked to that HTML document, so let's start demo-p. Let's do some font styling first. So I'm gonna say font-style, let's make it italic, and then let's make it bold font-weight bold, let's give a different font size. Let's say 13 pixels. Maybe a line height, 1.5, and then maybe font-family. Let's do Arial sans-serif. Great. Let's also add a background color, just to illustrate some of the differences. All right so save, this is our paragraph so far. Now as you can see that's a lot of code right here, but let's call this Normal CSS and let's create Shorthand CSS. So we'll grab the same paragraph but this time we're gonna say font and we'll start with the font style. And then the font weight, followed by font size slash line height, and finally Arial sans-serif, which is the font family. Background color, let's do the same one. Save. And let's comment this code. And as you can see, the styling is exactly the same. So this bit right here, equals this bit right here. And already you can see the advantages of shorthand CSS. You can compress lots of lines of code into a single line, which is always good. It's easier to maintain and it makes your CSS files smaller. Let's take a look at some other examples, so let's uncomment this. Let's say you want to add some padding to that paragraph. Well, normally you would do this padding-top: 1em, padding-bottom: 1em. Left and right, one em. Yep, so it added a padding. Well right now you can do this. Padding on the shorthand notation, one em. And this will apply this padding to all directions. Top, right, bottom, and left. If, for example you want to change the, let's say, left and right padding to two ems, you would do this. 1em, which stands for top bottom, 2em which, oops, 2em, which stands for left and right. And there it is, and that's basically it. There are a few more properties that support shorthand notation. Like margin, border, background, and list style, but for more information on those, please check out the lesson notes.
