- Most people, especially designers, get a little nervous
when they find out they need to learn
any type of scripting or coding language.
I've had more than one designer express anxiety to me
over having to learn how to write CSS.
Thankfully, learnng CSS is fairly simple.
There's really not a lot to the syntax
which makes it easy to get up and running quickly.
Let's take a look at a sample rule.
CSS styles are made up of two parts:
the selector and the declaration.
The selector, here p for paragraph,
tells the browser which element or elements
in the document to style.
Using this selector, all paragraphs
within a style document would be formatted.
While this element selector is pretty simple,
selectors can be very complex
depending upon which elements on the page
you're trying to target.
Selectors can be grouped together
or even combined to allow
for more precise element targeting.
The declaration, which is enclosed in these curly braces,
uses the formatting instructions for the style.
Here, there are two rules:
one telling the browser which font to use
and another defining the size of the font.
The rules themselves are made up of two parts:
the property and the value.
These are separated by colons
and use a semicolon to tell the browser
to stop evaluating and move on to the next rule.
While this syntax is simple,
you will need to learn the myriad selectors
and selector combinations which make it possible
to exercise a greater amount of control
over page elements.
You'll also need to learn the various properties
you can set for each of the elements
and the values that are allowed for that property.
For the most part, the use of whitespace doesn't matter.
For example, both of these CSS rules
would give you the exact same results.
In some cases, however, it does matter.
Within a selector, it often results in determining
which elements are targeted.
So you should be familiar with when whitespace
is important and when it's not.
There are also certain syntax rules
such as shorthand notation, pseudo-elements,
pseudo-classes, and inline rules that you'll need to learn.
But if you focus on the basic elements of CSS syntax first,
you'll be surprised at how quickly you pick it up.
I also highly recommend reading through
the CSS specifications to learn not only the rules
behind the syntax, but alternate ways of writing it.
Later on in this title, we'll examine the CSS specifications
in more detail.
Another great way to learn syntax is
to examine the CSS found in other sites.
Often the authors will comment the CSS
in a way that helps you understand the syntax
and why it's written a certain way.
You'll be seeing examples of CSS syntax
throughout this title, so you should have
a pretty good idea of how it works
before moving on to writing it yourself.