CSS Tutorial
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were
added to HTML 4.0 to
solve a problem
- External Style
Sheets can save a lot
of work
- External Style
Sheets are stored in CSS
files
CSS Syntax
A CSS rule has two main parts: a selector, and one or more
declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each
property has a value.
CSS Example
A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets:
p
{color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each
line, like this
CSS Comments
Comments are used to explain your code, and may help you when you
edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with
"*/", like this:
CSS Id and Class
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you
to specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with
id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello
World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
The class Selector
The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most often used on
several elements.
This allows you to set a particular style for many HTML elements
with the same class.
The class selector uses the HTML class attribute, and is defined
with a "."
In the example below, all HTML elements with
class="center" will be center-aligned:
CSS How
To...
When
a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External style
sheet
- Internal style
sheet
- Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of an entire Web
site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The
file should not contain any html tags. Your style sheet should be saved with a
.css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the property value and the unit (such
as margin-left:20 px). The correct way is: margin-left:20px
Internal Style Sheet
An internal style sheet should be used when a single document has
a unique style. You define internal styles in the head section of an HTML page,
by using the <style> tag, like this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS property. The example shows how to
change the color and the left margin of a paragraph:
<p
style="color:sienna;margin-left:20px">This is a
paragraph.</p>
Multiple Style Sheets
If some properties have been set for the same selector in
different style sheets, the values will be inherited from the more specific
style sheet.
For example, an external style sheet has these properties for the
h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3
selector:
h3
{
text-align:right;
font-size:20pt;
}
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the
external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the
text-alignment and the font-size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
- inside an HTML
element
- inside the head
section of an HTML page
- in an external
CSS file
Tip: Even
multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style
specified for an HTML element?
Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the following
rules, where number four has the highest priority:
1.
Browser default
2.
External style sheet
3.
Internal style sheet (in the head section)
4.
Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest
priority, which means that it will override a style defined inside the
<head> tag, or in an external style sheet, or in a browser (a default
value).
CSS Background
CSS background properties
are used to define the background effects of an element.
CSS properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
The background-color property specifies the background color of an
element.
The background color of a page is defined in the body selector:
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
body {background-image:url('paper.gif');}
Background Image - Repeat Horizontally or
Vertically
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
body
{
background-image:url('gradient2.png');
}
If the image is repeated only horizontally
(repeat-x), the background will look better:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no-repeat
When using a background image, use an image that does not disturb
the text.
Showing the image only once is specified by the background-repeat
property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the example above, the background image is shown in the same
place as the text. We want to change the position of the image, so that it does
not disturb the text too much.
The position of the image is specified by the background-position
property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a HEX value -
like "#ff0000"
- an RGB value -
like "rgb(255,0,0)"
- a color name -
like "red"
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
The text-align property is used to set the horizontal alignment of
a text.
Text can be centered, or aligned to the left or right, or
justified.
When text-align is set to "justify", each line is
stretched so that every line has equal width, and the left and right margins
are straight (like in magazines and newspapers).
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations
from text.
The text-decoration property is mostly used to remove underlines
from links for design purposes:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Use a Combination of Percent and Em
The solution that works in all browsers, is to
set a default font-size in percent for the <body> element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
CSS Links
Links
can be styled in different ways.
Styling Links
Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
In addition, links 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
*/
CSS 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
List
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.
Different List Item Markers
The type of list item marker is specified with the list-style-type
property:
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
…………………………………………………..
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
CSS Box
Model
The CSS Box Model
All HTML elements can be considered as boxes. 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.
The image below illustrates the box model:
Explanation of the different parts:
- 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
In order to set the width and height of an element correctly in
all browsers, you need to know how the box model works.
Width and Height of an Element
Important: 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;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
Assume that you had only 250px of space. Let's make an element
with a total width of 250px:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="w3css.gif"
width="250" height="250" />
<div class="ex">The picture
above is 250px wide.
The total width of this element is also
250px.</div>
</body>
</html>
…………………………
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
CSS Border
CSS Border
CSS Border Properties
The CSS border properties allow you to specify the style and color
of an element's border.
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:
none: Defines no border
dotted: Defines a dotted
border
dashed: Defines a dashed
border
solid: Defines a solid
border
double: Defines two
borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D
grooved border. The effect depends on the border-color value
ridge: Defines a 3D
ridged border. The effect depends on the border-color value
inset: Defines a 3D inset
border. The effect depends on the border-color value
outset: Defines a 3D
outset border. The effect depends on the border-color value
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;
}
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
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;
}
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
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;
}
{
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;
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.
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
individual border properties in one property. This is called a shorthand
property.
The border property is a shorthand for the following individual
border properties:
- border-width
- border-style
(required)
- border-color
Example
border:5px solid red;
CSS Outlines
An
outline is a line that is drawn around elements (outside the borders) to make
the element "stand out".
The
outline properties specify the style, color, and width of an outline.
CSS Outline
An outline is a line that is drawn around elements (outside the
borders) to make the element "stand out".
However, the outline property is different from the border
property.
The outline is not a part of an element's dimensions; the element's
total width and height is not affected by the width of the outline.
CSS Margin
The
CSS margin properties define the space around elements.
Margin
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.
Possible Values
|
Value
|
Description
|
|
auto
|
The browser calculates a
margin
|
|
length
|
Specifies a margin in px, pt,
cm, etc. Default value is 0px
|
|
%
|
Specifies a margin in percent
of the width of the containing element
|
|
inherit
|
Specifies that the margin
should be inherited from the parent element
|
It is possible to use negative values, to overlap content.
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-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;
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
CSS Padding
The
CSS padding properties define the space between the element border and the
element content.
Padding
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.
Possible Values
|
Value
|
Description
|
|
length
|
Defines a fixed padding (in
pixels, pt, em, etc.)
|
|
%
|
Defines a padding in % of the
containing element
|
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;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
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;
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
CSS Grouping and Nesting Selectors
Grouping Selectors
In style sheets there are often elements with the same style.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the code
above:
h1,h2,p
{
color:green;
}
{
color:green;
}
Nesting Selectors
It is possible to apply a style for a selector within a selector.
In the example below, one style is specified for all p elements,
one style is specified for all elements with class="marked", and a
third style is specified only for p elements within elements with
class="marked":
Example
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
Positioning
The CSS positioning properties allow you to position an element.
It can also place an element behind another, and specify what should happen
when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the positioning
method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static
positioned element is always positioned according to the normal flow of the
page.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the
browser window.
It will not move even if the window is scrolled:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
{
position:fixed;
top:30px;
right:5px;
}
Relative Positioning
A relative positioned element is positioned relative to its normal
position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and
overlap other elements, but the reserved space for the element is still
preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks
for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such element is
found, the containing block is <html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow.
The document and other elements behave like the absolutely positioned element
does not exist.
Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they can
overlap other elements.
The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS Horizontal
Align
Aligning Block Elements
A block element is an element that takes up the full width
available, and has a line break before and after it.
Examples of block elements:
- <h1>
- <p>
- <div>
In this chapter we will show you how to horizontally align block
elements for layout purposes.
Center Aligning Using the margin Property
Block elements can be aligned by setting the left and right
margins to "auto".
Note: Using
margin:auto will not work in IE8 and earlier, unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they
should split the available margin equally. The result is a centered element:
Example
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Tip: Aligning
has no effect if the width is 100%.
Note: In IE5
there is a margin handling bug for block elements. To make the example above
work in IE5, add some extra code. Try it yourself
Left and Right Aligning Using the position
Property
One method of aligning elements is to use absolute positioning:
Example
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Note: Absolute
positioned elements are removed from the normal flow, and can overlap elements.
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This is to avoid
visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position
property. If a container element (in our case <div class="container">)
has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier
versions will add a 17px margin on the right side. This seems to be space
reserved for a scrollbar. Always set the !DOCTYPE declaration when using the
position property:
Example
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Left and Right Aligning Using the float
Property
One method of aligning elements is to use the float property:
Example
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This is to avoid
visual differences in different browsers.
There is a problem with IE8 and earlier when using the float
property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will
add a 17px margin on the right side. This seems to be space reserved for a
scrollbar. Always set the !DOCTYPE declaration when using the float property:
Example
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#CSS Tutorial
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#CSS Tutorial
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were
added to HTML 4.0 to
solve a problem
- External Style
Sheets can save a lot
of work
- External Style
Sheets are stored in CSS
files
CSS Syntax
A CSS rule has two main parts: a selector, and one or more
declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each
property has a value.
CSS Example
A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets:
p
{color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each
line, like this
CSS Comments
Comments are used to explain your code, and may help you when you
edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with
"*/", like this:
CSS Id and Class
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you
to specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with
id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello
World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
The class Selector
The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most often used on
several elements.
This allows you to set a particular style for many HTML elements
with the same class.
The class selector uses the HTML class attribute, and is defined
with a "."
In the example below, all HTML elements with
class="center" will be center-aligned:
CSS How
To...
When
a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External style
sheet
- Internal style
sheet
- Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of an entire Web
site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The
file should not contain any html tags. Your style sheet should be saved with a
.css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the property value and the unit (such
as margin-left:20 px). The correct way is: margin-left:20px
Internal Style Sheet
An internal style sheet should be used when a single document has
a unique style. You define internal styles in the head section of an HTML page,
by using the <style> tag, like this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS property. The example shows how to
change the color and the left margin of a paragraph:
<p
style="color:sienna;margin-left:20px">This is a
paragraph.</p>
Multiple Style Sheets
If some properties have been set for the same selector in
different style sheets, the values will be inherited from the more specific
style sheet.
For example, an external style sheet has these properties for the
h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3
selector:
h3
{
text-align:right;
font-size:20pt;
}
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the
external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the
text-alignment and the font-size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
- inside an HTML
element
- inside the head
section of an HTML page
- in an external
CSS file
Tip: Even
multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style
specified for an HTML element?
Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the following
rules, where number four has the highest priority:
1.
Browser default
2.
External style sheet
3.
Internal style sheet (in the head section)
4.
Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest
priority, which means that it will override a style defined inside the
<head> tag, or in an external style sheet, or in a browser (a default
value).
CSS Background
CSS background properties
are used to define the background effects of an element.
CSS properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
The background-color property specifies the background color of an
element.
The background color of a page is defined in the body selector:
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
body {background-image:url('paper.gif');}
Background Image - Repeat Horizontally or
Vertically
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
body
{
background-image:url('gradient2.png');
}
If the image is repeated only horizontally
(repeat-x), the background will look better:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no-repeat
When using a background image, use an image that does not disturb
the text.
Showing the image only once is specified by the background-repeat
property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the example above, the background image is shown in the same
place as the text. We want to change the position of the image, so that it does
not disturb the text too much.
The position of the image is specified by the background-position
property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a HEX value -
like "#ff0000"
- an RGB value -
like "rgb(255,0,0)"
- a color name -
like "red"
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
The text-align property is used to set the horizontal alignment of
a text.
Text can be centered, or aligned to the left or right, or
justified.
When text-align is set to "justify", each line is
stretched so that every line has equal width, and the left and right margins
are straight (like in magazines and newspapers).
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations
from text.
The text-decoration property is mostly used to remove underlines
from links for design purposes:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Use a Combination of Percent and Em
The solution that works in all browsers, is to
set a default font-size in percent for the <body> element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
CSS Links
Links
can be styled in different ways.
Styling Links
Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
In addition, links 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
*/
CSS 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
List
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.
Different List Item Markers
The type of list item marker is specified with the list-style-type
property:
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
…………………………………………………..
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
CSS Box
Model
The CSS Box Model
All HTML elements can be considered as boxes. 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.
The image below illustrates the box model:
Explanation of the different parts:
- 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
In order to set the width and height of an element correctly in
all browsers, you need to know how the box model works.
Width and Height of an Element
Important: 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;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
Assume that you had only 250px of space. Let's make an element
with a total width of 250px:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="w3css.gif"
width="250" height="250" />
<div class="ex">The picture
above is 250px wide.
The total width of this element is also
250px.</div>
</body>
</html>
…………………………
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
CSS Border
CSS Border
CSS Border Properties
The CSS border properties allow you to specify the style and color
of an element's border.
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:
none: Defines no border
dotted: Defines a dotted
border
dashed: Defines a dashed
border
solid: Defines a solid
border
double: Defines two
borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D
grooved border. The effect depends on the border-color value
ridge: Defines a 3D
ridged border. The effect depends on the border-color value
inset: Defines a 3D inset
border. The effect depends on the border-color value
outset: Defines a 3D
outset border. The effect depends on the border-color value
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;
}
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
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;
}
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
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;
}
{
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;
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.
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
individual border properties in one property. This is called a shorthand
property.
The border property is a shorthand for the following individual
border properties:
- border-width
- border-style
(required)
- border-color
Example
border:5px solid red;
CSS Outlines
An
outline is a line that is drawn around elements (outside the borders) to make
the element "stand out".
The
outline properties specify the style, color, and width of an outline.
CSS Outline
An outline is a line that is drawn around elements (outside the
borders) to make the element "stand out".
However, the outline property is different from the border
property.
The outline is not a part of an element's dimensions; the element's
total width and height is not affected by the width of the outline.
CSS Margin
The
CSS margin properties define the space around elements.
Margin
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.
Possible Values
|
Value
|
Description
|
|
auto
|
The browser calculates a
margin
|
|
length
|
Specifies a margin in px, pt,
cm, etc. Default value is 0px
|
|
%
|
Specifies a margin in percent
of the width of the containing element
|
|
inherit
|
Specifies that the margin
should be inherited from the parent element
|
It is possible to use negative values, to overlap content.
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-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;
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
CSS Padding
The
CSS padding properties define the space between the element border and the
element content.
Padding
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.
Possible Values
|
Value
|
Description
|
|
length
|
Defines a fixed padding (in
pixels, pt, em, etc.)
|
|
%
|
Defines a padding in % of the
containing element
|
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;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
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;
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
CSS Grouping and Nesting Selectors
Grouping Selectors
In style sheets there are often elements with the same style.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the code
above:
h1,h2,p
{
color:green;
}
{
color:green;
}
Nesting Selectors
It is possible to apply a style for a selector within a selector.
In the example below, one style is specified for all p elements,
one style is specified for all elements with class="marked", and a
third style is specified only for p elements within elements with
class="marked":
Example
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
Positioning
The CSS positioning properties allow you to position an element.
It can also place an element behind another, and specify what should happen
when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the positioning
method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static
positioned element is always positioned according to the normal flow of the
page.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the
browser window.
It will not move even if the window is scrolled:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
{
position:fixed;
top:30px;
right:5px;
}
Relative Positioning
A relative positioned element is positioned relative to its normal
position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and
overlap other elements, but the reserved space for the element is still
preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks
for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such element is
found, the containing block is <html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow.
The document and other elements behave like the absolutely positioned element
does not exist.
Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they can
overlap other elements.
The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS Horizontal
Align
Aligning Block Elements
A block element is an element that takes up the full width
available, and has a line break before and after it.
Examples of block elements:
- <h1>
- <p>
- <div>
In this chapter we will show you how to horizontally align block
elements for layout purposes.
Center Aligning Using the margin Property
Block elements can be aligned by setting the left and right
margins to "auto".
Note: Using
margin:auto will not work in IE8 and earlier, unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they
should split the available margin equally. The result is a centered element:
Example
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Tip: Aligning
has no effect if the width is 100%.
Note: In IE5
there is a margin handling bug for block elements. To make the example above
work in IE5, add some extra code. Try it yourself
Left and Right Aligning Using the position
Property
One method of aligning elements is to use absolute positioning:
Example
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Note: Absolute
positioned elements are removed from the normal flow, and can overlap elements.
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This is to avoid
visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position
property. If a container element (in our case <div class="container">)
has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier
versions will add a 17px margin on the right side. This seems to be space
reserved for a scrollbar. Always set the !DOCTYPE declaration when using the
position property:
Example
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Left and Right Aligning Using the float
Property
One method of aligning elements is to use the float property:
Example
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This is to avoid
visual differences in different browsers.
There is a problem with IE8 and earlier when using the float
property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will
add a 17px margin on the right side. This seems to be space reserved for a
scrollbar. Always set the !DOCTYPE declaration when using the float property:
Example
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
;
}
}
No comments:
Post a Comment