Cascading Style Sheets (CSS) are a great way to make web design not only more powerful, but also easier and faster to create. By creating basic style rules for your web page you can make a unique and colorful web site quickly and easily. Here is a brief introductory look at CSS.
You want to make a web page. You know the basics of HTML. You know about the tags, and putting in images and links. But what if you want to do a little bit more? There are lots of ways to improve on your web design, but one of the simplest is the use of Cascading Style Sheets (CSS).
What are Cascading Style Sheets?
Have you ever noticed that most of the text that you see on different web pages always seems to be the same? Same font, same colors, etc.? HTML has a default setting for all text on its pages. Unless told otherwise by the HTML document, all text on any web page built by anyone will be the same.
There are special codes that one can insert into an HTML document to change things such as the font size, type, and color. However, this can often be quite time-consuming and confusing, if you are planning to make changes at different parts of your text, because you will have to begin and end commands over and over.
This is where CSS comes in. By inserting style sheets at the beginning of your web page, you can define the look of your web page from the very beginning and these rules will become the new default for all text on your web page. You can even create a separate css file which you can use for a number of different web pages on your web site.
Making Your First Style Sheet
The syntax used to create a style sheet is actually very simple. There are three parts to any style rule: the selector, property, and value. Let’s look at a line of css code and identify these three parts:
h1 {font-color: red}
The first element, the h1, is the selector. This selects what is being changed by the rule you define. Here we are identifying the Heading 1 command.
Once we have identified what we are making the rule for, we can go on to the rule itself. Rules for style sheets are enclosed in brackets appearing like this: { }. The font-color in this rule is the property. This selects what about the selector we are going to change. We already know that we want to change h1 headings. Now we know that we are going to change the color of them.
Next comes the final part of the style rule, the value. That is the red here. It is the new value that we are putting in for the property of the selector. Now that we have finished our style rule, we know that every time there is an h1 heading the font color will be red.
It’s important to remember that you can put multiple properties into a single rule. For example, say we also wanted our h1 headings to be in a very large font, say size 48. We could take the same rule that we have already created and add the new value to it. It would then look like this:
h1 {font-color: red; font-size: 48pt}
When you insert multiple properties into a rule, you must use a semi-colon ; to separate the two different properties. When the computer reads the style rule created above, it will make all h1 headings in the document red in color in 48pt size.
Now that we understand a little bit about how these style sheets are written, let’s look at exactly how we write them to make them work for our web pages.
Writing Cascading Style Sheets
When you are looking at the HTML for the web page you are building, it should usually look something like this when you are first beginning:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
This is the basic skeletal structure of any web page.
It is possible to insert a style sheet anywhere you want to on a web page. However, if you want to make a basic set of rules that will hold true throughout the entire page, then you will want to insert the style sheet inside of the <HEAD> part of the document.
The <HEAD> is where all information about the page that is not actually the page resides. The most commonly used <HEAD> element is the <Title> command, which inserts the name of the page in the top bar of the browser. There are many more things that you can put into the <HEAD> section though, like META tags, javascript and our subject for the day, cascading style sheets.
Inside of the <HEAD> section of the document, you will want to put the following HTML tag:
<STYLE TYPE=“text/css”>
Don’t forget you will need a closing tag, which will come at the end of your style rules and will look like this:
</style>
This will form the basic outline of your style sheet, the style rules will come in between. In fact, we already have one style rule written up already, so let’s insert that into our HTML.
<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
h1 {font-color: red; font-size: 48pt}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The bolded part is our style sheet. Now every time that we use the h1 command, the text will be size 48 and red. Let’s try it out for ourselves.
<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
h1 {font-color: red; font-size: 48pt}
</STYLE>
</HEAD>
<BODY>
<H1>My Style Sheet Worked!</H1>
</BODY>
</HTML>
Inserting this code should give you red letters written in a size 48 font when you look at it in your browser.
Three Styles of Sheets
There are three styles in which you can write your style sheets. One style we have already discussed: embedded style. This style involves placing the css code into the <HEAD> section of a document so that it will be used throughout the rest of the page.
The second style of css is the inline style. When you use the inline style, you place your style sheet into a separate tag in order to change the attributes of that particular tag. For example, say that you wanted to change the attributes of a single paragraph. Normally you would write the paragraph tag like this: <P>. If you wanted to insert a style rule here, this is what it would look like:
<P style=“font-size:48pt color:blue”>
It is just like before, but now rather than being embedded in the <HEAD>, it is inserted right at the specific paragraph where it is wanted.
A rule to remember about style sheets: the most recent style rule wins. For example, say that you had embedded a style sheet in the <HEAD>, but you also put an inline style sheet into a specific paragraph in your text. The style sheet which is written inside the <P> command would take precedence here, and the properties in that rule would win out. This is why they are called cascading, because if you require you can put a number of different rules at different places in your document.
The final style of css is the external style. It is possible to create a style sheet on its own and save it as a .css file. Then, if you wish to use that style sheet within a particular web page of your site, you simply load that external css file into your HTML document. When you load the css file, it should look something like this:
After loading the style sheet into your document it will work exactly the same as if you had typed it all in manually into your HTML document.
Some Helpful Commands
These are some helpful commands that you will be able to use when writing your own cascading style sheets for your web page.
font-size: gives the size of the font
color: gives color of font
font-family: style of font you want (Times New Roman, Courier, Verdana, etc.)
font-style: use this if you want to put it in italic
font-weight: use this if you want to bold something
There are more commands which you can learn as you get more advanced in the use of style sheets, these should be enough to get you started. CSS is a great way to make your web pages more unique and powerful, and speed up the process of creating them.