Styles, also known as Cascading Style Sheets(CSS), are used affect how elements look on a web page. When used properly, they can enhance the look of a web site, allow for easy and consistent change across an entire site, and make a dynamic page when coupled with Javascript/DOM.
Typically, styles are able to affect:
- Color (foreground and background)
- Font
- Position
- Visibility
- Margins
- Borders (usually of layers and cells)
Note that they can CHANGE what exists on the page, they cannot add/remove things from the page. Even with visibility toggle elements can appear and disappear from the page, but they have to exist in the first place in order to be toggled.
Some components have their own unique styles, e.g. text components may have scrollbar styles, links have hover styles. Each browser also have their own style extensions such as opacity. However, just like Javascript/DOM, I prefer using cross-browser styles from the start so that it is simpler later.
Hello World Style
We start off with an example of a style. First, take a look at a plain HTML page:
Hello World!
Now we add an inline style to the h1 tag. More about what’s an inline style later.
Hello World!
Test out the two can you should see the obvious difference. In this case, the style changed the color of the element.
Different ways of defining Styles
Inline CSS
The previous example you’ve seen defines an inline style — a style that affects that particular tag. The style is defined by the STYLE attribute inside the start tag of an element. All visual elements have the style attribute. The style definition are name value pairs separated by : and ;. For example, this specifies that this tag is red, underlined and uses the Arial font.
Hello World!
Inline styles only affect this particular element. If you define another h1 later or before, the h1 will still be black.
Internal CSS
The next CSS level is internal, where the style is defined in the head section of a html document.
Hello World!
Another Hello!
Normal h2 Hello
Styled h2 Hello!
Paragraphs can be blue too.
Two styles are defined there, the 1st h1 style overrides the default h1 style, therefore affects all h1’s in the document. The tag name is specified and the style is wrapped in {}. The 2nd .newH2 style is a custom style. Custom styles begin with a dot, followed by a custom name, then by the style also wrapped in {}. They are applied using the class attribute. Any tag that declares it uses that class will be affected by the style.
External CSS
The 3rd method requires an external file. The following code should reside in the file “style.css” in the same folder as the html file.
style.css
h1 {color:#FF0000; text-decoration: underline; font-family:Arial }
.blueText { color:#0000FF; }
styletest.html
Hello World!
Another Hello!
Normal h2 Hello
Styled h2 Hello!
Paragraphs can be blue too.
If you can spot the difference between this and the previous example, the style definitions are simply moved to an external file, and there’s a link tag that specifies where it is. The main advantage of this is that multiple html files can reference the same CSS, thus achieving consistency in look and feel across multiple pages. At the same time, changing the CSS definition in the single file can also change the whole look and feel across an entire site.
If so, what’s the use of inline and internal CSS?
CASCADING style sheets
Why styles are known as Cascading is the nature of priority of the different style definitions. Inline CSS has the highest priority, so it overrides any other style defined in the internal or external CSS. For example, you just want this particular text box to be disabled, so it’s easier to just mark an inline style rather than creating a name in the internal or external style sheet, which is only used by this single element.
Similarly, some styles just affect the current page so its not necessary to clutter the external CSS with useless styles. Since every page in the entire site will have to load that CSS every time, it’s a good idea to keep the external CSS file as small as you can.
Styles take precedence in the following order, with 1 being the highest priority.
- Inline CSS
- Internal CSS
- External CSS
- Browser Default
The following incremental example shows you the effects of cascaded style sheets.
styletest.html
Check out my color and decoration.
This example demonstrates the browser default style, the words are black. We now introduce an external CSS. As you can see we can put the attributes on separate lines for more readability.
style.css
p {
color:#FF0000;
text-decoration: underline;
}
styletest.html
Check out my color and decoration.
When you run this example, the text has become red and underlined. The other properties like text size, margins etc have been CASCADED from the browser default. We now add the internal CSS.
styletest.html
Check out my color and decoration.
Now the text changes to blue, and it is bold AND underlined. The internal CSS had override the color settings, but cascaded the underline and added the bold. Now we add an inline CSS.
styletest.html
Check out my color and decoration.
This paragraph is not affected.
Now the text is green (override), bold and underline attributes have been cascaded, and it now make the text also italic. An extra paragraph is added, to show that it is not affected by the inline CSS, but applies the internal CSS effects.
Conclusion
This simple article demonstrate how to apply CSS to HTML elements, in a cascading manner.