CSS Tutorial

CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS describes how elements must be rendered on screen, on paper, or in other media.

This tutorial will teach you CSS from basic to advanced

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p {

font-family: "Times New Roman";

font-size: 20px;

}

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

CSS Syntax and Selectors

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

Example

p {
text-align: center;
color: red;
}

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example

#para1 {
text-align: center;
color: red;
}

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

.center {
text-align: center;
color: red;
}

Grouping Selectors

If you have elements with the same style definitions, like this:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example

h1, h2, p {
text-align: center;
color: red;
}

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

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Example

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

CSS Colors

Colors are displayed combining RED, GREEN, and BLUE light.

Colors in CSS are most often specified by:

a valid color name - like "red"
an RGB value - like "rgb(255, 0, 0)"
a HEX value - like "#ff0000"

Color Names

Colors set by using color names:

<!DOCTYPE html>

<html>

<body>

<h2>Color Names Examples</h2>

<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>

Red background-color

</h2>

Green background-color

</h2>

Blue background-color and white text color

</h2>

Orange background-color

</h2>

Yellow background-color

</h2>

Cyan background-color

</h2>

Black background-color and white text color

</h2>

</body>

</html>

RGB (Red, Green, Blue) Examples

<!DOCTYPE html>

<html>

<body>

<h2>RGB Color Examples</h2>

Background-color set by using rgb(255, 0, 0)

</h2>

Background-color set by using rgb(0, 255, 0)

</h2>

Background-color set by using rgb(0, 0, 255)

</h2>

Background-color set by using rgb(255, 165, 0)

</h2>

Background-color set by using rgb(255, 255, 0)

</h2>

Background-color set by using rgb(0, 255, 255)

</h2>

</body>

</html>

Hexadecimal Colors

RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00). Note: HEX values are case-insensitive: "#ff0000" is the same as "FF0000".

<!DOCTYPE html>

<html>

<body>

<h2>HEX Color Examples</h2>

Background-color set by using #FF0000

</h2>

Background-color set by using #00FF00

</h2>

Background-color set by using #0000FF

</h2>

Background-color set by using #FFA500

</h2>

Background-color set by using #FFFF00

</h2>

Background-color set by using #00FFFF

</h2>

</body>

</html>

CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

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 set like this:

Example

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

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:

Example

body {
background-image: url("paper.gif");
}

Below is an example of a bad combination of text and background image. The text is hardly readable:

Example

body {
background-image: url("bgdesert.jpg");
}

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:

Example

body {
background-image: url("gradient_bg.png");
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Background Image - Set position and no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

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;
}

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's border.

This element has a groove border that is 15px wide and green.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
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
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Example

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

CSS Margins

CSS Margin Properties

The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space OUTSIDE the border.

This element has a margin of 80px.

CSS Margins

The CSS margin properties set the size of the white space OUTSIDE the border.

Note: The margins are completely transparent - and cannot have a background color!

With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left

All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element

Note: It is also possible to use negative values for margins; to overlap content.

The following example sets different margins for all four sides of a <p> element:

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;

Example

<!DOCTYPE html>

<html>

<head>

<style>

div.container {

border: 1px solid red;

margin-left: 100px;

}

p.one {

margin-left: inherit;

}

</style>

</head>

<body>

<h2>Use of the inherit Value</h2>

<p>Let the left margin be inherited from the parent element:</p>

<p class="one">This is a paragraph with an inherited left margin (from the div element).</p>

</div>

</body>

</html>

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

If the margin property has three values:

margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

If the margin property has two values:

margin: 25px 50px;

top and bottom margins are 25px
right and left margins are 50px

If the margin property has one value:

margin: 25px;

all four margins are 25px

Use of The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:300px;

margin: auto;

border: 1px solid red;

}

</style>

</head>

<body>

<h2>Use of the auto Value</h2>

<p>You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>

This div will be centered because it has margin: auto;

</div>

</body>

</html>

CSS Padding

CSS Padding Properties

The CSS padding properties are used to generate space around content.

The padding properties set the size of the white space between the element content and the element border.

This element has a padding of 50px.

CSS Padding

The CSS padding properties define the white space between the element content and the element border.

The padding clears an area around the content (inside the border) of an element.

Note: The padding is affected by the background color of the element!

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a <p> element:

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

}

CSS Height and Width Dimensions

CSS Dimension Properties

The CSS dimension properties allow you to control the height and width of an element.

