Style Sheets: A Primer
Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS
Syntax & Rules
Like any language, computer or natural, CSS has syntactic rules that dictate how a CSS rule is written. Here are a few definitions to absorb before we dive in.
would we write a set of rules for a simple HTML document? Let's look
at the style sheet that governs all the tutorials on Tutorial Junction
(that's right, every single page of every tutorial).
There are 16 CSS rules here. Each one has multiple declarations in their blocks which are all surrounded by curly braces. Simple enough, right? Yes and no. You may have noticed that some of the selectors begin with a period/dot (.). Well, that's because there are different types of selectors. The simplest selector is simply an HTML tag. Any HTML tag and/or element can be a CSS selector. In our example above, all H1 elements will be rendered at 20 pixels in height, with a normal font weight, in the color that corresponds to #FF9933 (that's orange). That's a great demonstration of the control that CSS gives a designer.
also class selectors. These are the selectors that begin
with the period/dot. Class selectors can be used multiple times and on any
tag within an HTML document. So how does that work? First, all class selectors
are preceded by a period/dot. Well, let's say that we wanted to style a <p> tag
with a class selector called "nav". In your CSS file, the rule would begin
with .nav and it would be followed by the declaration
is the first rule in the CSS style sheet above. It looks like this:
In your HTML document, you would encode all your <p> tags like so:
If you had all your <p> tags encoded like this and you decided to change their styles later, all you would have to do is change the declaration block for the nav class in the style sheet. As you can see, this takes a bit of planning to work well, but it all pays off in the end.
There is another
type of selector called the ID selector that works very similarly
to the class selector. The biggest difference between the two is that a class
selector may be used repeatedly in an HTML document whereas an ID selector
can be used only once. An ID selector is unique. Here's
an example of how an ID selector CSS rule would be written:
Here, I have decided that I'm only going to have one instance where the H1 element will use this rule with the ID of "unique". In this case, the ID selector "unique" can be used ONLY once. In other words, you should only use it with one individual H1 element. If you want to use a selector in multiple rules (or repeatedly), you should use a class selector.
A class selector can be used with any element encoded with <tag="class_name">. Why do this? Well, let's say you've got a declaration block that is a styled HTML list and you will use it repeatedly in your website to control the HTML. Using a class selector named ".list" (because class selectors are always preceeded by a period/dot) will enable you to use it with multiple HTML elements. For example, you could use this class selector with the p tag by writing <p class="list">, or with the div tag by writing <div class="list">, or with the unordered list tag by writing <ul class="list"> all in one HTML file and each of those tags with the class of list will adhere to the CSS declarations you lay out in the CSS file.
Alternatively, if you had a part of your webpage that would occur only once, it would make more sense to use an ID selector because it is a unique (i.e. not recurring) part of your webpage. You could simply name the ID selector "navbar" for convenience. In your CSS file then, the rule would begin with #navbar and be followed by the declaration block. In your corresponding HTML file, you could use the ID selector with a p tag by writing <p id="navbar"> and again, this paragraph (or navigation bar wrapped in a p tag) would adhere to the CSS declaration(s) you laid out in the rule.
If this is confusing to you right now, well, then that's pretty normal. We'll actually put these methods into place soon so they become more concrete. First, let's take a look at a few ways to incorporate style sheets into your HTML document.