Using HTML - Page 4 - CSS Basics - Learning to build your own website from scratch
Please note that this is part of a series:
«« First « Previous (Page 3)
Page 1 through 3 explained the basics of HTML using the XHTML1.0 Transitional DocType. Page 4 will focus on CSS specific XHTML elements. First we’ll talk about the <link> element, the <style> element, and the style attribute. Next we’ll talk about the <div> and <span> elements, used to group sections of the page for use with CSS. Finally we’ll explain the classes and IDs used in a CSS sheet, and discuss the order in which CSS is applied.
So where can you put your CSS code? There are three ways to apply CSS code to your webpage. The first is using external CSS files. These are extremely popular for several reasons. First, they’re in a seperate file. If you don’t change the CSS, users will have to download the CSS data only once. While technically this slightly increases load time their first visit (any extra file - any extra connection - causes extra connection time), it makes every subsequent visit faster. In addition, this also saves your server - and your visitor - some bandwidth. Another reason they’re popular is because all the data is seperate in one file. No searching for it, nicely organized (well… as organized as you make it). A third reason is that because it’s all in one file, if you want to change something on every page - every page linking to this CSS file - you have to edit only one file. You can get the same effect with PHP, ASP, SSI or other techniques, but this is built-in and simple.
A second place to put your CSS code is within an internal <style> </style> element. This element goes in your <head> </head> element. This has the benefit of being grouped, but is typically only used if a single page uses the CSS data. The third place to put your CSS code is locally in another element. An example would be <li style=”font-weight:bold;”> </li>. While this is powerful and direct, it’s also decentralized. Looking for a few style attributes in tons of HTML code can be a big job. A job that would be small in comparison when using one of the other methods. Furthermore, using CSS in this way changes only one instance of an element (the next <li> </li> would no longer have bold text). If that might be what you want, you can use ids and still put the CSS in the <head> element or the external css file. The only reason to use local CSS is if you’re certain you’ll use this on only one page… Or perhaps for testing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html>
<head>
<title>Woohoo! A complete webpage!</title>
<link rel="stylesheet" href=http://www.some.website/style.css
type="text/css" media="screen" /><!-- external CSS sheet -->
<style>
/* this is a CSS comment */
</style>
</head>
<body>
<p style="text-align:justify;"> text </p>
</body>
</html>
The <div> and <span> elements are extremely similar. In and of themselves, they don’t really do anything. However, you can apply CSS to them with either local, internal or external CSS. To apply external or internal CSS, use either classes or IDs. For local CSS, just use the same style attribute you can use on the other HTML elements. The only difference between <div> and <span> - aside from their name, obviously - is that <div> is for entire lines of text, while <span> can be for a partial line, part of one line and part of the next (as long as it’s one contiguous block of content), or even several lines. Yes, you could use <span> where you should use a <div>, but that’s bad coding practice. If nothing else, using <div> will make it clear to you it’s a content block, not a partial phrase or so…
The difference between classes and ids is similarly simple. An id is unique, while a class can be used many times over. There can only be either zero or one element with a specific id, while there can be any number using a specific class. For example, you could be trying to sell a computer program. You’d use an unordered list (<ul> </ul>) to list the features. First, your CSS would contain code to make all <li> </li> elements use the Georgia font, because you think it’s pretty. Second, your CSS would contain code to make all important features bolded. It would be up to you to list important features with e.g. the following class: <li class=”important”> </li>. Finally, you could make the price stand out by making it red: <li id=”price”> </li>. Of course, the price is important, so you’d not doubt want to make it bold as well: <li class=”important” id=”price”> </li>.
The order in which CSS is applied is also simple. High to low, or last to first. First, it uses the local style attribute. If there is no local attribute, it uses the internal CSS. If there is no internal CSS, it uses the external CSS. If there is no external CSS, the data gets default values. Or to rephrase that: first it loads the external CSS. If the same element is found in internal CSS, the values are overwritten. If the same element is found in local CSS, it is overwritten. So the local CSS has the highest priority, then internal CSS, and external CSS the lowest.
To conclude, let’s recap what we’ve learnt here:
- The <link /> element allows you to link to an external CSS file, the <style> </style> element was made for internal CSS, and the style attribute is used for local CSS
- <div> </div> and <span> </span> elements can be used to group text and/or other content, a potentially powerful use in combination with CSS
- id and class attributes are used to identify elements to CSS. There can be only one instance of an element using a specific id, while any number of instances can use a class
- If an element has a CSS attribute (say font-weight) in the external CSS, the internal CSS and the inline CSS, it would use the inline CSS.
Please note that this is part of a series:
«« First « Previous (Page 3)