This element has a width of 100%.

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

This <div> element has a height of 100 pixels and a width of 500 pixels.

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!

The following example shows a <div> element with a height of 100 pixels and a width of 500 pixels:

Example

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

This <div> element has a height of 100 pixels and a max-width of 500 pixels.

Note: The value of the max-width property overrides width.

The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:

Example

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

CSS Text

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it yourself" link.

Text Color

The color property is used to set the color of the text.

With CSS, a color is most often specified by:

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Example

body {
color: blue;
}

h1 {
color: green;
}

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The value text-decoration: none; is often used to remove underlines from links:

Example

a {
text-decoration: none;
}

The other text-decoration values are used to decorate text:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

CSS Fonts

Difference Between Serif and Sans-serif Fonts

CSS Font Families

In CSS, there are two types of font family names:

generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts have small lines at the ends on some characters
Sans-serif	Arial Verdana	"Sans" means without - these fonts do not have the lines at the ends of characters
Monospace	Courier New Lucida Console	All monospace characters have the same width

Font Family

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example

p {
font-family: "Times New Roman", Times, serif;
}

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

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:

Example

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-

Font Weight

The font-weight property specifies the weight of a font:

Example

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Example

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

CSS Links

With CSS, links can be styled in different ways.

Text Link Text Link Link Button Link Button

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example

a {
color: hotpink;
}

<!DOCTYPE html>

<html>

<head>

<style>

a {

color: hotpink;

}

</style>

</head>

<body>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

}

/* visited link */

a:visited {

color: green;

}

/* mouse over link */

a:hover {

color: hotpink;

}

/* selected link */

a:active {

color: blue;

}

</style>

</head>

<body>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>

</html>

CSS Lists

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

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
Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

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;
}

CSS Tables

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h2>Add a border to a table:</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

Table Width and Height

Width and height of a table are 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid black;

}

table {

border-collapse: collapse;

width: 100%;

}

th {

height: 50px;

}

</style>

</head>

<body>

<h2>The width and height Properties</h2>

<p>Set the width of the table, and the height of the table header row:</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

}

th, td {

padding: 8px;

text-align: left;

border-bottom: 1px solid #ddd;

}

tr:hover{background-color:#f5f5f5}

</style>

</head>

<body>

<h2>Hoverable Table</h2>

<p>Move the mouse over the table rows to see the effect.</p>

<table>

<tr>

<th>First Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

}

th, td {

text-align: left;

padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

</style>

</head>

<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>

<tr>

<th>First Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

}

th, td {

text-align: left;

padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

</style>

</head>

<body>

<h2>Responsive Table</h2>

<p>A responsive table will display a horizontal scroll bar if the screen is too

small to display the full content. Resize the browser window to see the effect:</p>

<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<table>

<tr>

<th>First Name</th>

<th>Points</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Johnson</td>

</tr>

</table>

</div>

</body>

</html>

CSS Layout - float and clear

The float property specifies whether or not an element should float.

The clear property is used to control the behavior of floating elements.

The float Property

In its simplest use, the float property can be used to wrap text around images.

The following example specifies that an image should float to the right in a text:

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

margin: 0 0 10px 10px;

}

</style>

</head>

<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>

</html>

The clear Property

The clear property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use the clear property.

The clear property specifies on which sides of an element floating elements are not allowed to float:

Example

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div2 {

border: 1px solid red;

}

.div3 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div4 {

border: 1px solid red;

clear: left;

}

</style>

</head>

<body>

<h2>Without clear</h2>

<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>

<h2>Using clear</h2>

<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>

</html>

The clearfix Hack - overflow: auto;

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid #73AD21;

}

.img1 {

float: right;

}

.clearfix {

overflow: auto;

}

.img2 {

float: right;

}

</style>

</head>

<body>

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>

</html>

Web Layout Example

It is common to do entire web layouts using the float property:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid blue;

}

.clearfix {

overflow: auto;

}

nav {

float: left;

width: 200px;

border: 3px solid #73AD21;

}

section {

margin-left: 206px;

border: 3px solid red;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a target="_blank" href="/js/default.asp">JavaScript</a></li>

</ul>

</nav>

<span>section</span>

<p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>

</section>

<span>section</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>

</section>

</div>

</body>

</html>

CSS Navigation Bar

Navigation Bars

Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

Now let's remove the bullets and the margins and padding from the list:

Example

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code above:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li a {

display: block;

width: 60px;

background-color: #dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>A background color is added to the links to show the link area.</p>

<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

}

li a {

display: block;

color: #000;

padding: 8px 0 8px 16px;

text-decoration: none;

}

/* Change the link color on hover */

li a:hover {

background-color: #555;

color: white;

}

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

}

