1 00:00:00,000 --> 00:00:03,990 Most people, especially designers, get a little nervous when they find out they 2 00:00:04,000 --> 00:00:06,990 need to learn any type of scripting or coding language. 3 00:00:07,000 --> 00:00:10,990 Now I've had more than one designer express anxiety to me over having to 4 00:00:11,000 --> 00:00:12,990 learn how to write CSS. 5 00:00:13,000 --> 00:00:15,990 Yet thankfully, learning CSS is fairly simple. 6 00:00:16,000 --> 00:00:18,990 There is really not a lot to the syntax, which makes it easy to get up 7 00:00:19,000 --> 00:00:19,990 and running quickly. 8 00:00:20,000 --> 00:00:22,990 Let's take a look at a sample rule. 9 00:00:23,000 --> 00:00:27,990 CSS styles are made up of two parts: the selector and the declaration. 10 00:00:28,000 --> 00:00:32,990 The selector--here, P for paragraph--tells the browser which element or elements in 11 00:00:33,000 --> 00:00:34,990 the document to style. 12 00:00:35,000 --> 00:00:39,990 Using this selector, all paragraphs within a styled document would be formatted. 13 00:00:40,000 --> 00:00:41,990 Well, this element selector is pretty simple, 14 00:00:42,000 --> 00:00:46,990 selectors can be very complex, depending upon which elements on the page 15 00:00:47,000 --> 00:00:48,990 you're trying to target. 16 00:00:49,000 --> 00:00:51,990 Selectors can be grouped together or even combined to allow for more 17 00:00:52,000 --> 00:00:53,990 precise element targeting. 18 00:00:54,000 --> 00:00:58,990 The declaration, which is enclosed in these curly braces, gives the formatting 19 00:00:59,000 --> 00:00:59,990 instructions for the style. 20 00:01:00,000 --> 00:01:04,990 Here there are two rules: one telling the browser which font to use and another 21 00:01:05,000 --> 00:01:06,990 defining the size of the font. 22 00:01:07,000 --> 00:01:11,990 The rules themselves are made up of two parts: the property and the value. 23 00:01:12,000 --> 00:01:15,990 These are separated by colons and use a semicolon to tell the browser to stop 24 00:01:16,000 --> 00:01:18,990 evaluating and move on to the next rule. 25 00:01:19,000 --> 00:01:22,990 While this syntax is simple, you will need to learn the myriad selectors and 26 00:01:23,000 --> 00:01:26,990 selector combinations which make it possible to exercise a greater amount of 27 00:01:27,000 --> 00:01:28,990 control over page elements. 28 00:01:29,000 --> 00:01:32,990 You will also need to learn the various properties you can set for each of the 29 00:01:33,000 --> 00:01:35,990 elements and the values that are allowed for that property. 30 00:01:36,000 --> 00:01:38,990 For the most part, the use of whitespace doesn't matter. 31 00:01:39,000 --> 00:01:43,990 For example, both of these CSS rules would give you the exact same results. 32 00:01:44,000 --> 00:01:46,990 In some cases, however, it does matter. 33 00:01:47,000 --> 00:01:51,990 Within a selector, it often results in determining which elements are targeted, so 34 00:01:52,000 --> 00:01:55,990 you should be familiar with when whitespace is important and when it's not. 35 00:01:56,000 --> 00:01:59,990 There are also certain syntax rules, such as shorthand notation and 36 00:02:00,000 --> 00:02:03,990 pseudo-element pseudo-classes and inline rules, that you will need to learn. 37 00:02:04,000 --> 00:02:08,990 But if you focus on the basic elements of CSS syntax first, you'll be surprised 38 00:02:09,000 --> 00:02:10,990 at how quickly you pick it up. 39 00:02:11,000 --> 00:02:15,990 I also highly recommend reading through the CSS specifications to learn not only 40 00:02:16,000 --> 00:02:18,990 the rules behind the syntax, but alternate ways of writing it. 41 00:02:19,000 --> 00:02:23,990 Later on in this title, we will examine the CSS specifications in more detail. 42 00:02:24,000 --> 00:02:28,990 Another great way to learn syntax is to examine the CSS found in other sites. 43 00:02:29,000 --> 00:02:33,990 Often the authors will comment the CSS in a way that helps you understand the 44 00:02:34,000 --> 00:02:36,990 syntax and why it's written a certain way. 45 00:02:37,000 --> 00:02:40,990 You'll be seeing examples of CSS syntax throughout this title, so you should have 46 00:02:41,000 --> 00:02:51,000 a pretty good idea of how it works before moving on to writing it yourself.