CSS intro for web design beginners
By Jon Roberts
Welcome to our first CSS article.
In this article you will find and introduction to CSS and links to various resources on CSS.
I like to think of CSS as the update to the HTML standard that everyone has been waiting for. CSS allow a developer to create a template and when a style change is needed a single spot is updated and all the pages instantly reflect the change. A great comparison would be having the ability to change all the paint color in your house by simply pick the color from book and instantly the color changes through out the house with out the need to repaint everything.
An easy way to think of CSS is like a dictionary that gives the definition of how objects in a template will look and act. CSS can be used to define the color, size, images, position in x, y and z. CSS also allows a designer greater flexibility in layout by allowing the designer to layer object on top of each other. These definitions are broken down in to 3 basic types ID, Class and Object.
An ID is a definition for a DIV tag in the html document. Div tags are used to group objects and content. Any object in the DIV tag set will inherit the properties from the div unless the property is defined in the CSS.
A Class is a definition that can be applied to tags other than DIV. A Class type is moss often used for defining effects for text being color size weight and font used.
A object type is used to explicitly set properties for a specific tag. IE your can set the color for a link (<a> tag) but also you can set the color for the link for when the mouse pointer is over it.
Before jumping into giving examples and coding I feel I should outline some basic coding rules
- - ID, Class and, Object names will be in lowercase
- - All ID names will begin with a #
- - All Class names will begin with a period
- - Each definition line will end with a semi-colon
Following the above basic rules will make your coding experience easier and work go much faster.
There are some basic properties I believe every design needs to know about when working with CSS. These properties are:
|
Attribute |
Values |
Description |
|
background |
color |
Allow you to set all values of the background in one declaration. We recommend that you instead use the specific background-attributes. |
|
background-attachment |
fixed |
Dictate whether your background will scroll or not when the visitor scrolls the web page up and down. |
|
background-color |
color |
Allows you to set the color of the background. |
|
background-image |
url |
Use an image as a background. Remember to choose an image that does not interfere with a visitor's ability to read your text. |
|
background-position |
size |
Define the position of your background image. You must define a background-image to use background-position. |
|
background-repeat |
repeat |
Dictate if and in which direction your background image will repeat. Vertically is the x-axis and horizontally is the y-axis. |
|
border |
solid |
There are endless types of border styles at your disposal. We recommend that you experiment with many color/border-style combinations to get an idea of all the different looks you can create. |
|
border-bottom |
size |
Set the bottom border of the element. If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). |
|
border-bottom-color |
color |
Set the color of the element's bottom border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border. |
|
border-bottom-style |
solid |
Set the bottom border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border. |
|
border-bottom-width |
size |
Set the width of the element's bottom border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border. |
|
border-color |
color |
Set the color of the element's border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border. |
|
border-left |
size |
Set the left border of the element. If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). |
|
border-left-color |
color |
Set the color of the element's left border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border. |
|
border-left-style |
Solid, double |
Set the left border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border. |
|
border-left-width |
size |
Set the width of the element's left border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border. |
|
border-right |
Size, color |
Set the right border of the element. If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). |
|
border-right-color |
Color |
Set the color of the element's right border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border. |
|
border-right-style |
Solid, double |
Set the right border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border. |
|
border-right-width |
size |
Set the width of the element's right border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border. |
|
border-style |
Solid, double |
Set the border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border. |
|
border-top |
Size, color |
Set the top border of the element. If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). |
|
border-top-color |
Color |
Set the color of the element's top border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border. |
|
border-top-style |
Solid, double |
Set the top border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border. |
|
border-top-width |
size |
Set the width of the element's top border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border. |
|
border-width |
size |
Set the width of the element's border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border. |
|
clear |
Left, right, both |
Specify which side may not have a floating element. If an element is already floating to the chosen side, then the current item will be displayed on the following line. Use "both" to clear both left and right. |
|
color |
Color |
Define the color of your font. |
|
display |
Block, inline |
Control whether or not multiple elements can appear on one line. A paragraph tag only allows for one paragraph per line, by default. With CSS you can make new lines occur after each element (block) or prevent new lines (inline). |
|
float |
Left, right |
Float an element to the left or right. The content will wrap around an element that is floated. |
|
font-family |
Font-name |
Font family's can be divided into two groups: serif and san serif. A san serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans serif fonts are much easier to read on a computer monitor as opposed to a serif font. |
|
font-size |
Percentage, size |
Set the size of your font in a variety of ways. We recommend that you use percentages for general content and reserve static values for special cases. |
|
font-style |
Italic, oblique |
Make your font italic, if it is supported by that font. This has a similar effect as the italic HTML tag. |
|
font-variant |
small-caps |
Convert the font to small capitals. Note: not all fonts support this kind of style. |
|
font-weight |
weight-key-term |
Control the thickness of your font. When using numerical values for font-weight, we suggest multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100(thin)-900(thick). |
|
height |
Size, auto |
Set the height of an element. |
|
letter-spacing |
Size |
Specify the exact value of the spacing between your letters. Letter-spacing works best when pixels are used to define the spacing. |
|
line-height |
Size, percentage |
Sets the height of the lines of text in an element. |
|
list-style |
Circle, square |
Define all attributes of a list element in one declaration. A useful technique is to define a style-type in addition to a list-image. If an image is not able to be loaded, then the style-type will be used as a backup. |
|
list-style-image |
url |
Insert an image in place of the normal list styled bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic. |
|
list-style-position |
Inside, outside |
Alter the indentation of your bullets or numbering systems. You may only use key terms when specifying the indentation. Note: "outside" is actually the default setting for list indentation. |
|
list-style-type |
Circle, square |
Select the style for your list items. Numbering styles should be used with order lists, while shapes are best saved for unordered lists. |
|
margin |
Size. percentage |
Define the margin of an element with this general attribute. A margin defines the space around an element's border. We have added borders to the example so that you may see the changes in the margin more readily. |
|
margin-bottom |
Size, percentage |
It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-bottom will set the bottom margin for this element. |
|
margin-left |
Size, percentage |
It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-left will set the left margin for this element. |
|
margin-right |
Size, percentage |
It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-right will set the right margin for this element. |
|
margin-top |
Size, percentage |
It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-top will set the top margin for this element. |
|
padding |
Size, percentage |
Define the padding of an element with this general attribute. A padding is the space between an element's border and the content within it. We have added borders to the example so that you may see the effects of padding more readily. |
|
padding-bottom |
Size, percentage |
It is possible to define these individual padding simply by adding a direction suffix to the padding attribute. Padding-bottom will set the bottom padding for this element. |
|
padding-left |
Size, percentage |
It is possible to define these individual padding simply by adding a direction suffix to the padding attribute. Padding-left will set the left padding for this element. |
|
padding-right |
Size, percentage |
It is possible to define these individual padding simply by adding a direction suffix to the padding attribute. Padding-right will set the right padding for this element. |
|
padding-top |
Size, percentage |
It is possible to define these individual padding simply by adding a direction suffix to the padding attribute. Padding-top will set the top padding for this element. |
|
position |
Absolute, relative |
Manipulate the exact position of your HTML elements. The Top and Left attributes define where the object will be placed.
|
|
text-align |
Right, center |
Manipulate the alignment of your text. |
|
text-decoration |
line-through |
Manipulate the text's decoration. Note: to specify no text decoration, be sure that you use "none". Anchor underlines can be removed with that method. |
|
text-indent |
Size, percentage |
Indent the first line of an element. This is most useful for indentation on paragraphs. |
|
text-transform |
Capitalize |
Modify the capitalization of your text with text-transform. Note: When someone copies and pastes text from your web site with CSS altered capitalization, they will paste the original, unaltered text that appears in your HTML code. |
|
vertical-align |
vertical-values |
Sets the vertical alignment of your element, most often text. Vertical-align aligns the content that appears in an imaginary line. Examples of these lines are along a line of text or within a <td> of a table. |
|
white-space |
nowrap |
Prevent your text from wrapping with nowrap. A new line will not be started unless you explicitly tell the browser to with <br/>. Note: we have defined the overflow and width CSS attributes, so that you may see nowrap in action. |
|
width |
Size, percentage |
Set the width of an element. |
|
word-spacing |
Size |
Specify the exact value of the spacing between your words. Word-spacing works best when pixels are used as the spacing value. |
|
z-index |
Whole-number |
Set the z-index of an HTML element. The HTML element with the largest z-index will appear on top of those with a smaller z-index. z-index is useful for when using positioning and for resolving positioning conflicts. |
When setting up CSS I recommend using an external CSS file this way you can use the same setting across all of your pages. The CSS file can be referenced in the between the <head> and </head> element set. An example reference is:
<link rel="stylesheet" type="text/css" href="pv.css" />
The first item I recommend in your is to define the body element. This is done as so:
/* body element definition */
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#999999;
}
/* body element End */
One small note to place a comment in your CSS file use the /* comment */ the /* begins the comments and */ end the comment.
I recommend structuring the ID definitions in the order you expect them to be used in the page design. I recommend creating a wrapper ID as your first ID. The wrapper ID is used to hold all other Ids and objects. A basic wrapper ID I use often is show below.
#wrapper{
position:relative;
margin: 0 auto;
width:760px;
background-color:#FFFFFF;
}
The use of this wrapper ID in your html would look like the below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
The wrapper ID definition is broken down as so:
position:relative | that it will be dependent on the html width and height.
margin: 0 auto | This say the top is 0px from the top of the html page and that the left and right margins are to be equal . this will cause the wrapper ID set to be centers.
Width:760px | setting the width to 760px. Working with the margin property this allows the page to be centered on screens with resolutions higher than 800X600. Also on screens set to 800X600 the width of 760px allows for the scrollbar to be display with out requiring a horizontal scrollbar.
I would then define my other containing ID are used to define the space within the wrapper ID.
Multiple different ID definition sets can be created to allow for nesting and setting up layouts. Below is an definition set that allows for what is defined as the “Holy Grail” of CSS lay out of 3-column with head menu and footer horizontal bars.
Below is sample css definition:
/* body element definition */
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#999999;
}
/* body element End */
#wrapper{
position:relative;
margin: 0 auto;
width:760px;
background-color:#FFFFFF;
}
#banner{
background-color:#0099FF;
background-repeat:no-reapeat;
width:760px;
height:100px;
float:left;
}
#banner h1 {
padding-top:25px;
padding-left:50px;
color:#ffffff;}
#menubar{
float:left;
width:760px;
height:35px;
background-color:#009900;
}
#menubar h3{
padding-left:10px;
color:#FFFF00;
}
#contwrapper{
width:760px;
float:left;
}
#leftcol{
float:left;
width:150px;
}
#leftcol a{
color:#993300;
text-decoration:underline;
font-weight:bold;
}
#leftcol a:hover{
color:#FF0000;
text-decoration:overline;
font-weight:bold;
}
#centercol{
float:left;
width:460px;
background-color:#000000;
color:#FFFFFF;
}
#rightcol{
float:right;
width:150px;
}
#wnb{
position:relative;
margin:0 auto;
background-color:#CCCCCC;
color:#333333;
width:100px;
font-size:75%;
border-width:thin;
border-style: double;
border-color:#000000;
padding-left:0;
}
#footer{
float:left;
width:760px;
height:35px;
background-color:#0099FF;
}
#footer h3 {
padding-left:10px;
color:#FFFFFF;
}
p{
padding-left:5px;
padding-r:5px;
}
.wnbb {
color:#FF0000;
font-weight:bold;
}
The example HTML looks as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of using CSS</title>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>Banner - using H1 tag </h1>
</div>
<div id="menubar"><h3>Menu Bar</h3></div>
<div id="contwrapper">
<div id="leftcol"><p>Left Column</p>
<p><a href="example.htm" title="This is a link" target="_self">This is
a link</a></p></div>
<div id="centercol"><p>Center Column</p></div>
<div id="rightcol"> <p>Right Column</p>
<div id="wnb"><p class="wnbb">Whats New Box</p><p> This is the whats
new box</p></div>
</div>
</div>
<div id="footer"><h3> Footer</h3></div>
</div>
</body>
</html>
Copy the CSS definitions into a file called example.css.
Copy the html code in a file called example.html.
Save both files together in the same directory then double click the html file. You will then see the sample lay out.
This brings us to the end of this article. Soon I will bring you more advanced articles.
Happy coding,
Jon Roberts