CSS Conclusion
advertisement
Adding Style – CSS (Cascading Style Sheets)
1. Create a new text document. Save the document as text, but save it with the extension “.css”. I will call the file
GiraffeStyle1.css, but you can call it anything you want. This is your style sheet.
2. Now link the css document to your html document. In the html document between the <head> tags, add the
line:
<link type = "text/css" rel="stylesheet" href="GiraffeStyle1.css">
In other words, the top of your html document should now look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv = "content-type" content="text/html; charset=utf-8" />
<title>All Things Giraffe</title>
<link type = "text/css" rel="stylesheet" href="GiraffeStyle1.css">
</head>
<body> …
Styling Elements
3. Create elements for adding style to formatting tags: For every tag in your html document, you can create a
separate style. So you might want to start your style sheet by creating a space for adding style for each formatting tag. You do
that by adding to your style sheet the following for each tag:
body {
}
So so far your css style sheet might look like this:
body {
}
h1{
}
h2 {
}
h3 {
}
p {
}
em {
}
strong {
}
ul {
}
li {
}
4. Create elements for adding style to tags with id’s. You may also want to style each element identified by an id
with its own style.
1
Go through your html document and find everything with an “id” attached to it. This will be the <div> sections and the <img>
sections. Add these to our stylesheet like this:
#pagecontent{
}
#sidebar {
}
#giraffeface {
}
#rest {
}
#giraffeimage{
}
#contactinfo {
}
5. Create elements for formatted tags within div elements: Now, to add even more complexity, within each of
the <div> elements identified by an id, we may want to style the formatted tags differently depending on which id it belongs to.
For instance, if you have a <p> format tag within your <div id = “sidebar”> identified element, you might want the font for that
paragraph to be a different color than the <p> format tag inside a <div id = “rest”> tag.
If it helps, think of it this way. The div tags are dividing the page into sections. We would not add the div tags unless we
wanted a particular section to look different from another section. So once we’ve defined this section, then we want to take the
format tags within that section and give them their own style. So for each div tag, we want to go through and add the
formatting elements to our style sheet like this:
#pagecontent p {
}
#pagecontent h1{
}
#pagecontent h2 {
}
#pagecontent h3 {
}
#pagecontent p {
}
#pagecontent em {
}
#pagecontent strong {
}
#pagecontent ul {
}
#pagecontent li {
}
#sidebar h2 {
}
#sidebar p {
}
#sidebar em {
}
#sidebar strong {
}
#rest h2 {
}
#rest h3 {
}
2
#rest p {
}
#rest ul {
}
#rest li {
}
#contactinfo p {
}
CSS So Far:
Note: this is just the framework. We haven’t added the pretty stuff. That’s the fun part, and it’s next.
body {
}
h1{
}
h2 {
}
h3 {
}
p {
}
em {
}
strong {
}
ul {
}
#pagecontent{
}
#sidebar {
}
#giraffeface {
}
#rest {
}
#giraffeimage{
}
#contactinfo {
}
#pagecontent p {
}
#pagecontent h1{
}
#pagecontent h2 {
}
#pagecontent h3 {
}
#pagecontent p {
}
#pagecontent em {
}
#pagecontent strong {
}
#pagecontent ul {
}
3
#pagecontent li {
}
#sidebar h2 {
}
#sidebar p {
}
#sidebar em {
}
#sidebar strong {
}
#rest h2 {
}
#rest h3 {
}
#rest p {
}
#rest ul {
}
#rest li {
}
#contactinfo p {
}
Adding the style elements:
6. Add style by specifying styles between { and } for the elements we created. Now we play. We start
adding the style. It’s probably best to start at the top, see what is affected, then work down and add style to the individual
elements as we need to.
Note: it’s possible you won’t add any style elements to some of the tags above. If you end up not adding any style element to a
particular tag, you can remove it.
What you can style:
Width
Background color/image
Float right or left
Border: style, width, color
Font: color, type, style, and size
Line-height
Text-align: left, center, right
Margin
Padding
I will show examples of each of the above.
Width:
You can set the width of an element (in either pixels or %) in the following way:
width: 600px;
Example:
#pagecontent {
width: 950px;
}
#sidebar {
width: 295px;
}
4
What the web page will look like so far:
Background:
You can set a background color or choose an image as a background:
background-color: red; (can be one of 16 standard colors, or can be a hex value)
The 16 standard colors: maroon, red, yellow, olive, purple, fuchsia, white, lime, green, navy, blue, aqua, teal, black, silver, gray,
orange.
If you want more variety, use a hex value to represent your color. For a chart of hex values and their accompanying color, go
to: http://www.december.com/html/spec/color.html and click on the color range you’re interested in.
background-image: url(savannahbg.jpg);
Example:
body {
background-color: #99AA99;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
}
#pagecontent {
width: 950px;
background-color: #664433;
5
}
#sidebar {
width: 295px;
background-color: #FFFF66;
}
#contactinfo {
background-color:#003322;
}
What the web page will look like so far:
Float:
This one’s complicated. You must use it sparingly. It allows elements to float left or right and lets the other elements flow
around it. In the html document, I might want the sidebar to be located on the right side, and have the other html elements flow
around it on the left. I may also wish to take the second picture and float it to the left so that text will flow around it on the
right. So I set the sidebar to float: right; and the giraffeimage to float:left.
float: left; (or right)
(My suggestion: only use it on <div> elements that have a width set and <img> elements, and even then only use it on one
<div> element).
6
Example:
body {
background-color: #99AA99;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
}
#pagecontent {
width: 950px;
background-color: #664433;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
float: right;
}
#giraffeimage {
float: left;
}
#contactinfo {
background-color:#003322;
}
What the web page will look like so far:
7
Border:
border-style: solid; (can set to: none, solid, dotted, dashed, double, groove, ridge, inset, and outset)
border-width: 2px; (can set the width to be as many pixels as you want)
border-color: red; (can be one of 16 standard colors, or can be a hex value)
You can also separate out the top, bottom, left and right border like this:
border-top-width: 4px;
border-bottom-style: dashed;
border-left-color: #440033;
border-right-color: black;
Example:
body {
background-color: #99AA99;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
}
#pagecontent {
width: 950px;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
float: right;
border-right-style: solid;
border-right-width: 4px;
border-right-color: #99AA99;
border-top-style: solid;
border-top-width: 4px;
border-top-color: #99AA99;
border-left-style: solid;
border-left-width: 8px;
border-left-color: #99AA99;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #99AA99;
}
#rest {
border-style: solid;
border-width: 4px;
border-color: #99AA99;
}
#giraffeimage {
float: left;
}
#contactinfo {
background-color:#003322;
8
border-style:solid;
border-width: 4px;
border-color: #99AA99;
}
What the web page will look like so far:
Font:
To set the font’s color:
color: red; (you can use the 16 standard colors or hex values)
To set the font’s type:
font-family: arial; (could be Helvetica, times, etc. or could be serif or sans-serif);
To set the font’s style:
font-style:italic; (could be normal, or italic)
To set the font’s size:
Font-size: small; (can use small, medium, or large, or %)
9
Example:
body {
background-color: #99AA99;
font-size:small;
font-family: arial, helvetica, sans-serif;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
font-size: 650%;
font-family: serif;
font-style: italic;
color: #FFFF99;
}
h2 {
font-style: italic;
color: #FF2200;
}
h3 {
font-style: italic;
color: #FF2200;
}
#pagecontent {
width: 950px;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
float: right;
border-right-style: solid;
border-right-width: 4px;
border-right-color: #99AA99;
border-top-style: solid;
border-top-width: 4px;
border-top-color: #99AA99;
border-left-style: solid;
border-left-width: 8px;
border-left-color: #99AA99;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #99AA99;
}
#rest {
border-style: solid;
border-width: 4px;
border-color: #99AA99;
color: #FFFF66;
}
10
#giraffeimage {
float: left;
}
#contactinfo {
background-color:#003322;
border-style:solid;
border-width: 4px;
border-color: #99AA99;
color: #FF2200;
}
#sidebar p {
color: #5E2605;
}
#sidebar h2 {
color: #5E2605;
}
What the web page will look like so far:
11
Text-align:
To align the text to the right, center, or left use text-align:
text-align: right; (could be right, center, or left)
Example:
body {
background-color: #99AA99;
font-size:small;
font-family: arial, helvetica, sans-serif;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
font-size: 650%;
font-family: serif;
font-style: italic;
color: #FFFF99;
text-align: right;
}
h2 {
font-style: italic;
color: #FF2200;
}
h3 {
font-style: italic;
color: #FF2200;
}
#pagecontent {
width: 950px;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
float: right;
border-right-style: solid;
border-right-width: 4px;
border-right-color: #99AA99;
border-top-style: solid;
border-top-width: 4px;
border-top-color: #99AA99;
border-left-style: solid;
border-left-width: 8px;
border-left-color: #99AA99;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #99AA99;
text-align: center;
}
#rest {
border-style: solid;
12
border-width: 4px;
border-color: #99AA99;
color: #FFFF66;
}
#giraffeimage {
float: left;
}
#contactinfo {
background-color:#003322;
border-style:solid;
border-width: 4px;
border-color: #99AA99;
color: #FF2200;
text-align: center;
}
#sidebar p {
color: #5E2605;
}
#sidebar h2 {
color: #5E2605;
}
What the web page will look like so far:
13
Margin:
The margin is the space between the border(or edge of an element) and the element next to it.
Margin: 15px; (set the margin width via pixels – you can also set margin with %. You can also use auto when you
want the margins to self-adjust. )
You can also separate out the top, bottom, left and right margin (like border) like this:
margin-top: 4px;
margin-bottom: 10px;
margin-left: 25px;
margin-right: 12px;
Example:
body {
background-color: #99AA99;
font-size:small;
font-family: arial, helvetica, sans-serif;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
font-size: 650%;
font-family: serif;
font-style: italic;
color: #FFFF99;
text-align: right;
margin:0px;
}
h2 {
font-style: italic;
color: #FF2200;
margin: 0px;
}
h3 {
font-style: italic;
color: #FF2200;
margin: 0px;
}
p{
line-height: 120%;
margin: 0px;
}
#pagecontent {
width: 950px;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
margin-left: auto;
margin-right: auto;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
14
float: right;
border-right-style: solid;
border-right-width: 4px;
border-right-color: #99AA99;
border-top-style: solid;
border-top-width: 4px;
border-top-color: #99AA99;
border-left-style: solid;
border-left-width: 8px;
border-left-color: #99AA99;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #99AA99;
text-align: center;
margin-top: 0px;
margin-center: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
#rest {
border-style: solid;
border-width: 4px;
border-color: #99AA99;
color: #FFFF66;
}
#giraffeimage {
float: left;
margin-right: 15px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#contactinfo {
background-color:#003322;
border-style:solid;
border-width: 4px;
border-color: #99AA99;
color: #FF2200;
text-align: center;
margin: 0px;
}
#sidebar p {
color: #5E2605;
line-height: 120%;
margin: 0px;
}
#sidebar h2 {
color: #5E2605;
margin: 0px;
}
What the web page will look like so far:
15
Padding:
The padding is the space between the text (or image) and the border(or edge of an element). Think of it as inside, versus
margins which is space outside the border. You can set padding like this:
padding: 15px; (set the padding width via pixels – you can also set margin with %.)
You can also separate out the top, bottom, left and right padding (like border and margin) like this:
padding-top: 4px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 12px;
Example:
body {
background-color: #99AA99;
font-size:small;
16
font-family: arial, helvetica, sans-serif;
}
h1{
background-image: url(savannahbg.jpg);
background-color:#226644;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
font-size: 650%;
font-family: serif;
font-style: italic;
color: #FFFF99;
text-align: right;
margin:0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 40px;
}
h2 {
font-style: italic;
color: #FF2200;
margin: 0px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 0px;
}
h3 {
font-style: italic;
color: #FF2200;
margin: 0px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 0px;
}
p{
line-height: 120%;
margin: 0px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 10px;
}
#pagecontent {
width: 950px;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #99AA99;
margin-left: auto;
margin-right: auto;
}
#sidebar {
width: 295px;
background-color: #FFFF66;
17
float: right;
border-right-style: solid;
border-right-width: 4px;
border-right-color: #99AA99;
border-top-style: solid;
border-top-width: 4px;
border-top-color: #99AA99;
border-left-style: solid;
border-left-width: 8px;
border-left-color: #99AA99;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #99AA99;
text-align: center;
margin-top: 0px;
margin-center: 0px;
margin-bottom: 0px;
margin-left: 30px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
}
#rest {
border-style: solid;
border-width: 4px;
border-color: #99AA99;
color: #FFFF66;
}
#giraffeimage {
float: left;
margin-right: 15px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#contactinfo {
background-color:#003322;
border-style:solid;
border-width: 4px;
border-color: #99AA99;
color: #FF2200;
text-align: center;
margin: 0px;
padding: 3px;
}
#sidebar p {
color: #5E2605;
line-height: 120%;
margin: 0px;
padding-top: 10px;
padding-bottom: 5px;
}
#sidebar h2 {
color: #5E2605;
margin: 0px;
padding-top:0px;
padding-bottom: 5px;
18
}
What the web page will look like so far:
Finally: if you want to play, you can set properties for your links:
a: link {
color: #992200;
}
a: visited {
color: #941221;
}
a:hover{
background-color: #FFFF00;
color: #FF1100;
}
19
CSS Conclusion:
Elements you can play with:
Width
Background color/image
Float right or left
Border: style, width, color
Font: color, type, style, and size
Line-height
Text-align: left, center, right
Margin
Padding
20
