Lesson 13 - Cascading Style Sheets
Cascading Style Sheets (CSS) are going to simplify your job as a Webpage author. They can give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML code can.
One of the more common styles applied to HTML is the color and size of text. In HTML, you would create a green <h2> headline like this (Note: Font tag examples have been taken out from the rest of the course because they are deprecated):
<font color="#006600"><h4>a green headline</h4></font>
which would look like:
a green headline
However, if you wanted all your <h4> headings to be green, you would have to put those font tags before and after each <h4> tag. That could be a lot of tedious work, with lots of opportunity to get some tiny little detail wrong (like, missing a quotation mark). Instead, you can create a style sheet that will turn all <h4> headlines into the color green. That style sheet will look like this:
h2 { color: #006600; }
Any <h4> tags that use that style sheet will automatically be green.
Style Sheet Structure
Look at an example of style sheet.
- Select the element or tag that you want your style sheet to affect. For example, h2
- Insert the opening curly bracket {.
- Name the property and the value, separated by a colon. For example, color: #006600
- Insert the semi-colon ;
- Finally, close the style tag with a closing curly bracket }.
You can add as many property/value pairs as you want. Each pair needs to be followed by a semi-colon, and the two elements in each pair need to be separated by a colon. In the 2nd style table below, font-size and font-weight attributes have been added to the style.
There are lots of details, but remember: you only have to write your style code once, and then all those <h2> tags will be taken care of.
In this lesson, you're going to create a basic HTML page and your first .css page. First, you can copy the code in the table below, which you'll use as the starting template for this lesson.
The "Study in Thailand" theme is being used for this example. You need to change this to your own theme by changing the text in all the italicized places:
- The text between the <title> </title> tags.
- The text between the <h4> </h4> tags.
- The text between the <p> </p> tags.
Save this page as home.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Study in Thailand</title>
</head>
<body>
<h4 align="center">Modesto Community College will take you to Thailand</h4>
<p>Come to Thailand with us and have a wonderful time studying your English classes, immersing yourself in Asian culture, visiting with local families, flirting with the locals, and much more.</p>
<p>This is your chance to see Southeast Asia as part of a group of students and instructors, seekers of a new way of life, where good deeds bring merit and people are gracious and polite.</p>
</body>
</html>
|
Create a new folder on your computer and name it CSSwebsite. Put your home.html file into it. Now, open a new document in your text editor and copy the code shown in the table below.
| body |
{ background-color: #FFFFFF;
margin-top: 2%;
margin-right:10%;
margin-bottom: 2%;
margin-left: 10%; }
|
| h4 |
{ font-family: Georgia, Times, serif;
font-size: 30px;
font-weight: bold;
color: #000033; }
|
In the body style, the background color has been set to white and margins have been set all the way around the page.
In the h4 style, the font type, size, weight and color has been set. The font family is a way to specify font types across platforms (PCs vs MACs, Netscape vs IE). For more examples, you can see this tip sheet.
Save this page as first.css, and make sure that it's in your same folder, CSSwebsite.
You should now have two files in that folder, first.css and home.html.
Before you can use the style sheet, you have to link your HTML file to the css file. Open your home.html file again and add the <link> tag between the opening and closing <head> </head> tags.
<head>
<link href="first.css" rel="stylesheet" type="text/css">
<title>Study in Thailand</title>
</head>
|
The href attribute is the same in any <a> tag, containing the URL of your style sheet. The rel attribute specifies that the link is to a style sheet. The type attribute specifies the type of style sheet you're linking to.
Save your home.html file and try running it through a browser now.
More Styles
Add another style to your style sheet. For example, big capital letters at the beginning of each of the paragraphs. You can add one style to your style sheet and get all the paragraphs at once.
In the code below, start with the element p, the paragraph tag. If you want this style to affect the first letter only, tell that by adding :first-letter after the element. The colon signifies a "pseudo-element", a special part of the p tag.
Between the curly brackets, you can set the color and the size.
Open your first.css file again and add the style shown above. Save your file and try loading the home.html page in the browser again. Do you see the difference? What happens if you change the font size to 200%?
Hopefully, you will see something like this, with your own title and text in place:
But, what if you don't want every paragraph starting with a giant letter, only certain ones? You can set the style with a specific class so that it will only apply to certain paragraph tags.
In order to do this, add a class name to the tag. In this case, call the class initial, and separate it from the selector with a period.
You also need to add that class name to your HTML code in the home.html document. In the paragraph tag <p> just before your first sentence, add the attribute class="initial" and this will call up your first-letter style.
<p class="initial"> Come to Thailand with us ... </p>
This has been a little exercise to introduce you to the basic elements of style sheets: selectors, classes, properties and values. In the next lesson, you'll create a navigation panel for your website and add it to a second page. Then, you'll start to appreciate the power of cascading style sheets.
This is the end of Lesson 13. Please go to the next lesson.
|
