CSS Guide
CSS Guide
It is time to take your web designing skills to the next level. Cascading Style Sheets (CSS) are a
way to control the look and feel of your HTML documents in an organized and efficient manner. With
CSS you will be able to:
A style sheet can, and should be, completely separate from your HTML documents. When
you have mastered CSS and HTML you will be able to separate your web site's design and
formatting(CSS) from the content(HTML).
Intended Audience
Before you begin the CSS Tutorial we suggest that you check to see you meet the following
recommendations:
If you do not, we recommend that you check out our HTML Tutorial before taking on CSS.
When you are ready, continue the tutorial to learn about the basic form of CSS and where you
should place your CSS code.
CSS Selector
CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to
be manipulating with CSS code and you should have a solid understanding of them before continuing
on in this tutorial. Lucky for you, they are pretty simple to comprehend!
Where the property is the CSS element you wish to manipulate and "VALUE" represents the value
of the specified property.
The above example is a template that you can use whenever you are manipulating the paragraph
HTML element. In the next lessons we will teach where to place your CSS and why and where you
should use CSS.
CSS Lists
Lists come in two basic flavors in CSS: unordered and ordered. However, CSS allows for further
customizations of lists, as compared to HTML, with the allowance for images to be used as the bullets
in an unordered lists.
If you are wanting to use something different then the default numbering of ordered lists, or the
bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS
allows you to select from a wide variety of different list item shapes.
CSS Code:
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
Display:
I. This list is
II. using roman
III. numerals
IV. with CSS!
o This list is
o using circle types
o with CSS!
Display:
• This list is
• using a picture with CSS!
1. This list is
2. using a picture
3. with CSS!
As you can see, it does not matter if the lists are <ul> or <ol> when using images. Nevertheless, it
is a good coding practice to only use images for an unordered list. Ordered lists usually have an
incremented(growing) value that appears next to each list item.
With CSS it is possible to alter the indentation that takes place with your list items. See the
example below for the trick of indenting your lists. You may only use keyterms when specifying the
indentation.
CSS Code:
ul { list-style-position: inside; }
ol { list-style-position: outside; }
Display:
• This list is
• using inside
• positioning with CSS!
1. This list is
2. using outside
3. positioning with CSS!
CSS Code:
ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}
Display:
• Go Back
• Continue
Try it out!
Internal CSS
Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal
and external, as they are the only flavors a designer should utilize. In this lesson we cover the basics
of the easier type, internal. When using internal CSS, you must add a new tag, style, inside the
<head> tag. The HTML code below contains an example of <style>'s usage, outlined in red.
CSS Code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
This doesn't actually do anything visually. The code in red simply tells the browser that we will be
using Internal CSS.
CSS Code:
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Display:
White text on a black background!
You probably noticed that in our CSS code we were altering the BODY and P HTML tags. The
great thing about CSS is that it is an intuitive language. Once you understand the general format for
CSS code you are pretty much set.
General CSS Format:
Back in our code example, we manipulated <p> and <body>, both well known HTML tags. To
clarify, here is a step-by-step process of what is going on in that first line of CSS code where we
played around with "p".
Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code
that altered the <body>'s background.
Until you become accustomed to using CSS code, you will probably find your CSS code not
working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that
you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you ever have issues
with the correct format for CSS.
• Go Back
• Continue
Try it out!
External CSS
When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a
separate file allows the web designer to completely differentiate between content(HTML) and
design(CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file
extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. If you're
confused, don't worry. We are going to walk you through the whole process.
File Creation
Let us get started by making that external CSS file. Open up notepad.exe, or any other plain text
editor and type the following CSS code.
CSS Code:
body{ background-color: gray }
p { color: blue; }
h3{ color: white; }
Now save the file as a CSS file and make sure that you are not saving it as a text file, as notepad
likes to do by default. Name the file "test.css" (without the quotes).
Now create a new file and fill it with the following HTML code.
CSS Code:
<html>
<head>
Display:
A White Header
This paragraph has a blue font. The background color of this page is gray because we changed it
with CSS!
Congratulations! You just made your first website that uses External CSS! Now, let us move on to
the fun stuff.
CSS Inline
Thus far we have only shown you how to use CSS the way it was meant to be used, separate
from the HTML. However, it is possible to place CSS right in the thick of your HTML code and this
method of CSS usage is referred to as inline css.
Inline CSS has the highest priority out of external, internal, and inline CSS. This means that
you can override styles that are defined in external or internal by using inline CSS. However, inline
CSS detracts from the true purpose of CSS, so use it sparingly.
Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML
element all you have to do is specify the desired CSS properties with the style HTML attribute. Let's
add some style to a paragraph tag.
CSS Code:
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>
Display:
If you have read through the beginning of this CSS tutorial you probably have a good idea of what
is going on. Below is the general form for setting Inline CSS in any HTML element.
Pseudo Code:
<htmltag style="cssproperty1: value; cssproperty2: value;"> </htmltag>
The normal rules of CSS apply inside the style attribute. Each CSS statement must be separated
with a semicolon ";" and colons appear between the CSS property and its value.
CSS Code:
<p style="background: url("yellow_rock.gif");">
This is broken</p>
Display:
This is broken
This is workin'
• Go Back
• Continue
Try it out!
CSS Classes
You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for
example, sometimes you want the font to be large and white, while other times you would prefer the
font to be small and black. CSS would not be very useful if it did not allow you to have many different
types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the
use of classes.
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
Display:
You can use CSS Classes with any HTML element! However, what happens if we had already
defined a value for the base <p> tag? Well, what happens is the HTML element first takes on the style
defined by the base and then the styles defined by the class. If the CSS class uses a CSS attribute
already defined by the base CSS then the formatting defined by the class will be the value that is used.
It may be easier to imagine that the base CSS code is the starting look that all HTML elements will
have and the only way to change that look is to overwrite the attributes using CSS classes. Please see
the example below for a visual of this tricky topic.
CSS Code:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
...
Display:
Remember, CSS code in classes will override the general CSS code. p.test1 overrides p!
• Go Back
• Continue
Try it out!
CSS Background
The background of your website is very important, so please spend some time with this tutorial. If
you are aiming for a professional website, a good rule of thumb is to use a light background with dark
text. However, if you're just making a website for pleasure, then any kind of color combination would
be acceptable.
With CSS you are able to set the background color or image of any CSS element. In
addition, you have control over how the background image is displayed. You may choose to have it
repeat horizontally, vertically, or neither direction. You may also choose to have the background remain
in a fixed position, or have it scroll as it does normally. The following examples will show you how to
implement all of these options.
As you have seen throughout Tizag Tutorials, many different background colors are present.
These varying backgrounds were obtained without using tables! Below are a couple examples of CSS
backgrounds.
CSS Code:
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
Display:
In the above example we used three different formats for defining a color: a color name,
hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound
sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and
Blue. Example form: rbg( Red, Green, Blue); with the range of 0-255 for each value.
Need an image to repeat left-to-right, like the gradient background that appears at the top of
Tizag.com? Or maybe you would like to have an image that remains fixed when the user scrolls down
your page. This can be done quite easily with CSS and more, including:
CSS Code:
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
Display:
This <p> has a background image using a local path to the picture.
You can have a background image repeat vertically (y), horizontally (x), in both directions, or in
neither direction.
CSS Code:
p{
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y; }
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x; }
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat; }
Display:
This <p> has a background image repeating in both directions (default repeat). If
you use this option, make sure that your image was designed to be repeated.
CSS Code:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll; }
Display:
CSS Background Image Positioning
If you would like to define where exactly an image appears within an HTML element, you may use
CSS's background-position. Please take note that there are three different ways of defining position:
length, percentages, and keywords. We recommending using lengths, specifically pixels.
CSS Code:
p{
background-image: url(smallPic.jpg);
background-position: 20px 10px;
}
h4 {
background-image: url(smallPic.jpg);
background-position: 30% 30%;
}
ol {
background-image: url(smallPic.jpg);
background-position: top center;
}
Display:
Note: When using pixels, the location of the image will be (A)px from the left of the screen and
(B)px from the top of the screen, where A and B are integers. Note: When using percentages, the
location of the image will be (A)% from the left of the screen and (B)% from the top of the screen,
where A and B are integers. Note:Available positioning keywords are: top, right, bottom, left, and
center.
Necessary Image:
Notice that the image is very slim. We are going to be tiling the image horizontally, so you can
make the image skinny as possible, just as long as the image is 1 pixel or wider you will be fine.
Using the repeat attribute, we set the value to repeat-x which causes the image to span left to
right across the specified element. This example adds a gradient background to the paragraph
element.
CSS Code:
p{
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
Display:
This paragraph has a gradient background. The gradient background was first made
in a painting program and then repeated horizontally across the paragraph element. It
makes for a neat effect that also loads quickly! Because the image is very skinny, the file
size is also very small. You could also create a gradient that changes color left to right
and repeat it in the vertical direction to have a gradient on the side of your web page.
• Go Back
• Continue
Try it out!
CSS Font
With CSS you are given great control over the way your text is displayed. You can change the
size, color, style, and more. You probably already knew how to make text bold or underlined, but did
you know you could resize the size of your font using percentages? Let us begin the lesson with an
easy and important font attribute, color!
h5 { color: #9000A1; }
Display:
In the above example we used three different formats for defining a color: a color name,
hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound
sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and
Blue.
Example form: rbg( Red, Green, Blue); with the range of 0-255 for each value.
CSS Code:
h4 { font-family: sans-serif; }
h5 ( font-family: serif; }
h6 { font-family: arial; }
Display:
As you probably noticed throughout Tizag.com, we do not use serif fonts, except for special cases,
like the titles of the Code and Display boxes.
CSS Code:
p { font-size: 120%; }
Display:
CSS Code:
p { font-style: italic; }
Display:
Display:
This is a font with a weight of 100
CSS Code:
p { font-variant: small-caps; }
Display:
• Go Back
• Continue
Try it out!
CSS Text
While CSS Font covers most of the traditional ways to format your text, CSS Text allows you to
control the spacing, decoration, and alignment of your text.
Text Decoration
Have you ever wondered how a website removed the underline that usually accompanies a link's
text? This is done by removing text decoration from the link. To learn how to create these types of
links, please check out our CSS Links tutorial. Besides the utility with links, text-decoration allows you to
add horizontal lines above, below, or through your text.
CSS Code:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
Display:
Text Indent
CSS text-indent is a great way to indent your paragraphs without having to use preformatted
HTML tags or inserting spaces manually. You may define your indendation with exact values or
percentages. We recommend using exact values.
CSS Code:
p { text-indent: 20px; }
h5 { text-indent: 30%; }
Display:
This is a paragraph that uses a text indentation with the value of 20px. This is the
recommended usage of text indentation.
Text Align
The default text-align setting is to the left, like most literature and other forms of media that you
read. However, sometimes you may require a different alignment and it can be specified using the text-
align attribute.
CSS Code:
p { text-align: right; }
h5{ text-align: justify; }
Display:
This paragraph is aligned to the right side of the HTML element. If you ever find a use
for using right justify, please let us know. Just kidding, we don't really want to know.
Text Transform
Text-transform is a quick way to modify the capitalization of your text.
CSS Code:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
Display:
CSS Code:
p { white-space: nowrap; }
Display:
This paragraph will not wrap until I tell it to with a break tag. As you can see, it
makes the page look
quite ugly.
In the above paragraph the page break occurred after "...page look ", which caused the text to
resume on the following line.
Note: We set a CSS overflow property, above, so that the example could be shown more readily.
CSS Code:
p { word-spacing: 10px; }
Display:
CSS Code:
p { letter-spacing: 3px; }
Display:
• Go Back
• Continue
Try it out!
CSS Padding
With CSS Padding you will be able to change the default padding that appears inside various
HTML elements ( paragraphs, tables, etc ). But first, let us make sure we understand the definition of
padding. A padding is the space between an element's border and the content within it.
Please see the example below for a visual representation. Note: The border has been
made visible, for each element, so you may more readily see the effects of padding.
CSS Code:
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
Display:
This is a paragraph that has a padding of 15 pixels on every side: top, right,
bottom, and left.
There are several ways to go about defining the css padding attribute. We will show you every
possible way and let you know which ways are the best.
As you saw in the example above, padding can be uniform inside an element. Specifying one
value will create a uniform padding on all sides: top, right, bottom, left. In addition to using exact
values, you may also define the padding with the use of percentages.
CSS Code:
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
Display:
This is a paragraph that has a padding of 5 pixels on every side: left, top, right,
and bottom.
CSS Code:
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}
Display:
Four padding values can be declared at once by either specifying two or four values. When only
using two values, the first will define the padding on the top and bottom, while the second value will
define the padding on the left and right.
When using the 4 value padding specification, the corresponding directions to values are: top,
right, bottom, left. To help you remember what the order is, just remember that it starts at the top and
then moves clockwise until it reaches the left. The examples below shows partial(2) and complete(4)
padding usage.
CSS Code:
p{
padding: 5px 15px;
border: 1px solid black;
}
h5{
padding: 0px 5px 10px 3px;
border: 1px solid red;
}
Display:
This paragraph has a top and bottom padding of 5 pixels and a right and left
padding of 15 pixels.
• Go Back
• Continue
Try it out!
CSS Margin
CSS Margins are nearly identicle to the CSS Padding attribute except for one important
difference: a margin defines the white space around an HTML element's border, while padding refers
to the white space within the border. Setting the actual value of margin is just the same as with
padding, so you can probably zip right through this lesson.
Please see the example below for a visual representation. Note: A border has been added
to each element so you that you may see the effects of the margin attribute.
CSS Code:
p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
Display:
This is a paragraph that has a margin of 5 pixels on every side: top, right, bottom,
and left.
There are several ways to go about defining the css margin attribute. We will show you every
possible way and let you know which methods are the best.
CSS Code:
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
Display:
This is a paragraph that has a margin of 2% on every side: top, right, bottom,
and left.
This header has a margin of 5 pixels.
CSS Code:
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }
Display:
This paragraph had one margin specified (left), using directional declaration. Note
that there is still a margin below and above this paragraph. This is because our CSS only
replaced one of the four margins, which didn't effect the top and bottom margins.
Four margin values can be declared at once by either specifying two or four values. When only
using two values, the first will define the margin on the top and bottom, while the second value will
define the margin on the left and right.
When using the 4 value margin specification, the corresponding directions to values are: top, right,
bottom, left. To help you remember what the order is, just remember that it starts at the top and then
moves clockwise until it reaches the left. The examples below shows partial(2) and complete(4) margin
usage.
CSS Code:
p {margin: 5px 15px;
border: 1px solid black; }
h5{margin: 0px 5px 10px 3px;
border: 1px solid red;}
Display:
This paragraph has a top and bottom margin of 5 pixels and a right and left
margin of 15 pixels.
• Go Back
• Continue
Try it out!
CSS Border
CSS Border, our personal favorite CSS attribute, allow you to completely customize the border
that appear around HTML elements. With HTML, it used to be impossible to place a border around an
element, except for the table. CSS Borders let you create crisp, customized border styles with very
little work, compared to the antiquated methods of HTML.
There are endless types of border styles at your disposal. We recommend that you experiement
with many color/border-style combinations to get an idea of all the different looks you can create.Note:
We have used CSS Classes below, so check out the CSS Classes lesson if you do not understand.
CSS Code:
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
Display:
This is probably obvious, but the default border-style setting for an element is hidden.
Border Width
To alter the thickness of your border use the border-width attribute. You may use key terms or
exact values to define the border width. Note: You must define a border-style for the border to show
up. Available terms: thin, medium, thick.
CSS Code:
table { border-width: 7px;
border-style: outset; }
td { border-width: medium;
border-style: outset; }
p { border-width: thick;
border-style: solid; }
Display:
This table has an outset border with a width of 7 pixels.
Each cell has an outset border with a "medium" width.
Border Color
Now for the creative aspect of css borders, our favorite, border color. With the use of the border-
color attribute you will be able to create customized borders to fit the flow and layout of your web site.
Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of
each of these types.
CSS Code:
table { border-color: rgb( 100, 100, 255);
border-style: dashed; }
td { border-color: #FFBD32;
border-style: ridge; }
p { border-color: blue;
border-style: solid; }
Display:
This table has a dashed border with the RGB value ( 100, 100, 255).
Each cell has a ridged border with a hexadecimal color of #FFBD32.
Border: border-(direction)
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. The direction choices are of course: top,
right, bottom, and left. CSS allows you to treat a side of a border completely separate from the other
three sides. Each side can have its color, width, and style set, as shown below.
CSS Code:
p { border-bottom-style: dashed ;
border-bottom-color: yellow;
border-bottom-width: 5px; }
h4 { border-top-style: double;
border-top-color: purple;
border-top-width: thick; }
h5 { border-left-style: groove;
border-left-color: green;
border-left-width: 15px;
border-bottom-style: ridge;
border-bottom-color: yellow;
border-bottom-width: 25px; }
Display:
CSS Code:
p { border: 20px outset blue ;}
h4{ border: 5px solid; }
h5{ border: dotted; }
Display:
• Go Back
• Continue
Try it out!
Probably the coolest thing about CSS is the ability to add effects to your anchor tags, otherwise
known as hyperlinks. In HTML, the only way to add this effect would be to use javascript, but with the
addition of CSS, javascript links can be forgotten.
• link - this is a link that has not been used, nor is a mouse pointer hovering over it
• visited - this is a link that has been used before, but has no mouse on it
• hover - this is a link currently has a mouse pointer hovering over it/on it
• active - this is a link that is in the process of being clicked
Using CSS you can make a different look for each one of these states, but at the end of this
lesson we will suggest a good practice for CSS Links.
CSS Pseudo-Classes
The format for CSS Links is a little different than what you've seen. To modify these 4 states you
have to use the following CSS code formatting:
CSS Code:
a:(STATE'S NAME) { attribute: value; }
The state's name is the "pseudo class" that defines how the HTML element should appear,
depending on which state it is in. Below is an example of changing the "link", "visited", and "hover"
state. Note the order that they are defined, as it is the proper ordering to make a functioning CSS link.
CSS Code:
a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }
HTML Code:
<a href="">This is a special CSS Link</a>!
Display:
This is a special CSS Link!
The states must be defined in the correct order. Here is the order, starting with the one you must
define first:
1. link
2. visited
3. hover
4. active
CSS Code:
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }
Display:
This is a link that only has an underline if you hover your mouse over it...
Be careful when removing the underline from your hyperlinkes. Sometimes, the removal of the
underline may cause the hyperlink to be undistinguishable from normal text. There is a very small
chance the common visitor will be able to notice that it is a hyperlink, if this is the case. So if you
choose to remove the underline, be sure you do something to the link to make it stand out.
A Couple Examples
Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.
CSS Code:
a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
Display:
This link is a almost over-the-top
CSS Code:
a:link {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
a:visited {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}
Display:
The Ugly Linkling
• Go Back
• Continue
Try it out!
In this lesson we will show how to change the mouse cursor icon for a few different HTML
elements. Below is a list of the most commonly accepted cursors:
Now let's try these puppies out. Here are a few cursor code examples that should help you
customize your site.
CSS Code:
p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }
Display:
• Go Back
• Continue
Try it out!
CSS Properties
In HTML the tags (i.e. <b>, <body>, <a>, etc) are the meat and potatoes of the HTML language
while in CSS there are many properties (i.e. Font, Text, Box, and Color) that you have probably seen if
you've read through this tutorial.
CSS has grouped all the CSS properties into logical groups to give the massive amount of
properties some order, unlike HTML. This lesson will review these areas and give a brief description of
what they are for. For a quick reference, check out our CSS Properties Reference.
The CSS font properties control all aspects of your text graphical representation. From the
thickness of your font (font-weight) to font type (font-family) of your choice. Here are all the font
properties at your disposal:
• font
• font-family
• font-size
• font-style
• font-weight
• font-variant
The CSS text properties control the spacing, alignment, decoration, and other miscellaneous
aspects of the text. Here is a list of all the CSS text properties. Remember to check out our CSS
Properties Reference for a description and example of all of the properties mentioned in this lesson.
• letter-spacing
• word-spacing
• text-decoration
• vertical-align
• text-transform
• text-align
• text-indent
• line-height
The CSS box properties are used to define the spacing in and around HTML elements, their
borders, and other positioning aspects. Border, Margin, and Padding all have four properties each: top,
right, bottom, and left.
• Margin
• Padding
• Border
• Border-width
• Border-color
• Border-style
• Width
• Height
• Float
• Clear
• Color
The CSS background properties control things like if the background is a single color or maybe an
image. If it's an image you can set the position of the image and tell it whether or not you want the
image to repeat left-to-right and/or top-to-bottom.
• Background
• Background Color
• Background Image
• Background Repeat
• Background Attachment
• Background Position
We think of the classification properties as having the list element and all the leftover elements
that would not fit into any other category. Check out our CSS Properties Reference for a an exmaple of
all the properties mentioned here.
• Display
• Whitespace
• List Style
• List Style Type
• List Style Image
• List Style Position
CSS Position
With the knowledge of CSS Positioning you will be able to manipulate the exact position of your
HTML elements. Designs that previously required the use of javascript or HTML image maps may now
be done entirely in CSS. Not only is it easier to code, but it also loads much quicker!
Position Relative
Relative positioning changes the position of the HTML element relative to where it normally
appears. If we had a header that appears at the top of our page, we could use relative positioning to
move it a bit to the right and down a couple of pixels. Below is an example.
CSS Code:
h3 {
position: relative;
top: 15px;
left: 150px;
}
p{
position: relative;
left: -10px;
}
You probably noticed that you define the four possible directions (left, right, up, and down) using
only two (left and top). Here's a quick reference when moving HTML elements in CSS.
Display:
Before CSS After Positioning
Position Absolute
With absolute positioning you define the exact pixel value where the specified HTML element will
appear. The point of origin is the top-left of the browser's viewable area, so be sure you are measuring
from that point.
Note: Firefox does not currently interpret absolute positioning correctly. However both IE 6.0+ and
Opera 8.0+ do.
CSS Code:
h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}
Display:
Before CSS
After Positioning
• Go Back
• Continue
Try it out!
CSS Layers
After learning how to position HTML elements, you may have noticed how this can lead to HTML
elements being on top of one another. CSS allows you to control which item will appear on top with the
use of layers.
In CSS, each element is given a priority. HTML elements that appear later than others will
have a higher priority by default. Elements with the highest priority will appear on top, followed by the
next highest, and so on.
To manually define a priority set the z-index value. The larger the value, the higher the priority the
element will have.
CSS Code:
h4{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}
p{
position: relative;
z-index: 1;
background-color: #FFCCCC;
}
display:
Header Z-Index = 2
You probably can't read this part, so I will fill it in with useless text for the time being.
This paragraph has a z-index of 1, which is less than the header. As you can see, the
header has been moved down, using positioning, and is now resting on top of this
paragraph. If we had not defined the z-index, by default the paragraph would have been
on top of the header because it appears later in our HTML code.
Other ways to utilize layers might be to place a few images on top of eachother to create a
beautiful collage, have your menu slightly overlap you content pane, or anything your imagination can
come up with. Just remember to keep your web site user-friendly!
• Go Back
• Continue
Try it out!
CSS Float
Floating is often used to push an image to one side or another, while having the text of a
paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what
you might see in many magazines that have articles which wrap around images of various shapes and
sizes.
Float Image
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to
either float the picture to the left or to the right and the rest is done for you. Below is an example of an
image that is moved through all four corner's of a paragraph.
CSS Code:
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
HTML Code:
<body>
<img src="sunset.gif" class="floatLeft">
<p>The images are contained with...</p>
Display:
The images are contained within the paragraph tag. The image has floated to the left,
and also to the right because we have used both types of image floating in this example.
Notice how the text wraps around the images quite nicely. The images are contained
within the paragraph tag. The image has floated to the left, and also to the right because
we have used both types of image floating in this example. Notice how the text wraps
around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted
that a margin should be added to images so that the text does not get too close to the
image. There should always be a few pixels between words and borders, images, and
other content. This second paragraph has an image that is floated to the right. It should
be noted that a margin should be added to images so that the text does not get too close
to the image. There should always be a few pixels between words and borders, images,
and other content.
CSS Code:
img.floatRightClear {
float: right;
clear: right;
margin: 4px;
}
HTML Code:
<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset.gif" class="floatRightClear">
<p>The images are appearing...</p>
<p>If we had specified...</p>
<p>The number of paragraphs...</p>
</body>
Display:
The images are appearing below one another because the css clear attribute was
used with the value of "right". This forces all right floating items to appear below any
previous right floating items.
If we had specified clear:left in our CSS code, then there would be no effect on the
images, and they would appear in their default pattern, next to eachother, all on one line.
The number of paragraphs, and the size of the paragraphs, will not effect how these
images will appear.
CSS Classes vs ID
There is often confusion when it is appropriate to use CSS IDs and when CSS Classes should be
used instead. This lesson is geared to display an answer as well as provide more information about
CSS IDs
What is an ID Selector?
The W3C defines class ID as "a unique identifier to an element". But what does that actually
mean? Hopefully you have already read our CSS Classes lesson before continuing, if not, we
recommend doing so.
CSS IDs are similar to classes in that they define a special case for an element. In other words,
they assign an identifier. Below is an example of a CSS ID.
CSS Code:
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
HTML Code:
<p id="ExampleID1">This paragraph has an ID name of
"exampleID1" and has a white CSS defined background</p>
Display:
This paragraph has an ID name of "exampleID1" and has a white CSS defined
background.
THIS PARAGRAPH HAS AN ID NAME OF "EXAMPLEID2" AND HAS HAD ITS TEXT
TRANSFORMED TO UPPERCASE LETTERS.
Notice that an ID's CSS is an HTML element, followed by a "#", and finally ID's name -
"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!
In Tizag.com CSS Layout Examples we have used used IDs for the unique items mentioned above.
View the CSS Code for our first layout example. Below are the unique IDs in our code.
• Menu - div#menuPane
• Content - div#content
• Go Back
• Continue
Try it out!
CSS Display
One of the most difficult aspects of creating a page without the use of tables is learning how to
control the line breaks. Up to this point we haven't taught you how to use CSS to simulate a <br />
after the use of an element. Additionaly, we have not shown how to remove line breaks that
automatically occur with some elements (headers, list elements, paragraphs, etc).
All these issues and more are addressed with the display property. In this lesson you will
find a brief overview and example for the most commonly used CSS Display values.
Display Block and Inline
As you have seen in our CSS Examples, we were able to create many looks for our menus. A few
of the examples have no line breaks in the HTML, but we made each anchor tag have a break on
specific examples. These line breaks are created with the block value.
CSS Code:
a { display: block; }
p { display: inline; }
HTML Code:
<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web
</a>
...
<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web
</a>
<br />
<p>These paragraph </p>
<p>elements</p>
<p>have been </p>
<p>inlined.</p>
Display:
Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip
the Web Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web
These paragraph
elements
have been
inlined.
At times you may want to hide pieces of content, while at other times you would wish to show it.
With the use of javascript, you can create collapseable menus. This topic is beyond the scope of this
lesson, but feel free to check out O'Reilly's - Hierarchical Menus. Below is a simple example of how to
hide an element.
CSS Code:
p.show { display: block }
p.hide { display: none; }
HTML Code:
<p class="show">This paragraph is displayed correctly because
it has a display value of "block".</p>
Display:
If you think I just didn't write the HTML for the second paragraph, check the source for this website
and check for yourself!
Using display correctly is key to CSS heavy web site designs. Play around in the HTML sandbox
below and see what you come up with.
• Go Back
• Tutorial
Finished
Try it out!