|
Cascading Style Sheets
A cascading style sheet, or CSS, is a file that contains the formatting for how HTML elements are displayed on any web page that refers to it. A CSS is a file that sits on the web server and contains that information. A CSS keeps your web site organized, consistent, and much easier to maintain. The word “cascading” might throw you off, but all it means is that the style sheet can control the formatting for your whole document from one place. Using a CSS means you have all the control in formatting down to a very detailed level or you can let the CSS take care of it. So, for example, if you want all your body text to be regular text you can let the CSS define that, but if you have a single word that you want to italicize you can still do that by using a tag around the text. There is a priority to formatting, which means that the formatting at the level closest to the code takes priority over formatting furthest from the code. The following list shows you the priority of formatting: 1. Browser default 2. External Style Sheet (CSS) 3. Internal formatting (in the <head> tag) 4. Specifically applied formatting
So in the preceding list, because the italics is specifically applied (4), it overrides all the other formatting (1,2,3).
Format of a Style Sheet
The format of an external style sheet (separate file) or an internal one (contained in the HTML file) is the same. This can be in a separate style sheet or in the <head> tag of a particular web page. The format is simply
tag {property: value}
These are the different parts:
■ Tag—This is the HTML tag to which you want to apply a tag.
■ Property—This is the property (text color, size, or special formatting) of the text you want to apply to the tag.
■ Value—This is the value of the property (red, bold, underlined) you want applied to the tag. So, for example, if you want all <H1> tags to be red,
■ Tag—h1
■ Property—color
■ Value—red Put it together in code and it looks like this:
h1 {color: red}
This changes all your <H1> tags so that the text is red. If you want the color to be blue instead, just change the reference to
h1 {color: blue}
All your <H1> heads are now blue.
This article covers how to create the files and links in HTML documents to use a CSS. A linked style sheet enables you to control the formatting on multiple documents from one centralized place. If you are using a CSS to control the formatting on several pages and want to make a change to all the pages at once you just need to change the CSS. To link to an external style sheet, you need to put a link in the <head> area of your web page. This link takes this structure:
<link rel=”stylesheet” type=”text/css” href=”site.css” />
In this case, a link to a file (with the type of text/css) named “site.css” is the name of your CSS. To practice creating a CSS, follow these steps: 1. Create a text file containing this code:
h1 {
color:red;
}
h2 {
color:blue;
}
h3 {
color:green;
}
2. Save this page as site.css.
3. Create a web page called example.html containing this code:
<html> <head> <title>CSS Example</title> <link rel=”stylesheet” type=”text/css” href=”site.css” /> </head> <body> <h1>This is heading 1.<h1> <h2>This is heading 2.<h2> <h3>This is heading 3.<h3> </body> </html>
4. Save this page as example.html in the same location as site.css.
5. Open example.html in a browser and you will see colored text.
Scripts are small pieces of code made from a few lines of text. Scripting is adding that programming code to a website. Scripting is more complex than HTML tags. Some examples are JavaScript, VBScript, or PERL. To some, scripting might seem like a scary word. You might be asking yourself, “I don’t know how to program.” Using scripts within your HTML is by no means a cake walk, but it is also not impossible. A number of different scripting languages are used on the Web (JavaScript, Perl, VBScript), and they can make your web pages fantastically interactive and fun. The keys when experimenting with scripting are to do your research, back up your work, and test as much as you can.
Now that you understand how to create a web page with HTML, you’ll probably be surprised to know that there are sites out there that offer website templates for free, complete with fully formed pages and cascading style sheets. I recommend starting with these templates but then applying what you’ve learned in this article to enhance your site. Web templates can save you a lot of time (and money), but they can also introduce complications that you don’t need, such as formatting or images you don’t like.