CSS stands for Cascading Style Sheets, which are styles defined to display HTML elements.
If you take a look at the completed code, you'll notice a few things:
In this example the <style> tag is located within the <head> tag.
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property:value;}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces. Each property-value statement is then completed with a semi-colon.
When we code CSS, a common unit of measurement that I like to use is the pixel. Example: width:50px;
Make sure there is no space between the numerical value and the px.
Another common unit of measurement is em. em refers to the height of the element's font. It might be a bit harder to use em at first, so use pixels when you can.
TopCreate a background image named fade.gif and place it in folder called images.
(The image name is fade and the file type is a gif)
Next, create an HTML file called index.html and save it outside your images folder.
Copy and paste or take a look at the completed code.
Take a look at the body styles in the CSS section:
body {
background-color:#F5F5F5;
background-image:url(images/fade.gif);
background-position:top;
background-repeat:repeat-x;
}
The code breaks down like this:
The CSS shorthand of the above code would be:
body {
background:#F5F5F5 url(images/fade.gif) repeat-x top;
}
Things to take note of in this HTML file:
To apply a font style you can go about it a few ways:
You can break it down like this:
font-weight:normal;
font-size:12px;
line-height:1.5;
font-family:Verdana, Arial, Helvetica, sans-serif;
Or you can use a more efficient space-saving code using CSS shorthand:
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
Each set of code displays the font style the same way.
Instead of 1.25 as my line-height I could also give it a pixel value. For example:
line-height:14px;
A line-height of 1.5 is like one and a half line-spacing in a Word document. A line-height of 2 would be like double-spacing.
Verdana, Arial, and Sans-serif fonts are common fonts that are installed on every computer. When this code is read by a browser, it's going to look for Verdana font first. If Verdana is not installed on your computer, it will select the next font in line, in this case it's Arial.
Notice each line of CSS code is ended with a semi-colon ;
Google CSS shorthand if you would like to learn more about this.
TopWhen it comes to CSS margin and padding, this is probably what causes most of the
differences between how the CSS code is read by Internet Explorer and Firefox - and how the web layout is displayed.
With some coding experience you'll probably find out which is the best to use in a certain situation. Often times both margin and padding values are inserted because they do different things.
Some examples:
padding:5px 0 10px 20px;
This code reads that there's a padding of 5px on top, 0px on the right, 10px of padding on the bottom, and 20px padding on the left side.
The order is clockwise from the top.
This code could also be broken down like this:
padding-top:5px;
padding-right:0px;
padding-bottom:10px;
padding-left:20px;
If you decide to write the code this way, the order does not matter.
padding-right:0; is accepted and would be the same as padding-right:0px;
padding:5px; would apply 5px of padding to all four sides.
padding:5px 10px; would apply 5px of padding to the top and bottom and 10px of padding to the right and left sides.
The same rules will apply if you're coding the margin. You can also try:
margin:5px 0 10px 20px;
margin-right:0;
etc...
Try changing the margin and padding values in the li and ul CSS code that follows.
TopFocusing on the unordered list section of the completed html code:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
In order to style this list, refer back to the ul and li selectors in the style section of our code:
ul {
list-style: none;
margin: 0.5em 0 1em 2em;
padding: 0;
}
li {
text-align:left;
padding: 0 0 0 20px;
margin:2px 0px;
list-style-type: none;
background: url(bullet.png) no-repeat 0 0.25em;
list-style-position:outside;
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
color:red;
display:inline;
}
When you publish this code and then preview in your browser take note that the bullet that is applied to the list item is appears as a bullet but it's really a background image. Depending on the size of the bullet, the code padding: 0 0 0 20px; is referring to 20px of padding-left. Change this value to 3px to see a difference. You might notice some overlapping.
Top<!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>
<title>Royce's test document</title>
<style type="text/css">
body {
/*
background-color:#F5F5F5;
background-image:url(images/fade.gif);
background-position:top;
background-repeat:repeat-x;
*/
background:#F5F5F5 url(images/fade.gif) repeat-x top;
}
ul {
list-style: none;
margin: 0.5em 0 1em 2em;
padding: 0;
}
li {
text-align:left;
padding: 0 0 0 20px;
margin:2px 0px;
list-style-type: none;
background: url(bullet.png) no-repeat 0 0.25em;
list-style-position:outside;
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
color:red;
display:inline;
}
/* this is a CSS comment */
</style>
</head>
<body>
<h3>this is an h3 heading tag</h3>
This is sample text. This is sample text.
<!-- this is an html comment -->
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
</ul>
</body>
</html>