Cascading Style Sheets have a fairly narrow purpose in web application development, presentation. HTML is used to give documents structure and mark specific sections of interest, a developer will then use CSS to move the content around, apply colour and make the document easily readable for humans. If you look at the layout of How to Program, you will notice that it has a title that is off-centered to the left, a navigation menu to the left and a footer showing links to validation checks and copyright. If you tried printing any articles on How to Program, you would have also noticed that the site looks different still, I have removed alot of the web specific stuff that is not needed or used when printed. For instance, I have removed the footer, side menu and made the links look like normal text. If the site was to be viewed without CSS it would look very different, in fact I have set up the main page of How to Program without any styles applied to it at all. As you can see the site looks very different, everything is aligned to the extreme left of the page and the navigation menu as well as the footer is at the bottom of the page. By using CSS, How to Program has a standardized look and feel with most changes happening in one spot.
CSS Style Rules
CSS Style rules can get very complicated but we will start off discussing a simple rule and work our way up from there. Once the basics are down though they are very easy to read and understand. I will use the following rule as an example for the majority of this article.
a {
color: green;
}
This rule is about as simple as CSS gets, it simply tells us that every anchor tag (<a>) should be coloured green. CSS rules have two distinct parts, the selector and the rule. CSS uses the curly braces ({ and }) to enclose the complete set of rules for each selector. In the case of the above rule the selector would be "a". According to the above rule all of the anchor tags are to be affected no matter where they are. The next section will go into more depth about selectors and provide some examples of how they are used and then we will take a closer look at the rules.
CSS Selectors
The most important part of CSS are selectors. Selectors allow us to tell browsers, printers, screen readers and other things what elements exactly we are refering to. In CSS there are four distinct types of selectors: universal, type, class and id. Although there aren't very many types of selectors they can be combined in any way, this is what makes them so challenging to use as well as very powerful.
The Universal Selector
The universal selector is rarely used but should be mentioned for completeness. If you see an asterisk (*) in a style sheet, you are looking at a universal selector. This selector simply matches everything in the current document, I can't really think of any time I would ever use it myself but it could be useful. The universal selector is has the largest granularity, meaning that any other selector type will take precedence because all other selectors are more specific then the universal selector. Follows is an example of the universal selector being used in the example above, this rule would turn absolutely all text on the screen green.
* {
color: green;
}
The Type Selector
The type selector is the most common selector in CSS, it will match against specific HTML tags. In the first example above we are using a type selector to select all anchor tags in the document. This type of selector has the second largest granularity, meaning that if a universal selector is used the type selector will override it and any class or id selectors will override the type selector.
The Class Selector
Nearly all HTML tags have an attribute named "class". We can add an identifier to this attribute if we wanted so that common styles can be added to different parts of a document and only having to make changes in one place. The following is an example of an anchor tag that is given a class.
<a href="http://www.howtoprogram.info/" class="homeLink">How to Program Home Page<a>
The next example is a rule that will turn the text red for everything with a class of homeLink, in this case the above link.
.homeLink {
color: red;
}
Note the use of a dot at the beginning of the class name. This is how we know that we are refering to a class attribute. It is very important that we remember this as it will make reading more complex selectors easier later. Lastly, the class selector has the third largest granularity, meaning that only the id selector can override it.
The ID Selector
Like the class selector, the id selector is closely related to an HTML attribute. The "id" attribute is used and has an important rule, all names used must be unique. This forces the id selector to have the smallest granularity on the basis that there can only be one element with that id. The next example illustrates how to set the id of an HTML tag.
<a href="http://www.howtoprogram.info/" id="firstHomeLink">How to Program Home Page<a>
In the above example I have given a hyperlink an id of "firstHomeLink", next I will use css to color the text of the link maroon.
#firstHomeLink {
color: maroon;
}
As you can see the only, real change to the selector is the use of the hash symbol (#). When the hash symbol preceeds a name in a CSS selector then we know that it is referring to an id selector.
Writing CSS Rules
So now that we have a basic grasp of selectors we can learn to write some simple rules. CSS Rules are used to affect the properties of HTML tags, when using CSS though we refer to these properties as attributes. A very good reference for these properties is the CSS Reference at xhtml.com. The rule in the first example is "color: green;", it has two unique parts two it. The first part is called the attribute, attributes are followed by a colon(:) and optionally a space (I like adding the space because it helps readability). The second part is called the value and is always followed by a semi-colon(;).
Lets take the example from above and add a new rule.
a {
color: green;
text-decoration: none;
}
In the above example I added a rule for text decoration, this rule says that anchor tags should not have any decoration added to them at all. So that means there will be no more lines under hyperlinks. The "text-decoration" attribute has four different values, they are: underline, overline, line-through and blink. Some attributes, like the text-decoration attribute, also allow you to define multiple values as illustrated in the following sample.
a {
color: green;
text-decoration: overline blink;
}
Using the above sample will add two values to you hyperlinks, first you will notice an overline next you will notice that the text will actually blink on and off. This can make your hyperlinks very visible but the blinking can get annoying ;). Notice that the list of values is seperated by a single space, this is how lists of multiple values are defined within CSS.
This work is licensed under a Creative Commons License.
Privacy Policy