CSS - Intermediate
LESSON 5
LOGO
CONTENT
9.1 Styling Links
9.2 Styling Lists
9.3 Styling Tables
9.4 CSS Box Model
2
9.1 Styling Links
Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
Special for links are that they can be styled differently
depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some
order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
3
9.1 Styling Links
Text Decoration
The text-decoration property is mostly used to remove underlines
from links:
Example:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The background-color property specifies the background color for
links:
Example:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
4
9.1 Styling Links
Example 1 – Adding different styles to hyperlinks:
<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
5
9.1 Styling Links
Example 1 – Adding different styles to hyperlinks:
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link
changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link
changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link
changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link
changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link
changes text-decoration</a></b></p>
</body>
</html>
6
9.1 Styling Links
Example 1 - Result:
7
9.2 Styling Lists
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the
list item marker.
The type of list item marker is specified with the list-style-type
property:
Example:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
8
9.2 Styling Lists
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image
property:
Example:
ul
{
list-style-image: url('sqpurple.gif');
}
The example above does not display equally in all browsers. IE and
Opera will display the image-marker a little bit higher than Firefox,
Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers,
you should use a crossbrowser solution which is explained below.
9
9.2 Styling Lists
Crossbrowser Solution
The following example displays the image-marker equally in all
browsers:
For ul:
Example: Set the list-style-type to none to
ul remove the list item marker
{
list-style-type: none;
Set both padding and margin to
padding: 0px; 0px (for cross-browser
margin: 0px; compatibility)
}
li For li:
{
background-image:
Set the URL of the image, and
url(sqpurple.gif); show it only once (no-repeat)
background-repeat: no-repeat; Position the image where you
background-position: 0px 5px;
padding-left: 14px; want it (left 0px and down 5px)
} Position the text in the list with
padding-left
10
9.2 Styling Lists
List - Shorthand property
It is also possible to specify all the list properties in one, single
property. This is called a shorthand property.
The shorthand property used for lists, is the list-style property:
Example:
ul
{
list-style: square url("sqpurple.gif");
}
When using the shorthand property, the order of the values are:
list-style-type
list-style-position (for a description, see the CSS properties table below)
list-style-image
It does not matter if one of the values above are missing, as long as
the rest are in the specified order.
11
9.2 Styling Lists
All CSS List Properties
Property Description
list-style Sets all the properties for a list in one
declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should
appear inside or outside the content flow
list-style-type Specifies the type of list-item marker
12
9.3 Styling Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td
elements:
Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This
is because both the table and the th/td elements have separate
borders.
To display a single border for the table, use the border-collapse
property.
13
9.3 Styling Tables
Collapse Borders
The border-collapse property sets whether the table borders are
collapsed into a single border or separated:
Example:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
14
9.3 Styling Tables
Table Width and Height
Width and height of a table is defined by the width and height
properties.
The example below sets the width of the table to 100%, and the
height of the th elements to 50px:
Example:
table
{
width:100%;
}
th
{
height:50px;
}
15
9.3 Styling Tables
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align
properties.
The text-align property sets the horizontal alignment, like left, right,
or center:
Example
td
{
text-align:right; }
The vertical-align property sets the vertical alignment, like top,
bottom, or middle:
Example
td
{
height:50px;
16 vertical-align:bottom; }
9.3 Styling Tables
Table Padding
To control the space between the border and content in a table, use
the padding property on td and th elements:
Example:
td { padding:15px;}
Table Color
The example below specifies the color of the borders, and the text
and background color of th elements:
Example:
table, td, th { border:1px solid green;}
th { background-color:green;color:white;}
17
9.4 CSS Box Model
The CSS Box Model
In CSS, the term "box model" is used when talking about design
and layout.
The CSS box model is essentially a box that wraps around HTML
elements, and it consists of:
margins,
borders,
padding,
and the actual content.
The box model allows us to place a border around elements and
space elements in relation to other elements.
18
9.4 CSS Box Model
The CSS Box Model
The image below illustrates the box model:
Margin - Clears an area
around the border. The
margin does not have a
background color, it is
completely transparent.
Border - A border that
goes around the padding
and content. The border is
affected by the background
color of the box.
Padding - Clears an area around the content. The padding is affected by the
background color of the box.
Content - The content of the box, where text and images appear.
19
9.4 CSS Box Model
Width and Height of an Element
When you set the width and height properties of an element with
CSS, you just set the width and height of the content area.
To calculate the full size of an element, you must also add
the padding, borders and margins.
The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
20
9.4 CSS Box Model
Width and Height of an Element
Assume that you had only 250px of space. Let's make an element
with a total width of 250px:
Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding +
left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom
padding + top border + bottom border + top margin + bottom
margin
21
9.4 CSS Box Model
CSS Border Properties
The CSS border properties allow you to specify the style and
color of an element's border.
22
9.4 CSS Box Model
CSS Border - Style
The border-style property specifies what kind of border to display.
None of the border properties will have ANY effect unless
the border-style property is set!
border-style values:
23
9.4 CSS Box Model
CSS Border - Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined
values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone.
Use the "border-style" property to set the borders first.
Example:
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
24
}
9.4 CSS Box Model
CSS Border - Color
The border-color property is used to set the color of the border.
The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone.
Use the "border-style" property to set the borders first.
Example:
p.one { border-style:solid;
border-color:red;}
p.two { border-style:solid;
border-color:#98bf21;}
25
9.4 CSS Box Model
CSS Border - Individual sides
In CSS it is possible to specify different borders for different sides:
Example:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
The example above can also be set with a single property:
Example
border-style:dotted solid;
26
9.4 CSS Box Model
The border-style property can have from one to four values.
border-style:dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style:dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
border-style:dotted solid;
top and bottom borders are dotted
right and left borders are solid
border-style:dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also
works with border-width and border-color.
27
9.4 CSS Box Model
CSS Border - Shorthand property
As you can see from the examples above, there are many
properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the border
properties in one property. This is called a shorthand property.
The shorthand property for the border properties is "border":
Example
border:5px solid red;
When using the border property, the order of the values are:
border-width
border-style
border-color
It does not matter if one of the values above are missing (although,
border-style is required), as long as the rest are in the specified order.
28
9.4 CSS Box Model
CSS – Outlines
An outline is a line that is drawn around elements, outside the
border edge, to make the element "stand out".
The outline properties specifies the style, color, and width of an
outline.
Outline property is different from the border property.
The outline is not a part of the element's dimensions, therefore
the element's width and height properties do not contain the width
of the outline.
29
9.4 CSS Box Model
All CSS Outline Properties
Property Description Values
outline Sets all the outline properties outline-color, outline-style
in one declaration outline-width
outline-color Sets the color of an outline color_name, hex_number,
rgb_number, invert
outline-style Sets the style of an outline None, dotted, dashed, solid,
double, groove, ridge, inset,
outset, inherit
outline-width Sets the width of an outline Thin, medium, thick, length,
inherit
30
9.4 CSS Box Model
CSS Margin:
The CSS margin properties define the space around elements.
The margin clears an area around an element (outside the border).
The margin does not have a background color, and is completely
transparent.
The top, right, bottom, and left margin can be changed
independently using separate properties.
A shorthand margin property can also be used, to change all margins
at once.
It is possible to use negative values, to overlap content.
Possible Values
Value Description
auto The browser sets the margin.
The result of this is dependant of the browser
length Defines a fixed margin (in pixels, pt, em, etc.)
% Defines a margin in % of the containing element
31
9.4 CSS Box Model
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:
Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - Shorthand property
To shorten the code, it is possible to specify all the margin
properties in one property. This is called a shorthand property.
The shorthand property for all the margin properties is "margin":
Example
margin:100px 50px;
32
9.4 CSS Box Model
The margin property can have from one to four values;
margin:25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin:25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin:25px;
all four margins are 25px
33
9.4 CSS Box Model
All CSS Margin Properties
Property Description
margin A shorthand property for setting the
margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
34
9.4 CSS Box Model
CSS Padding
The CSS padding properties define the space between the element
border and the element content.
The padding clears an area around the content (inside the border)
of an element.
The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed
independently using separate properties.
A shorthand padding property can also be used, to change all
paddings at once.
Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element
35
9.4 CSS Box Model
CSS Padding - Individual sides
In CSS, it is possible to specify different padding for different sides:
Example
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
CSS Padding - Shorthand property
To shorten the code, it is possible to specify all the padding
properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is "padding":
Example
padding:25px 50px;
36
9.4 CSS Box Model
The padding property can have from one to four values.
padding:25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding:25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding:25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
padding:25px;
all four paddings are 25px
37
9.4 CSS Box Model
All CSS Padding Properties
Property Description
padding A shorthand property for setting all the
padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
38
LOGO
