Written by MPS Consultant Andrew Wood – for more help with this topic, visit Andrew at the MPS during his scheduled hours, visible on our Live Schedule.
For those of you with some familiarity with HTML, you’ve probably heard of CSS. CSS stands for Cascading Style Sheets, and they can make your HTML-coded website much, much simpler and more streamlined.
CSS defines how to display HTML elements and can save a lot of work. HTML was never intended to contain tags for formatting a document, such as <font> and <bgcolor>. This created a nightmare for web developers, and so the World Wide Web Consortium created CSS!
The most fundamental concepts of CSS
Styles in CSS are normally saved in external .css files. External style sheets have the advantage of enabling you to edit the appearance of your entire website with just one file.
Basic CSS Syntax
CSS rules have two main parts: a selector and one or more declarations:
(Image credit: http://www.w3schools.com/css/selector.gif)
Notice that in this example h1 is the selector. This means that unless the properties for any element carrying the h1 tag are specified elsewhere, the font color will always be blue and the font-size will always be 12px in the entire website (for all h1 tagged elements).
Making Declarations more Readable
I like my code to be well organized and readable, so I usually put one declaration on each line. In the following example, I specify that any elements containing the p tag will have center alignment and be green in font color.
p
{
color:green;
text-align:center;
}
CSS Comments
CSS comments are somewhat different from HTML comments.
/* This is a CSS comment. Notice that there is no arrow. */
ID and Class Selectors
The ID and Class selectors are the basis of CSS. Once you have these concepts down, looking up specifics on the Internet (for options such as font, alignment, background, padding, etc.) is easy.
ID
The ID selector is used to specify a style for a single, unique element. This selector uses the id attribute of the HTML element and is defined with a “#”.
In the following example, I define the style rules for the HTML element that contains the id “emphasis1”.
#emphasis1
{
text-align:center;
color: red;
}
To make use of this tag, you can specify the ID in any element you choose. In the following example, I make use of this ID in a paragraph:
<p id=”emphasis1”>
Anything I type within this paragraph tag will be formatted according to the rules of the emphasis1 id in the CSS style sheet.
</p>
Important note: In my experience, many browsers will allow you to use the ID in more than one HTML element. This is mainly to benefit the amateur coders who do not know proper HTML and CSS standards. Do not use the ID tag in more than one element.
Other important note: Do NOT start an ID name with a number. It will not work in Mozilla Firefox. You will notice that different browsers handle code slightly differently.
Class
The class selector is used to specify a style for a group of elements. It can be used on several elements, unlike the id (when used properly).
The class selector uses the HTML class attribute, and is defined with a “.”
In the following example, all HTML elements with class=”rightside” will be right-aligned:
.rightside
{
text-align:right;
}
To make use of this tag, specify the class in any and as many HTML elements that you want. An example follows below:
<h1 class=”rightside”>
Anything within this h1 tag will be aligned on the right.
</h1>
<p class=”rightside”>
The same goes for this paragraph tag.
</p>;
<div class=”rightside”>
<p>
Since this p tag is within the div with class=”rightside”, the text will be right-aligned.
</p>
</div>
Important note: As with the ID names, do not start the class name with a number. This is not supported in Firefox.
Inserting CSS
The two methods of insertion that I recommend are the external style sheet and the internal style sheet. The inline style method I do not recommend, because it makes for a cluttered and unorganized code.
External Style Sheet
This method is ideal when applied to many pages. The style sheet can be stored anywhere on your website and then each HTML page will link to the sheet so that it knows where to get the styling instructions from. Note that style sheets can be written in a text editor. Just make sure that the file is saved with a “.css” extension.
To link to the style sheet on your HTML page, use the following code:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
Note that you can name the sheet whatever you want to.
Internal Style Sheet
This method is useful if you only have one HTML page or if you want to have a unique style applied to a specific page. Internal style sheets are defined on the same page as the HTML code itself in the <head> section.
The following example demonstrates the insertion of an internal style sheet onto an HTML page:
<head>
<style type=”text/css”>
h1 {color:blue;}
p {margin-left: 20px;}
body {background-color:blue;}
</style>
</head>
All HTML tags in the <body> section will conform to the style sheet in the <head> section of the page (unless you specify otherwise in the HTML code).
Conclusion
Now you have the basics of CSS and hopefully you can see why it is so much more useful than fussing with all of the HTML styling tags.
There is countless information on the Internet that can help you look up the correct code for what you’re creating.
And as always, Lynda.com has some excellent tutorials on HTML and CSS.
