Intro to Styling¶
No matter how useful a web page is, it still needs to look good for site visitors to want to use it. That's where styles come in. Styles are used to change how the content of your website is displayed. You can change such aspects as colors, background images, alignment, fonts, bullet point styles, and plenty more using style coding. There are two major categories of style code: inline styles and Cascading Style Sheets.
Inline Styles¶
There was a time in the not-so-distant past when website designers would put a web page's styles directly in the element's tag itself. For example, if you wanted to set the font for a paragraph to 12px, the old HTML markup would be:
<p style="font-size:12px">Twelve-point-font here.</p>
This practice is known as inline styles. It has the advantage of making it immediately apparent to the website designer what the applied markup will be for any given element without having to refer to any other files, but it is very hard to maintain, especially for large sites. Suppose you decide that paragraph tags should be rendered with 10-pixel font instead of 12-pixel font? If you used inline styles, you'd have to scour every page in your application and replace each one. All that in-line styling markup also bloats the size of individual pages and, hence, your overall application. A better solution had to be found, and it was - Cascading Style Sheets.
Cascading Style Sheets¶
The principle behind Cascading Style Sheets (or "CSS") is that all of your style markup is removed from the page and placed in one or more separate files called style sheets, each with the .CSS file extension. The style sheet is loaded in the head section of the web page, then the rules of inheritance control which styles are applied to which elements on any given page.
There are three ways in which styles in a style sheet are applied to elements on a page:
1. By element type. If you have this code in your style sheet:p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
then every <p> tag on the page will render its contents left-aligned, in 10-pixel sized Arial font, unless it's overridden. Element type styles can by an in-line style, a class style, or an id-specific style (see below).
2. By class. You can assign a made-up class name to any style in your style sheet, and that style will be applied to all elements with the same class name. As an example, suppose you updated your style sheet to look like the following:
p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
p.centered {
text-align:center;
}
Now suppose your web page included this code:
<p>The Great Gatsby is an outstanding novel.</p> <p class="centered">Daisy is a complex character.</p> <p class="centered">There is something ethereal about her.</p>
The first sentence would be rendered using the generic </p> styling, including left-alignment. The second and third sentences, however, would be centered, because they have the more specific class name style applied to them. Note: They would also have the font family and size inherited from the more generic paragraph tag, but you will learn more about that in the next section.
3. By id. The most specific way to apply a style using CSS is to give an element a particular id value, and create a style just for that element. The rules of CSS will allow you to apply the same id value to an unlimited number of elements, but it is bad practice; id's should indicate single elements on a page, and classes should indicate groups of similar elements.
Let's update our style sheet once more:
p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
p.centered {
text-align:center;
}
p#flapper {
text-align:right;
}
Now, if our page held a fourth paragraph, like so:
<p>The Great Gatsby is an outstanding novel.</p> <p class="centered">Daisy is a complex character.</p> <p class="centered">There is something ethereal about her.</p> <p id="flapper">The flapper counterculture plays an interesting part in the story.</p>
you would find that the first sentence were still left-aligned, the second and third were still centered, and the fourth were right-aligned, due to the id-specific flapper style being applied to it.
It is probably obvious, but it bears pointing out: styles applied by the class name are set off with a period (.) in the style sheet, and those applied by id are set off with a pound sign (#).
Benefits of Using CSS over Inline Styles¶
The benefits to the CSS approach are numerous, and include:
- HTML markup is easier to read
- Pages are smaller and load faster
- Content renders better in devices like screen readers, improving access by the visually impaired
- Codebase is more easily maintainable, as styles across the board can be changed easily with very little work
- Web site development takes less time, since you don't have to type the same styles over and over again
- The same web page can be rendered with different style sheets, based on the type of request that is made (this is a more advanced topic, outside the scope of this course, but it's good to know it can be done)
Special Considerations About CSS and Inline Styles¶
The following are important notes to remember when you are working with CSS and inline styles.
- When differing values are assigned to an element's style parameter by the CSS style sheet and an inline style, the inline style takes precedence over the CSS style.
- There are some styles that can only be applied via style sheet, and others that can only be applied inline. That being said, there is usually a CSS workaround for any inline style use case.
- Different browsers will display the same page in slightly different ways based on their own peculiar manners of interpreting HTML code. IE6 is a notable offender for taking "good" code and making it look like crap, and as such is the bane of many developers' and designers' existence. There are some things you can do to mitigate these differences, but the bottom line is that you really should test your pages visually in all browsers you or your client intend to support.