li a {

display: block;

color: #000;

padding: 8px 0 8px 16px;

text-decoration: none;

}

li a.active {

background-color: #4CAF50;

color: white;

}

li a:hover:not(.active) {

background-color: #555;

color: white;

}

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

border: 1px solid #555;

}

li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

}

li {

text-align: center;

border-bottom: 1px solid #555;

}

li:last-child {

border-bottom: none;

}

li a.active {

background-color: #4CAF50;

color: white;

}

li a:hover:not(.active) {

background-color: #555;

color: white;

}

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation:

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 25%;

background-color: #f1f1f1;

position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;

padding: 8px 0 8px 16px;

text-decoration: none;

}

li a.active {

background-color: #4CAF50;

color: white;

}

li a:hover:not(.active) {

background-color: #555;

color: white;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<h2>Fixed Full-height Side Nav</h2>

<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>

<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>

<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>

</div>

</body>

</html>

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

display: inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Example explained:

display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line

Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

li {

float: left;

}

li a {

display: block;

padding: 8px;

background-color: #dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: #111;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Right-Align Links

Right-align links by adding a new <ul> inside the <ul> with float:right;:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a class="active" href="#about">About</a></li>

<li><a href="#login">Login</a></li>

</ul>

</body>

</html>

Border Dividers

Add the border-right property to <li> to create link dividers:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

border-right:1px solid #bbb;

}

li:last-child {

border-right: none;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

<li><a href="#login">Login</a></li>

</ul>

</body>

</html>

Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:0;}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

position: fixed;

top: 0;

width: 100%;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<h1>Fixed Top Navigation Bar</h1>

<h2>Scroll this page to see the effect</h2>

<h2>The navigation bar will stay at the top of the page while scrolling</h2>

</div>

</body>

</html>

Gray Horizontal Navbar

An example of a gray horizontal navigation bar with a thin gray border:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

border: 1px solid #e7e7e7;

background-color: #f3f3f3;

}

li {

float: left;

}

li a {

display: block;

color: #666;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #ddd;

}

li a.active {

color: white;

background-color: #4CAF50;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

CSS Dropdowns

Create a hoverable dropdown with CSS.

Basic Dropdown

Create a dropdown box that appears when the user moves the mouse over an element.

<!DOCTYPE html>

<html>

<head>

<style>

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<h2>Hoverable Dropdown</h2>

<p>Move the mouse over the text below to open the dropdown content.</p>

<span>Mouse over me</span>

<p>Hello World!</p>

</div>

</body>

</html>

Dropdown Menu

Create a dropdown menu that allows the user to choose an option from a list:
This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>Dropdown Menu</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<button class="dropbtn">Dropdown</button>

</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

CSS Image Gallery

CSS can be used to create an image gallery.

<!DOCTYPE html>

<html>

<head>

<style>

div.img {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.img:hover {

border: 1px solid #777;

}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

CSS Image Opacity / Transparency

Creating transparent images with CSS is easy.

The CSS opacity property is a part of the CSS3 recommendation.

Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.
First we will show you how to create a transparent image with CSS.

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.4;

filter: alpha(opacity=40); /* For IE8 and earlier */

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

</body>

</html>

CSS3 Rounded Corners

With the CSS3 border-radius property, you can give any element "rounded corners".

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners1 {

border-radius: 25px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners2 {

border-radius: 25px;

border: 2px solid #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners3 {

border-radius: 25px;

background: url(paper.gif);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>

<p>The border-radius property allows you to add rounded corners to elements.</p>

<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Rounded corners!</p>

<p>Rounded corners for an element with a border:</p>

<p id="rcorners2">Rounded corners!</p>

<p>Rounded corners for an element with a background image:</p>

<p id="rcorners3">Rounded corners!</p>

</body>

</html>

CSS3 Border Images

With the CSS3 border-image property, you can set an image to be used as the border around an element.

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 round;

}

</style>

</head>

<body>

<p>The border-image property specifies an image to be used as the border around an element:</p>

<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>

<p>Here is the original image:</p><img src="border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>

</html>

CSS3 border-image - Different Slice Values

Different slice values completely changes the look of the border:

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */

border-image: url(border.png) 50 round;

}

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */

border-image: url(border.png) 20% round;

}

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */

border-image: url(border.png) 30% round;

}

