1. Introduction

1.1 Welcome

Hello and welcome to a new Tuts course. I'm Adi Purdila and, as the title says, this course is about CSS tips and tricks. Specifically, I'll show you some cool CSS techniques that I've learned over the years. And I hope they will be as helpful as they are to me. Now some CSS knowledge is required for this course. Because what I'm about to show you varies in complexity. I'll cover some very simple topics. But I'll also show you some more complex techniques. So without further ado, let's begin with lesson number one.

2. Typography

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.