Part 2 of our Back to the Basics Web Series will focus on Cascading Style Sheets, Style Attributes and Style Properties.
What is a Style Sheet?
A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML’s STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.
Each rule is made up of a selector–usually an HTML element such as BODY, P, or EM–and the style to be applied to the selector.
There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.
Adding a Separate style sheet to your website and link it to your html:
The first thing we would like to do is create a separate Cascading Style Sheet file that we can link to from our html page.
To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don’t forget to make it plain text again, using the Format menu.)
Give this file a name that can be usefully associated with the html Project and use the file extension .css. Save this file in any directory that the site has access to.
Below you will find code that will be used to style the starting html used above. /* */ represents a commented out area that the html will ignore.
/* _lcid=”1033″ _version=”14.0.4762″_LocalBinding */
body {
}
Ul#navbar {
}
h1 {
}
Ul#navbar li {
}
Ul#navbar a {
}
a:link {
}
a:visited {
}
Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the yourwebsite.html file, and save the style sheet as “TCSC.css” (Or any suitable filename).
This will tell the browser that the style sheet is found in the file called “TCSC.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.
On the HTML page and anywhere between the <head></head> tag add a linked reference to your style sheet.
<link rel=”stylesheet” href=”TCSC.css”>
Style Sheet names and classes:
The first element we will style is the body tag. You can choose not to give the body tag a class name or id. Most of the time body classes aren’t given a class name or id, but it can be useful with more advanced styling efforts.
Start by typing the tag name body and then typing an open left curly brace {. Next we will give the body of our html page a background color property by typing background-color:# 007f36; make sure to close each property with a semi-colon. Then we finish styling the body tag by closing it out with an end right curly brace.
body {
Background-color:#007f36;
}
Styling the site navigation:
The list at the top of the HTML page is meant to become a navigation menu. Many Web sites have some sort of menu along the top or on the side of the page and this page should have one as well. We will put it on the left side for this demo.
The menu is already in the HTML page. It is the <ul> list at the top. The links in it don’t work, since our “Web site” so far consists of only one page, but that doesn’t matter now. On a real Web site, there should not be any broken links, of course.
In the editor window, add the following lines to the HTML file:
<ul>
<li><a href=”index.html”>Home page</a>
<li><a href=”support.html”>Support</a>
<li><a href=”Resources.html”>My town</a>
<li><a href=”Contacts.html”>Contacts</a>
</ul>
Let’s give our navigation a css class name or ID so that we can style the navigation element and leave the remainder of the content alone. So you have 2 options on how to reference a style class for an element. An ID or a Class. Standards specify that any given ID name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there is usually only one menu per page, one banner, and usually only one content pane.
For our example we are going to give the navigation UL an ID. Let’s call the ID “navbar”. So in our html we are going to change the UL tag to the following:<ul id=”navbar”>. Make sure you put quotes around the id or class name.
<ul id=”navbar”>
<li><a href=”index.html”>Home page</a>
<li><a href=”support.html”>Support</a>
<li><a href=”Resources.html”>My town</a>
<li><a href=”Contacts.html”>Contacts</a>
</ul>
In our style sheet we are going to add the css tag name UL#navbar and the styling properties we would like to give it. Notice that an ID’s CSS is an HTML element, followed by a “#” symbol, and finally the ID’s name. The end result looks something like “element#idname”. Also, be sure to absorb the fact that when an ID is used in HTML, we must use id=”name” instead of class=”name” to reference it! Class CSS an HTML element is followed by a “.” (period) and finally the Class’ name. The end result looks something like “element.classname”.
So we need to move the list to the left and move the rest of the content text a little to the right, to make room for it. The CSS properties we use for that are ‘padding-left’ (to move the body text to the right) and ‘position’, ‘left’ and ‘top’ (to move the menu). An included CSS reference chart will give further style properties and what they do.
Here is how our stylesheet should look with our ul tag being styled.
ul#navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 150px; }
Here is an explanation for which each of these style properties are doing for the UL Tag:
1. List-style-type: Specifies the type of list-item marker. There is normally a bullet there and we removed this by setting the property to none.
2. Padding: Sets all the padding properties in one declaration. By setting the padding to 0, the left, right, top, and bottom padding property have a 0 pixel spacing to the edge of the UL tag.
3. Margin: Sets all the margin properties in one declaration. By setting the margin to 0, the left, right, top, and bottom margin property have a 0 pixel margin space to the edge of the UL tag.
4. Position: Specifies the type of positioning for an element. By setting the position to absolute, the navigation will not move regardless of the amount of content on the page.
5. Top: Sets the top margin edge for a positioned box. I set this to 2em. 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ’2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses, but pixel sizing can be used as well.
6. Left: Sets the left margin edge for a positioned box. I set this to 1em.
7. Width: Sets the width of an element I set this to 150px;
The navigation menu still looks like a list, instead of a menu. Let’s add some style to it. We’ll also give each item its own white background and a black square to the right.
We also haven’t said what the colors of the links should be, so let’s add that as well: green for links that the user hasn’t seen yet and purple for links already visited:
Here is how our stylesheet should look with each link item being styled.
ul#navbar li {
background-color: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 15px solid black }
Here is an explanation for which each of these style properties are doing for the LI Tag:
1. ul#navbar li: ul#navbar is the original class name given to our UL Tag, but now we are pointing to the list items directly by adding a space and li to the end of the ID Class Name.
2. Background-color: Sets the background color of an element. By setting background color of each list item to white we are also setting ourselves up to add some spacing for each tab instead of one giant block.
3. Margin: Sets all the margin properties in one declaration. By setting the margin to 0.5em 0, the top and bottom of the list item will have a margin of 0.5em and the left and right margin will have no spacing or margin.
4. Padding : Sets all the padding properties in one declaration. By setting the padding to 0.3em, the left, right, top, and bottom padding property have a 0.3em pixel spacing from the text in the list item to the edge of the LI Tag.
5. border-right: Sets all the right border properties in one declaration. By setting the right border to 15px solid black, we are creating a 15 pixel wide border that is solid and uses the color black.
Now we would like to style the font links within the navigation to give them a specific font family, size and color attribute.
Here is how our stylesheet should look with the “ul#navbar a” Element
being styled.
ul#navbar a {
text-decoration: none;
font-family:Arial;
color:# 007f36;
font-size:10pt;
}
Here is an explanation for which each of these style properties are doing for the UL “a” Tag:
1. ul#navbar a: ul#navbar is the original class name given to our UL Tag, but now we are pointing to the link or anchor tag directly by adding a space and the letter “a” to the end of the ID Class Name.
2. Text-decoration: Specifies the decoration added to text. By setting this property to none, we are removing the underline the gets added to links in html by default.
3. Font-Family: Specifies the font family for text. By setting the font family property to “arial”, all of the text within each list item will use the Arial font.
4. Color: Sets the color of text. By setting the font color to #007f36, the links in the navigation will be a green shade.
5. font-size: Specifies the font size of text. By setting the font size to 10pt, all of the text within each list item will be the same font size.
Now we would like to style the font links within the navigation to give them a specific hover attribute when placing the mouse cursor over the links in the navigation.
Here is how our stylesheet should look with the “ul#navbar a:hover” Element
being styled.
ul#navbar a:hover{
text-decoration: underline;
color:#000000;}
Here is an explanation for which each of these style properties are doing for the UL “a:hover” Tag:
1. ul#navbar a:hover: ul#navbar is the original class name given to our UL Tag, but now we are pointing to the link or anchor tag directly by adding a space and the letter “a:hover” to the end of the ID Class Name.
2. Text-decoration: Specifies the decoration added to text. By setting this property to underline, we are adding an underline that will appear when the link is hovered over.
3. Color: Sets the color of text. By setting the font color to #000000, the links’ hover color changes to black when the mouse hovers over the link.
Now we would like to style the font links within the navigation to give them a specific color attribute after a link has been clicked and a site has been visited.
Here is how our stylesheet should look with the “ul#navbar a:visited” Element
being styled.
ul#navbar a:visited {
color:#ba00ff;}
Here is an explanation for which each of these style properties are doing for the UL “a:visited” Tag:
1. ul#navbar a:visited: ul#navbar is the original class name given to our UL Tag, but now we are pointing to the link or anchor tag directly by adding a space and the letter “a:visited” to the end of the ID Class Name.
2. Color: Sets the color of text. By setting the font color to #000000, the links’ hover color changes to black when the mouse hovers over the link.
Note that unless specified the visited and hover classes will still use the styling properties of the parent class. So we do not need to repeat the font-family and font-size each time.
Styling Our Content:
By styling the body we give our site a default style property that our site can always fall back on if an element doesn’t have a supporting class or style attribute defined.
Here is the body style code that will style all of our fonts on the page. Remembering that as in our navigation we can change the style of font our content uses by adding classes to each element tag and then styling those classes and id’s separately.
body {
padding-left: 200px;
font-family: Georgia, “Times New Roman”, Times, serif;
color: #ffffff;
background-color: #007f36; }
Here is an explanation for which each of these style properties are doing for the Body Tag:
1. Padding-left: Sets the left padding of an element. By setting the left padding to 200px, the content on the page will stay to the right of our navigation which we gave an absolute position to so it would never move.
2. Font-family: Specifies the font family for text. We can change the font family for any of the content at any time. So let’s set the text in the “Georgia” font, except for the h1 heading, which we’ll give “Verdana.”
On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.
3. Color: Sets the color of text. By setting the font color to #ffffff or white we are assured that all content on the page unless styled otherwise, will always have a white font.
4. Background-color: Sets the background color of an element. By setting the background color to #007f36, the page will have a green background.
Now if we want to change the color of our <H1> header than we will need to style the tag directly or give it a class id or name. Let’s give or <H1> header a class ID since we only want to style this one <H1> header and maybe let other headers throughout our site user other styles.
The first thing we need to do is to change the opening <H1> tag to include a new class id.
<h1 id=”TCSCh1″>This is the Title of My Content</h1>
Now we would like to style the Text within our <H1> header tag.
Here is how our stylesheet should look with the h1#TCSCh1 <H1> header being styled.
h1#TCSCh1 {
font-family: Verdana;
font-size:30pt;
}
Here is an explanation for which each of these style properties are doing for the H1 Tag:
1. h1#TCSCh1: h1#TCSCh1 includes the h1 tag followed by # and then the ID name TCSCh1.
2. Font-family: Specifies the font family for text. By setting this property to verdana, we are making the default font of our <H1> header use the font family Verdana.