</style>

</head>

<body>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>

<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>

</html>

CSS3 Backgrounds

CSS3 contains a few new background properties, which allow greater control of the background element.
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following new CSS3 properties:

background-size
background-origin
background-clip

CSS3 Multiple Backgrounds

CSS3 allows you to add multiple background images for an element, through the background-image property.
The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
The following example has two background images, the first image is a flower (aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

}

</style>

</head>

<body>

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

CSS3 Background Size

The CSS3 background-size property allows you to specify the size of background images.
Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts.
The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
The following example resizes a background image to much smaller than the original image (using pixels):
Original background image:

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 1px solid black;

background:url(img_flwr.gif);

background-repeat: no-repeat;

padding:15px;

}

#example2 {

border: 1px solid black;

background:url(img_flwr.gif);

background-size: 100px 80px;

background-repeat: no-repeat;

padding:15px;

}

</style>

</head>

<body>

<p>Original background-image:</p>

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

<p>Resized background-image:</p>

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

CSS3 Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors.

Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

<h3>Linear Gradient - Top to Bottom</h3>

<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

CSS3 Shadow Effects

With CSS3 you can add shadow to text and to elements.
In this chapter you will learn about the following properties:

text-shadow
box-shadow

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px red;

}

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>

</body>

</html>

CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size and position.
CSS3 supports 2D and 3D transformations.
Mouse over the elements below to see the difference between a 2D and a 3D transformation:

CSS3 2D Transforms

In this chapter you will learn about the following 2D transformation methods:

translate()
rotate()
scale()
skewX()
skewY()
matrix()

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari */

transform: translate(50px,100px); /* Standard syntax */

}

</style>

</head>

<body>

<div>

The translate() method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position.

</div>

</body>

</html>

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
The following example rotates the <div> element clockwise with 20 degrees:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-ms-transform: rotate(20deg); /* IE 9 */

-webkit-transform: rotate(20deg); /* Safari */

transform: rotate(20deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

This a normal div element.

</div>

The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.

</div>

</body>

</html>

CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transformations.
Mouse over the elements below to see the difference between a 2D and a 3D transformation:

CSS3 3D Transforms

In this chapter you will learn about the following 3D transformation methods:

rotateX()
rotateY()
rotateZ()

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateX(150deg); /* Safari */

transform: rotateX(150deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

This a normal div element.

</div>

The rotateX() method rotates an element around its X-axis at a given degree. This div element is rotated 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>

</body>

</html>

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateY(150deg); /* Safari */

transform: rotateY(150deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

This a normal div element.

</div>

The rotateY() method rotates an element around its Y-axis at a given degree. This div element is rotated 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>

</body>

</html>

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateZ(90deg); /* Safari */

transform: rotateZ(90deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

This a normal div element.

</div>

The rotateZ() method rotates an element around its Z-axis at a given degree. This div element is rotated 90 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>

</body>

</html>

Freelancign web design and Graphics design

CSS Tutorial

What is CSS?

CSS Syntax and Selectors

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS Selectors

The element Selector

Example

The id Selector

Example

The class Selector

Example

Grouping Selectors

Example

Three Ways to Insert CSS

External Style Sheet

Example

Internal Style Sheet

Example

Inline Styles

Example

CSS Colors

Color Names

RGB (Red, Green, Blue) Examples

Hexadecimal Colors

CSS Backgrounds

Background Color

Example

Example

Background Image

Example

Example

Background Image - Repeat Horizontally or Vertically

Example

Example

Background Image - Set position and no-repeat

Example

Example

Background Image - Fixed position

Example

CSS Borders

CSS Border Properties

Border Style

Example

Border Width

Example

Border Color

Example

CSS Margins

CSS Margin Properties

CSS Margins

Margin - Individual Sides

Example

Use of The auto Value

Example

CSS Padding

CSS Padding Properties

CSS Padding

Padding - Individual Sides

Example

CSS Height and Width Dimensions

CSS Dimension Properties

Setting height and width

Example

Setting max-width

Example

CSS Text

text formatting

Text Color

Example

Text Alignment

Example

Text Decoration

Example

CSS Fonts

Difference Between Serif and Sans-serif Fonts

CSS Font Families

Font Family

Example