0% found this document useful (0 votes)

290 views

CSS1

Uploaded by

Amazing DALVI

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

290 views

CSS1

Uploaded by

Amazing DALVI

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 677

CSS

CSS Introduction
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 Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets.
Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links
below to see the different styles:

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

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

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

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

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:

<!DOCTYPE html>

<html>

<head>

<style>

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

</body>

</html>

Hello World!

These paragraphs are styled with CSS.

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):

<!DOCTYPE html>

<html>

<head>

<style>

text-align: center;

color: red;

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

</html>

Every paragraph will be affected by the style.

Me too!

And me!

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":

<!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>

Hello World!

This paragraph is not affected by the style.

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:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

Red and center-aligned heading

Red and center-aligned paragraph.

Grouping Selectors
<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

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

</html>

Hello World!
Smaller heading!

This is a paragraph.

CSS How To...
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:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>
This is a heading
This is a paragraph.

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:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

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

</html>

This is a heading
This is a paragraph.

CSS Colors
Color Names
In HTML, a color can be specified by using a color name:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Background Color
You can set the background color for HTML elements:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

</p>

</body>

</html>

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.

Text Color
You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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

<!DOCTYPE html>

<html>

<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

Hello World

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

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

Border Color
You can set the color of borders:

<!DOCTYPE html>

<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

</html>
Hello World
Hello World
Hello World
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:

Same as color name "Tomato":

<!DOCTYPE html>

<html>

<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color values.</p>
</body>

</html>

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347
hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)
In addition to the predefined color names, colors can be specified using RGB, HEX,
HSL, or even transparent colors using RGBA or HSLA color values.

RGB Value
In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>

<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>

<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>

<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>

<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<p>In HTML, you can specify colors using RGB values.</p>

</body>

</html>

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
In HTML, you can specify colors using RGB values.

Shades of gray are often defined using equal values for all the 3 light sources:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>

<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>

<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>By using equal values for red, green, and blue, you will get different shades of
gray.</p>

</body>

</html>

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
By using equal values for red, green, and blue, you will get different shades of gray.

HEX Value
In HTML, a color can be specified using a hexadecimal value 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).

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<p>In HTML, you can specify colors using Hex values.</p>

</body>

</html>

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
In HTML, you can specify colors using Hex values.

HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in
the form:

hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the
full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100%

is white

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>

<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>

<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>

<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>

<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>In HTML, you can specify colors using HSL values.</p>

</body>

</html>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
In HTML, you can specify colors using HSL values.

Saturation
Saturation can be describe as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>

<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>

<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>

<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>

<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>

</html>
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
With HSL colors, less saturation mean less color. 0% is completely gray.

Lightness
The lightness off a color can be described as how much light you want to give
the color, where 0% means no light (black), 50% means 50% light (neither
dark nor light) 100% means full lightness (white).

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>

<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>

<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>

<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>

</html>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
With HSL colors, 0% lightness means black, and 100 lightness means white.

RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel -
which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):

<!DOCTYPE html>

<html>

<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>

<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>You can make transparent colors by using the RGBA color value.</p>

</body>

</html>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
You can make transparent colors by using the RGBA color value.

CSS Backgrounds
Background Color
The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>

Hello World!
This page has a light blue background color!
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:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

div {

background-color: lightblue;

background-color: yellow;

</style>

</head>

<body>
<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

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:

<!DOCTYPE html>

<html>

<head>

<style>

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

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

Hello World!
This page has an image as the background!

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:

<!DOCTYPE html>

<html>

<head>

<style>
body {

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

</html>

Hello World!
Strange background image...

If the image above is repeated only horizontally (background-repeat: repeat-

x;), the background will look better:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

</style>
</head>

<body>

<h1>Hello World!</h1>

<p>Here, a background image is repeated only horizontally!</p>

</body>

</html>

Hello World!
Here, a background image is repeated only horizontally!

Background Image - Set position and no-

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

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

</style>

</head>
<body>

<h1>Hello World!</h1>

<p>W3Schools background image example.</p>

<p>The background image is only showing once, but it is disturbing the reader!</p>

</body>

</html>

Hello World!
W3Schools background image example.

The background image is only showing once, but it is disturbing the reader!

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:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

}
</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background no-repeat, set position example.</p>

<p>Now the background image is only shown once, and positioned away from the text.</p>

<p>In this example we have also added a margin on the right side, so the background image will never
disturb the text.</p>

</body>

</html>

Hello World!
W3Schools background no-repeat, set position example.

Now the background image is only shown once, and positioned away from the text.

In this example we have also added a margin on the right side, so the background
image will never disturb the text.

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:

<!DOCTYPE html>

<html>

<head>

<style>
body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>

</html>

Hello World!
The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

If you do not see any scrollbars, try to resize the browser window.

CSS Borders
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).

<!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>

The border-style Property

This property specifies what kind of border to display:

A dotted border.

A dashed border.

A solid border.

A double border.
A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.

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).

5px border-width

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-width: 5px;

}
p.two {

border-style: solid;

border-width: medium;

p.three {

border-style: dotted;

border-width: 2px;

p.four {

border-style: dotted;

border-width: thick;

p.five {

border-style: double;

border-width: 15px;

p.six {

border-style: double;

border-width: thick;

}
p.seven {

border-style: solid;

border-width: 2px 10px 4px 20px;

</style>

</head>

<body>

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

<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>

<p class="two">Some text.</p>

<p class="three">Some text.</p>

<p class="four">Some text.</p>

<p class="five">Some text.</p>

<p class="six">Some text.</p>

<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

</body>

</html>
The border-width Property

This property specifies the width of the four borders:

Some text.

Note: The "border-width" property does not work if it is used alone. Always specify
the "border-style" property to set the borders first.

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.

<!DOCTYPE html>
<html>

<head>

<style>

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;

</style>

</head>

<body>

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

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A solid multicolor border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>

</body>

</html>

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A solid multicolor border

Note: The "border-color" property does not work if it is used alone. Use the "border-
style" property to set the borders first.

Border - Individual Sides

From the examples above you have seen that it is possible to specify a different
border for each side.

In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):

<!DOCTYPE html>

<html>

<head>

<style>

p{
border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

</style>

</head>

<body>

<p>2 different border styles.</p>

</body>

</html>

2 different border styles.

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.

The border property is a shorthand property for the following individual border

properties:

 border-width
 border-style (required)
 border-color

<!DOCTYPE html>

<style>

border: 5px solid red;

</style>

</head>

<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>

</html>

The border Property

This property is a shorthand property for border-width, border-style, and border-color.

You can also specify all the individual border properties for just one side:

Left Border
<!DOCTYPE html>

<html>

<head>

<style>

p{
border-left: 6px solid red;

background-color: lightgrey;

</style>

</head>

<body>

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

<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-

color.</p>

</body>

</html>
The border-left Property

This property is a shorthand property for border-left-width, border-left-style, and

border-left-color.

Bottom Border
<!DOCTYPE html>

<html>

<head>

<style>

border-bottom: 6px solid red;

background-color: lightgrey;

</style>

</head>

<body>

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

<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-

bottom-color.</p>

</body>

</html>

The border-bottom Property

This property is a shorthand property for border-bottom-width, border-bottom-style,

and border-bottom-color.
Rounded Borders
Example
<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

border: 2px solid red;

p.round1 {

border: 2px solid red;

border-radius: 5px;

p.round2 {

border: 2px solid red;

border-radius: 8px;

p.round3 {

border: 2px solid red;

border-radius: 12px;

}
</style>

</head>

<body>

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

<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>

<p class="round1">Round border</p>

<p class="round2">Rounder border</p>

<p class="round3">Roundest border</p>

<p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p>

</body>

</html>

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Note: The "border-radius" property is not supported in IE8 and earlier versions.

CSS Margins
<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 70px;

border: 1px solid #4CAF50;

</style>

</head>

<body>

<div>This element has a margin of 70px.</div>

</body>

</html>

This element has a margin of 70px.

CSS Margins
The CSS margin properties are used to create space around elements, outside
of any defined borders.

With CSS, you have full control over the margins. There are 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

Tip: Negative values are allowed.

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

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

}
</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>

</body>

</html>

Using individual margin properties

This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one
property.

The margin property is a shorthand property for the following individual margin

properties:

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

So, here is how it works:

If the margin property has four values:

 margin: 25px 50px 75px 100px;

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

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px 75px 100px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a
left margin of 100px.</div>

<hr>

</body>

</html>

The margin shorthand property - 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin
of 75px, and a left margin of 100px.
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:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:300px;

margin: auto;

border: 1px solid red;

</style>

</head>

<body>

<h2>Use of margin:auto</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 horizontally centered because it has margin: auto;

</div>

</body>

</html>

Use of margin:auto

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:

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

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited
from the parent element (<div>):

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid red;

margin-left: 100px;

p.ex1 {

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>

<div>

<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>

</div>

</body>

</html>

Use of the inherit value

Let the left margin be inherited from the parent element:

This paragraph has an inherited left margin (from the div element).

CSS Padding
<!DOCTYPE html>

<html>

<head>

<style>

div {

padding: 70px;

border: 1px solid #4CAF50;

}
</style>

</head>

<body>

<div>This element has a padding of 70px.</div>

</body>

</html>

This element has a padding of 70px.

CSS Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.

With CSS, you have full control over the padding. There are 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
Note: Negative values are not allowed.

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

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and
a left padding of 80px.</div>

</body>

</html>
Using individual padding properties
This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one
property.

The padding property is a shorthand property for the following individual

padding properties:

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

So, here is how it works:

If the padding property has four values:

 padding: 25px 50px 75px 100px;

o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px 100px;

background-color: lightblue;

}
</style>

</head>

<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and
a left padding of 100px.</div>

</body>

</html>

The padding shorthand property - 4 values

This div element has a top padding of 25px, a right padding of 50px, a bottom
padding of 75px, and a left padding of 100px.

If the padding property has three values:

 padding: 25px 50px 75px;

o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px;

background-color: lightblue;
}

</style>

</head>

<body>

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding
of 75px.</div>

</body>

</html>

The padding shorthand property - 3 values

This div element has a top padding of 25px, a right and left padding of 50px, and a
bottom padding of 75px.

Padding and Element Width

The CSS width property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an
element (the box model).

So, if an element has a specified width, the padding added to that element will
be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px.

However, the actual rendered width of the <div> element will be 350px (300px
+ 25px of left padding + 25px of right padding):

<!DOCTYPE html>

<html>

div.ex1 {

width: 300px;

background-color: yellow;

div.ex2 {

width: 300px;

padding: 25px;

background-color: lightblue;

</style>

</head>

<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>

<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>

</html>

Padding and element width

This div is 300px wide.
The width of this div is 350px, even though it is defined as 300px in the CSS.

CSS Height and Width

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.

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 200px;

width: 50%;

background-color: powderblue;

</style>

</head>

<body>

<h2>Set the height and width of an element</h2>

<p>This div element has a height of 200px and a width of 50%:</p>

</body>

</html>

Set the height and width of an element

This div element has a height of 200px and a width of 50%:

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 100px;

width: 500px;

background-color: powderblue;

</style>

</head>

<body>

<h2>Set the height and width of an element</h2>

<p>This div element has a height of 100px and a width of 500px:</p>

</html>

Set the height and width of an element

This div element has a height of 100px and a width of 500px:

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!

<!DOCTYPE html>

<html>

<head>

<style>

div {

max-width: 500px;

height: 100px;

background-color: powderblue;

}
</style>

</head>

<body>

<h2>Set the max-width of an element</h2>

<p>This div element has a height of 100px and a max-width of 500px:</p>

<p>Resize the browser window to see the effect.</p>

</body>

</html>

Set the max-width of an element

This div element has a height of 100px and a max-width of 500px:

Resize the browser window to see the effect.

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 every HTML element.
It consists of: margins, borders, padding, and the actual content. The image
below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space
between elements.

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>

<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px
green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</div>

</body>

</html>

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.

This text is the actual content of the box. We have added a 25px padding, 25px
margin and a 25px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.

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 padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

<!DOCTYPE html>

<html>

<head>

<style>

div {
width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

</style>

</head>

<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">

<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>

</html>

Calculate the total width:

The picture above is 350px wide. The total width of this element is also 350px.

CSS Outline
CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset
 outline

Outline Style
The outline-style property specifies the style of the outline, and can have one
of the following values:

 dotted - Defines a dotted outline

 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline

The following example shows the different outline-style values:

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

Example
<!DOCTYPE html>

<html>

<head>

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid {outline-style: solid;}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

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

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline. The effect depends on the outline-color value.</p>

<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>

<p class="inset">An inset outline. The effect depends on the outline-color value.</p>

<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>

</html>

The outline-style Property

A dotted outline

A dashed outline

A solid outline

A double outline

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

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

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

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

Outline Color
The outline-color property is used to set the color of the outline.

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"
 invert - performs a color inversion (which ensures that the outline is
visible, regardless of color background)

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {
border: 1px solid black;

outline-style: solid;

outline-color: red;

p.ex2 {

border: 1px solid black;

outline-style: double;

outline-color: green;

p.ex3 {

border: 1px solid black;

outline-style: outset;

outline-color: yellow;

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A double green outline.</p>

<p class="ex3">An outset yellow outline.</p>

</body>

</html>

The outline-color Property

A solid red outline.

A double green outline.

An outset yellow outline.

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid yellow;

outline-style: solid;

outline-color: invert;

</style>

</head>

<body>

<h2>Using outline-color:invert</h2>

<p class="ex1">A solid invert outline.</p>

</body>
</html>

Using outline-color:invert

A solid invert outline.

Outline Width
The outline-width property specifies the width of the outline, and can have
one of the following values:

 thin (typically 1px)

 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thin;

p.ex2 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: medium;
}

p.ex3 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thick;

p.ex4 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: 4px;

}</style>

</head>

<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>

<p class="ex2">A medium outline.</p>

<p class="ex3">A thick outline.</p>

<p class="ex4">A 4px thick outline.</p>

</body>

</html>

The outline-width Property

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

Outline Offset
The outline-offset property adds space between an outline and the
edge/border of an element. The space between an element and its outline is
transparent.

<!DOCTYPE html>

<html>

<head>

<style>

margin: 30px;

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

</style>

</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>

</html>

The outline-offset Property

This paragraph has an outline 15px outside the border edge.

<!DOCTYPE html>

<html>

<head>

<style>

margin: 30px;

background:yellow;

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

</style>

</head>

<body>
<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>

</html>

The outline-offset Property

This paragraph has an outline 15px outside the border edge.

CSS Text
<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: auto;

border: 1px solid gray;

padding: 8px;

h1 {

text-align: center;

text-transform: uppercase;

color: #4CAF50;

}
p{

text-indent: 50px;

text-align: justify;

letter-spacing: 3px;

text-decoration: none;

color: #008CBA;

</style>

</head>

<body>

<div>

<h1>text formatting</h1>

<p>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

<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>

</div>

</body>

</html>

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. The color is 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.

<!DOCTYPE html>

<html>

<head>

<style>

body {

color: blue;

h1 {

color: green;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined
in the body selector.</p>

</body>

</html>

This is heading 1
This is an ordinary paragraph. Notice that this text is blue. The default text color for a
page is defined in the body selector.

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):

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-align: center;

h2 {

text-align: left;

}
h3 {

text-align: right;

</style>

</head>

<body>

<h1>Heading 1 (center)</h1>

<h2>Heading 2 (left)</h2>

<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>

</html>

Heading 1 (center)
Heading 2 (left)
Heading 3 (right)

The three headings above are aligned center, left and 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:
<!DOCTYPE html>

<html>

<head>

<style>

text-decoration: none;

</style>

</head>

<body>

<p>A link with no underline: <a href="https://www.w3schools.com">W3Schools.com</a></p>

</body>

</html>

A link with no underline: W3Schools.com

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>

This is heading 1
This is heading 2
This is heading 3

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:
<!DOCTYPE html>

<html>

<head>

<style>

p.uppercase {

text-transform: uppercase;

p.lowercase {

text-transform: lowercase;

p.capitalize {

text-transform: capitalize;

</style>

</head>

<body>

<p class="uppercase">This is some text.</p>

<p class="lowercase">This is some text.</p>

<p class="capitalize">This is some text.</p>

</body>

</html>
THIS IS SOME TEXT.

this is some text.

This Is Some Text.

Text Indentation
The text-indent property is used to specify the indentation of the first line of a
text:

<!DOCTYPE html>

<html>

<head>

<style>

text-indent: 50px;

</style>

</head>

<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning
over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that
all the people in this world haven't had the advantages that you've had.'</p>

</body>

</html>

In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'

Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.

The following example demonstrates how to increase or decrease the space

between characters:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

letter-spacing: 3px;

h2 {

letter-spacing: -3px;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

</body>

</html>

This is heading 1
Thisisheading2

Line Height
The line-height property is used to specify the space between lines:

<!DOCTYPE html>

<html>

<head>

<style>

p.small {

line-height: 0.7;

p.big {

line-height: 1.8;

</style>

</head>

<body>

<p>

This is a paragraph with a standard line-height.<br>

The default line height in most browsers is about 110% to 120%.<br>

</p>

This is a paragraph with a smaller line-height.<br>

</p>

This is a paragraph with a bigger line-height.<br>

</p>

</body>

</html>

This is a paragraph with a standard line-height.

The default line height in most browsers is about 110% to 120%.

This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.

Text Direction
The direction property is used to change the text direction of an element:

<!DOCTYPE html>

<style>

p.ex1 {

direction: rtl;

</style>

</head>

<body>

<p>This is the default text direction.</p>

<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

</body>

</html>

This is the default text direction.

.This is right-to-left text direction

Word Spacing
The word-spacing property is used to specify the space between the words in a
text.

The following example demonstrates how to increase or decrease the space

between words:

<!DOCTYPE html>

<html>

h1 {

word-spacing: 10px;

h2 {

word-spacing: -5px;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

</body>

</html>

This is heading 1
This is heading 2

Text Shadow
The text-shadow property adds shadow to text.

The following example specifies the position of the horizontal shadow (3px), the
position of the vertical shadow (2px) and the color of the shadow (red):

<!DOCTYPE html>
<html>

<head>

<style>

h1 {

text-shadow: 3px 2px red;

</style>

</head>

<body>

<h1>Text-shadow effect</h1>

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

</body>

</html>

Text-shadow effect
Note: Internet Explorer 9 and earlier do not support the text-shadow property.

CSS 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 Serif fonts have small lines at the
characters
Georgia

Sans-serif Arial "Sans" means without - these font

lines at the ends of characters
Verdana

Monospace Courier New All monospace characters have the

Lucida Console

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:

<!DOCTYPE html>

<html>

p.serif {

font-family: "Times New Roman", Times, serif;

p.sansserif {

font-family: Arial, Helvetica, sans-serif;

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>

</html>

CSS font-family
This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

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)

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

font-style: normal;

p.italic {

font-style: italic;

p.oblique {

font-style: oblique;

</style>

</head>

<body>

<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>

<p class="oblique">This is a paragraph in oblique style.</p>

</body>

</html>

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

Font Size
The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you
should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
 Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers

Set Font Size With Pixels

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

<!DOCTYPE html>
<html>

<head>

<style>

h1 {

font-size: 40px;

h2 {

font-size: 30px;

font-size: 14px;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

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

</body>

</html>
This is heading 1
This is heading 2
This is a paragraph.

This is another paragraph.

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

<!DOCTYPE html>

<html>

<head>

<style>

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 */

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

<p>Specifying the font-size in em allows all major browsers to resize the text.

Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes
larger/smaller than it should.</p>

</body>

</html>

This is heading 1
This is heading 2
This is a paragraph.

Specifying the font-size in em allows all major browsers to resize the text. Unfortunately, there is still a
problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.

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:
<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 100%;

h1 {

font-size: 2.5em;

h2 {

font-size: 1.875em;

font-size: 0.875em;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all
browsers to resize the text!</p>

</body>

</html>

This is heading 1
This is heading 2
This is a paragraph.

Specifying the font-size in percent and em displays the same size in all major browsers, and allows all
browsers to resize the text!

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

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

font-weight: normal;

p.light {

font-weight: lighter;
}

p.thick {

font-weight: bold;

p.thicker {

font-weight: 900;

</style>

</head>

<body>

<p class="normal">This is a paragraph.</p>

<p class="light">This is a paragraph.</p>

<p class="thick">This is a paragraph.</p>

<p class="thicker">This is a paragraph.</p>

</body>

</html>

This is a paragraph.

This is a paragraph.
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.

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

font-variant: normal;

p.small {

font-variant: small-caps;

</style>

</head>

<body>

<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>

</body>

</html>
My name is Hege Refsnes.

MY NAME IS HEGE REFSNES.

CSS Icons
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon library, such
as Font Awesome.

Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)

Font Awesome Icons

To use the Font Awesome icons, add the following line inside the <head> section
of your HTML page:

<!DOCTYPE html>

<html>`

<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">

</head>
<body>

<p>Some Font Awesome icons:</p>

<i class="fa fa-cloud"></i>

<i class="fa fa-heart"></i>

<i class="fa fa-car"></i>

<i class="fa fa-file"></i>

<i class="fa fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>

<i class="fa fa-cloud" style="font-size:24px;"></i>

<i class="fa fa-cloud" style="font-size:36px;"></i>

<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>

<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

</html>
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside
the <head> section of your HTML page:

Note: No downloading or installation is required!

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<p>Some Bootstrap icons:</p>

<i class="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>

<i class="glyphicon glyphicon-user"></i>

<i class="glyphicon glyphicon-envelope"></i>

<i class="glyphicon glyphicon-thumbs-up"></i>

<p>Styled Bootstrap icons (size and color):</p>

<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>

<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>

<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

</html>

Styling Links

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><a href="default.asp" target="_blank">This is a link</a></b></p>

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

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be

effective.

Text Decoration
The text-decoration property is mostly used to remove underlines from links:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

text-decoration: none;

a:visited {

text-decoration: none;

a:hover {

text-decoration: underline;

}
a:active {

text-decoration: underline;

</style>

</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

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

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be

effective.

Background Color
The background-color property can be used to specify a background color for
links:

<!DOCTYPE html>

<style>

a:link {

background-color: yellow;

a:visited {

background-color: cyan;

a:hover {

background-color: lightgreen;

a:active {

background-color: hotpink;

</style>

</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

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

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be

effective.

Advanced - Link Buttons

This example demonstrates a more advanced example where we combine
several CSS properties to display links as boxes/buttons:

<!DOCTYPE html>

<html>

<head>

<style>

a:link, a:visited {

background-color: #f44336;

color: white;

padding: 14px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

a:hover, a:active {
background-color: red;

</style>

</head>

<body>

<a href="default.asp" target="_blank">This is a link</a>

</body>

</html>

This is a link

CSS Lists
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:

<!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>

<li>Coffee</li>

</ul>

<li>Coffee</li>

</ul>

<p>Example of ordered lists:</p>

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

</body>

</html>

Example of unordered lists:

o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Example of ordered lists:

I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-image: url('sqpurple.gif');

</style>

</head>

<body>

<ul>

<li>Coffee</li>

</ul>

</body>
</html>

 Coffee
 Tea
 Coca Cola

Position The List Item Markers

The list-style-position property specifies whether the list-item markers
should appear inside or outside the content flow:

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {list-style-position:inside;}

ul.b {list-style-position:outside;}

</style>

</head>

<body>

<p>The following list has list-style-position: inside:</p>

<li>Coffee</li>

</ul>

<p>The following list has list-style-position: outside:</p>

<li>Coffee</li>

</ul>

<p>"list-style-position: outside" is the default setting.</p>

</body>

</html>

The following list has list-style-position: inside:

 Coffee
 Tea
 Coca Cola

The following list has list-style-position: outside:

 Coffee
 Tea
 Coca Cola

"list-style-position: outside" is the default setting.

Remove Default Settings

The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to <ul> or <ol>:

<!DOCTYPE html>

<html>

<head>

<style>
ul.demo {

list-style-type: none;

margin: 0;

padding: 0;

</style>

</head>

<body>

<p>Default list:</p>

<ul>

<li>Coffee</li>

</ul>

<p>Remove bullets, margin and padding:</p>

<li>Coffee</li>

</ul>

</body>

</html>
Default list:

 Coffee
 Tea
 Coca Cola

Remove bullets, margin and padding:

 Coffee
 Tea
 Coca Cola

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:

<!DOCTYPE html>

<html>

<head>

<style>

ol {

background: #ff9999;

padding: 20px;

ul {

background: #3399ff;

padding: 20px;

}
ol li {

background: #ffe5e5;

padding: 5px;

margin-left: 35px;

ul li {

background: #cce5ff;

margin: 5px;

</style>

</head>

<body>

<h1>Styling Lists With Colors:</h1>

<ol>

<li>Coffee</li>

</ol>

<ul>

<li>Coffee</li>
<li>Tea</li>

</ul>

</body>

</html>

Styling Lists With Colors:

1. Coffee
2. Tea
3. Coca Cola

 Coffee
 Tea
 Coca Cola

CSS Tables
Table Borders
To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td>
elements:

<!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>

Add a border to a table:

Firstname Lastname
Peter Griffin

Lois Griffin

Collapse Table Borders

The border-collapse property sets whether the table borders should be
collapsed into a single border:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

table, td, th {

border: 1px solid black;

</style>

</head>

<body>

<h2>Let the borders collapse:</h2>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected
results

in IE8 and earlier versions.</p>

</body>

</html>

Let the borders collapse:

Firstnam
Lastname
e

Peter Griffin

Lois Griffin
Note: If a !DOCTYPE is not specified, the border-collapse property can produce
unexpected results in IE8 and earlier versions.

If you only want a border around the table, only specify the border property for
<table>:

Firstnam
Lastname
e
Peter Griffin
Lois Griffin

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

border: 1px solid black;

</style>

</head>

<body>

<h2>Single Border Around The 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>

Single Border Around The Table:

Firstnam
Lastname
e

Peter Griffin
Lois Griffin

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>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

The width and height Properties

Set the width of the table, and the height of the table header row:
Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of
<td> elements are left-aligned.

The following example left-aligns the text in <th> elements:

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid black;

table {

border-collapse: collapse;
width: 100%;

th {

text-align: left;

</style>

</head>

<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the
content in th or td:</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>

The text-align Property

This property sets the horizontal alignment (like left, right, or center) of the content in
th or td:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both
<th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td>
elements:

<!DOCTYPE html>

<html>

<head>

border: 1px solid black;

table {

border-collapse: collapse;

width: 100%;

td {

height: 50px;

vertical-align: bottom;

</style>

</head>

<body>

<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of
the content in th or td.</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>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

The vertical-align Property

This property sets the vertical alignment (like top, bottom, or middle) of the content in
th or td.

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid #ddd;

text-align: left;

table {

border-collapse: collapse;

width: 100%;
}

th, td {

padding: 15px;

</style>

</head>

<body>

<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a
table.</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>

The padding Property

This property adds space between the border and the content in a table.

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Horizontal Dividers

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

First Name Last Name Savings

Joe Swanson $300

Add the border-bottom property to <th> and <td> for horizontal dividers:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

th, td {

padding: 8px;

text-align: left;
border-bottom: 1px solid #ddd;

</style>

</head>

<body>

<h2>Bordered Table Dividers</h2>

<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>

</html>

Bordered Table Dividers

Add the border-bottom property to th and td for horizontal dividers:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Table Color
The example below specifies the background color and text color of <th>
elements:

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

th {

background-color: #4CAF50;

color: white;

</style>

</head>

<body>

<h2>Colored Table Header</h2>

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

</table>

</body>

</html>

Colored Table Header

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

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

<!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>
<div style="overflow-x:auto;">

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

Responsive Table

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:

To create a responsive table, add a container element (like div) with overflow-

x:auto around the table element:

First Name Last Name Points Points Points Points Points Points Points Points Points Points

Jill Smith 50 50 50 50 50 50 50 50 50 50

Eve Jackson 94 94 94 94 94 94 94 94 94 94

Adam Johnson 67 67 67 67 67 67 67 67 67 67

CSS Layout - The display Property

Override The Default Display Value
As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

<!DOCTYPE html>

<html>

li {

display: inline;

</style>

</head>

<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>

<li><a href="/html/default.asp" target="_blank">HTML</a></li>

<li><a href="/css/default.asp" target="_blank">CSS</a></li>

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

</ul>

</body>

</html>

Display a list of links as a horizontal menu:

 HTML CSS JavaScript

The following example displays <a> elements as block elements:

<!DOCTYPE html>

<html>

<head>

<style>
a{

display: block;

</style>

</head>

<body>

<p>Display links as block elements:</p>

<a href="/html/default.asp" target="_blank">HTML</a>

<a href="/css/default.asp" target="_blank">CSS</a>

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

</body>

</html>

Display links as block elements:

HTML

CSS

JavaScript

Hide an Element - display:none or

visibility:hidden?
<!DOCTYPE html>

<html>

h1.hidden {

display: none;

</style>

</head>

<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>

<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>

</html>

This is a visible heading

Notice that the h1 element with display: none; does not take up any space.

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element
will be hidden, but still affect the layout:

<!DOCTYPE html>

<html>

<head>

<style>

h1.hidden {

visibility: hidden;
}

</style>

</head>

<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>

<p>Notice that the hidden heading still takes up space.</p>

</body>

</html>

This is a visible heading

Notice that the hidden heading still takes up space.

CSS Layout - width and max-width

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width:500px;

margin: auto;

border: 3px solid #73AD21;

}

div.ex2 {

max-width:500px;

margin: auto;

border: 3px solid #73AD21;

</style>

</head>

<body>

<div class="ex1">This div element has width: 500px;</div>

<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference
between

the two divs!</p>

</body>

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

CSS Layout - The position Property

The position Property
The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then 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 position value.

position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.

An element with position: static; is not positioned in any special way; it is

always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

<!DOCTYPE html>

<html>

<head>

<style>

div.static {

position: static;

border: 3px solid #73AD21;

</style>

</head>

<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is

always positioned according to the normal flow of the page:</p>

This div element has position: static;

</div>
</body>

</html>

position: static;

An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:

position: relative;
An element with position: relative; is positioned relative to its normal
position.

Setting the top, right, bottom, and left properties of a relatively-positioned

element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

<!DOCTYPE html>
<html>

<head>

<style>

div.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

</style>

</head>

<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

This div element has position: relative;

</div>

</body>

</html>

position: relative;

An element with position: relative; is positioned relative to its normal position:

position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have
been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS
that is used:

<!DOCTYPE html>

<html>

<head>

<style>

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;
border: 3px solid #73AD21;

</style>

</head>

<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled:</p>

This div element has position: fixed;

</div>

</body>

</html>
position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses

the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

Here is a simple example:

<!DOCTYPE html>

<style>

div.relative {

position: relative;

width: 400px;

height: 200px;

border: 3px solid #73AD21;

div.absolute {

position: absolute;

top: 80px;

right: 0;

width: 200px;

height: 100px;

border: 3px solid #73AD21;

</style>

</head>

<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead
of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;

<div class="absolute">This div element has position: absolute;</div>

</div>

</body>

</html>

position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.

A sticky element toggles between relative and fixed, depending on the scroll

position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).
<!DOCTYPE html>

<html>

<head>

<style>

div.sticky {

position: -webkit-sticky;

position: sticky;

top: 0;

padding: 5px;

background-color: #cae8ca;

border: 2px solid #4CAF50;

</style>

</head>

<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>

<div class="sticky">I am sticky!</div>

<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll
position.</p>

<p>Scroll back up to remove the stickyness.</p>

<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>

</div>

</body>

</html>

Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you
reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.

Overlapping Elements
When elements are positioned, 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
<!DOCTYPE html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

</style>

</head>

<body>

<h1>This is a heading</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>

</html>

Positioning Text In an Image

How to position text over an image:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;
}

img {

width: 100%;

height: auto;

opacity: 0.3;

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top left corner:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

<div class="topleft">Top Left</div>

</div>

</body>

</html>

Image Text

Add some text to an image in the top left corner:

CSS Layout - Overflow
CSS Overflow
The overflow property specifies whether to clip content or to add scrollbars
when the content of an element is too big to fit in a specified area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. It renders outside the

element's box
 hidden - The overflow is clipped, and the rest of the content will be
invisible
 scroll - The overflow is clipped, but a scrollbar is added to see the rest
of the content
 auto - If overflow is clipped, a scrollbar should be added to see the rest of
the content

overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:

<!DOCTYPE html>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: visible;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's
box:</p>

<div>You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.</div>

</body>

</html>
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is
hidden:

You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: hidden;

</style>
</head>

<body>

<h2>CSS Overflow</h2>

<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>

<p>Try to remove the overflow property to understand how it works.</p>

<div>You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.</div>

</body>

</html>

overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to
scroll inside the box. Note that this will add a scrollbar both horizontally and
vertically (even if you do not need it):

<!DOCTYPE html>
<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 100px;

border: 1px dotted black;

overflow: scroll;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside
the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need
it):</p>

<div>You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.</div>

</body>

</html>
overflow: auto
The auto value is similar to scroll, only it add scrollbars when necessary:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: auto;

</style>

</head>
<body>

<h2>CSS Overflow</h2>

<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>

<div>You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.</div>

</body>

</html>

CSS Layout - float and clear

The float Property
The float property is used for positioning and layout on web pages.

The float property can have one of the following values:

 left - The element floats to the left of its container

 right- The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs
in the text). This is default
 inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.

Example - float: right;

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

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

</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>

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">

</body>

</html>
Same for float left

img {

float: left;

}
Example - No float
<!DOCTYPE html>

<html>

<head>

<style>

img {

float: none;

</style>

</head>

<body>

<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;">

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>

In this example, the image will be displayed just where it occurs in the text (float:
none;).

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.

The clear Property

The clear property lets specifies what elements can float beside the cleared
element and on which side.

The clear property can have one of the following values:

 none - Allows floating elements on both sides. This is default
 left - No floating elements allowed on the left side
 right- No floating elements allowed on the right side
 both - No floating elements allowed on either the left or the right side
 inherit - The element inherits the clear value of its parent

The most common way to use the clear property is after you have used
a float property on an element.

When clearing floats, you should match the clear to the float. If an element is
floated to the left, then you should clear to the left. Your floated element will
continue to float, but the cleared element will appear below it on the web page.

The following example clears the float to the left. Means that no floating
elements are allowed on the left side (of the div):

<!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 div2 is after div1 in the HTML code. However, since div1 floats to the
left, the text in div2

flows around div1.</div>

<h2>With clear</h2>

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

</html>

The clearfix Hack

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

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid #4CAF50;

padding: 5px;

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

<div>

<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">

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>

<!DOCTYPE html>

<html>

<head>

<style>

div {
border: 3px solid #4CAF50;

padding: 5px;

.img1 {

float: right;

.clearfix::after {

content: "";

clear: both;

display: table;

.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>

<div>

<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">

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

<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>

<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">

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>

box-sizing: border-box;

.header, .footer {

background-color: grey;

color: white;

padding: 15px;

.column {

float: left;

padding: 15px;

.clearfix::after {

content: "";

clear: both;

display: table;

.menu {
width: 25%;

.content {

width: 75%;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 8px;

background-color: #33b5e5;

color: #ffffff;

.menu li:hover {

background-color: #0099cc;

</style>

</head>

<body>

<h1>Chania</h1>
</div>

<div class="column menu">

<ul>

<li>The Flight</li>

<li>The Island</li>

</ul>

</div>

<div class="column content">

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>You will learn more about web layout and responsive web pages in a later chapter.</p>

</div>

<p>Footer Text</p>

</div>

</body>

</html>
Chania

Footer Text

CSS Layout - inline-block
The inline-block Value
It has been possible for a long time to create a grid of boxes that fills the
browser width and wraps nicely (when the browser is resized), by using
the float property.

However, the inline-block value of the display property makes this even

easier.

inline-block elements are like inline elements but they can have a width and a
height.
Examples
The old way - using float (notice that we also need to specify a clear property
for the element after the floating boxes):

<!DOCTYPE html>

<html>

<head>

<style>

.floating-box {

float: left;

width: 150px;

height: 75px;

margin: 10px;

border: 3px solid #73AD21;

.after-box {

clear: left;

border: 3px solid red;

</style>

</head>

<body>
<h2>The Old Way - using float</h2>

<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>

</html>
CSS Layout - Horizontal & Vertical
Align
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges
of its container.

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

<!DOCTYPE html>
<html>

<head>

<style>

.center {

margin: auto;

width: 60%;

border: 3px solid #73AD21;

padding: 10px;

</style>

</head>

<body>

<h2>Center Align Elements</h2>

<p>To horizontally center a block element (like div), use margin: auto;</p>

<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !

DOCTYPE is declared.</p>

</div>

</body>

</html>
Center Align Text
To just center the text inside an element, use text-align: center;

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

border: 3px solid green;

</style>

</head>

<body>
<h2>Center Text</h2>

<p>This text is centered.</p>

</div>

</body>

</html>

Center an Image
To center an image, use margin: auto; and make it into a block element:

<!DOCTYPE html>

<html>

<head>

<style>

img {

display: block;

margin: 0 auto;

}
</style>

</head>

<body>

<h2>Center an Image</h2>

<p>To center an image, use margin: auto; and make it into a block
element:</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>

</html>

Left and Right Align - Using position

One method for aligning elements is to use position: absolute;:
<!DOCTYPE html>

<html>

<head>

<style>

.right {

position: absolute;

right: 0px;

width: 300px;

border: 3px solid #73AD21;

padding: 10px;

</style>

</head>

<body>

<h2>Right Align</h2>

<p>An example of how to right align elements with the position property:</p>

<p>In my younger and more vulnerable years my father gave me some

advice that I've been turning over in my mind ever since.</p>

</div>
</body>

</html>

Left and Right Align - Using float

Another method for aligning elements is to use the float property:

<!DOCTYPE html>

<html>

<head>

<style>

.right {

float: right;

width: 300px;

border: 3px solid #73AD21;

padding: 10px;

</style>
</head>

<body>

<h2>Right Align</h2>

<p>An example of how to right align elements with the float property:</p>

<p>In my younger and more vulnerable years my father gave me some

advice that I've been turning over in my mind ever since.</p>

</div>

</body>

</html>

Tip: When aligning elements with float, always define margin and padding for

the <body> element. This is to avoid visual differences in different browsers.

There is also a problem with IE8 and earlier, when using float. 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. So, always
set the !DOCTYPE declaration when using float:

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

padding: 0;

.right {

float: right;

width: 300px;

background-color: #b0e0e6;

</style>

</head>

<body>

<h2>Right Align</h2>

<div class="right">
<p><b>Note: </b>When aligning using the float property, always include the
!DOCTYPE declaration! If missing, it can produce strange results in IE
browsers.</p>

</div>

</body>

</html>

Center Vertically - Using padding

There are many ways to center an element vertically in CSS. A simple solution
is to use top and bottom padding:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

padding: 70px 0;

border: 3px solid green;

}
</style>

</head>

<body>

<h2>Center Vertically</h2>

<p>In this example, we use the padding property to center the div element
vertically:</p>

<p>I am vertically centered.</p>

</div>

</body>

</html>
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal to
the height property.

<!DOCTYPE html>

<html>

<head>

<style>

.center {

line-height: 200px;

height: 200px;

border: 3px solid green;

text-align: center;

.center p {

line-height: 1.5;

display: inline-block;

vertical-align: middle;

</style>

</head>

<body>
<h2>Centering</h2>

<p>In this example, we use the line-height property with a value that is equal
to the height property to center the div element:</p>

<p>I am vertically and horizontally centered.</p>

</div>

</body>

</html>

CSS Combinators
Descendant Selector
<!DOCTYPE html>

<html>

<head>

<style>

div p {

background-color: yellow;

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

<span><p>Paragraph 3 in the div.</p></span>

</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Child Selector
The child selector selects all elements that are the immediate children of a
specified element.

The following example selects all <p> elements that are immediate children of a
<div> element:

<!DOCTYPE html>

<html>

<head>

<style>

div > p {

background-color: yellow;

</style>

</head>

<body>

<div>
<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but

Descendant -->

</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

</body>

</html>

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings
of a specified element.

Sibling elements must have the same parent element, and "adjacent" means
"immediately following".

The following example selects all <p> elements that are placed immediately
after <div> elements:

<!DOCTYPE html>
<html>

<head>

<style>

div + p {

background-color: yellow;

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

</div>

<p>Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>

</body>

</html>

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified
element.

The following example selects all <p> elements that are siblings of <div>
elements:

<!DOCTYPE html>

<html>

<head>

<style>

div ~ p {

background-color: yellow;

</style>

</head>

<body>

<p>Paragraph 1.</p>

<div>

<p>Paragraph 2.</p>

</div>
<p>Paragraph 3.</p>

<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>
Paragraph 1.
Some code.

Paragraph 2.

Paragraph 3.
Some code.

Paragraph 4.

CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it

 Style visited and unvisited links differently
 Style an element when it gets focus
Anchor Pseudo-classes
Links can be displayed in different ways:

<!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><a href="default.asp" target="_blank">This is a link</a></b></p>

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

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be

effective.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:

<!DOCTYPE html>
<html>

<head>

<style>

a.highlight:hover {

color: #ff0000;

</style>

</head>

<body>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>

</html>

CSS Syntax

CSS Tutorial

Hover on <div>
An example of using the :hover pseudo-class on a <div> element:

<!DOCTYPE html>

<html>

div {

background-color: green;

color: white;

padding: 25px;

text-align: center;

div:hover {

background-color: blue;

</style>

</head>

<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>

</html>
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):

Hover over me to show the <p> element.

<!DOCTYPE html>

<html>

<head>

<style>

display: none;

background-color: yellow;

padding: 20px;

div:hover p {

display: block;

</style>

</head>
<body>

<div>Hover over me to show the p element

<p>Tada! Here I am!</p>

</div>

</body>

</html>

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first
child of another element.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first
child of any element:

<!DOCTYPE html>

<html>

<head>

color: blue;

</style>

</head>

<body>

<p>This is some text.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

This is some text.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

Match the first <i> element in all <p>

elements
In the following example, the selector matches the first <i> element in all <p>
elements:

<!DOCTYPE html>

<style>

p i:first-child {

color: blue;

</style>

</head>

<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

I am a strong person. I am a strong person.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

Match all <i> elements in all first child <p>

elements
In the following example, the selector matches all <i> elements in <p>
elements that are the first child of another element:
<!DOCTYPE html>

<html>

<head>

<style>

p:first-child i {

color: blue;

</style>

</head>

<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

I am a strong person. I am a strong person.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different
languages.

In the example below, :lang defines the quotation marks for <q> elements

with lang="no":

<!DOCTYPE html>

<html>

<head>

<style>

q:lang(no) {

quotes: "~" "~";

</style>

</head>

<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

<p>In this example, :lang defines the quotation marks for q elements with
lang="no":</p>

<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is

specified.</p>

</body>

</html>
Some text A quote in a paragraph Some text.

In this example, :lang defines the quotation marks for q elements with lang="no":

Note: IE8 supports the :lang pseudo class only if a !DOCTYPE is specified.

CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

 Style the first letter, or line, of an element

 Insert content before, or after, the content of an element

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line
of a text.

The following example formats the first line of the text in all <p> elements:

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

color: #ff0000;

font-variant: small-caps;

</style>
</head>

<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the
first line of a text. Some more text. And even more, and more, and more, and
more, and more, and more, and more, and more, and more, and more, and
more, and more.</p>

</body>

</html>

You can use the ::first-line pseudo-element to add a special effect to the first line of a
text. Some more text. And even more, and more, and more, and more, and more, and
more, and more, and more, and more, and more, and more, and more.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.

The following example formats the first letter of the text in all <p> elements:

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

color: #ff0000;

font-size: xx-large;

}
</style>

</head>

<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the
first character of a text!</p>

</body>

</html>

You can use the ::first-letter pseudo-element to add a special effect to the first
character of a text!

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

<!DOCTYPE html>

<html>

<head>

<style>

p.intro::first-letter {

color: #ff0000;

font-size:200%;

</style>

</head>
<body>

<p class="intro">This is an introduction.</p>

<p>This is a paragraph with some text. A bit more text even.</p>

</body>

</html>

This is an introduction.
This is a paragraph with some text. A bit more text even.

Multiple Pseudo-elements
Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-
large font size. The rest of the first line will be blue, and in small-caps. The rest
of the paragraph will be the default font size and color:

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

color: #ff0000;

font-size: xx-large;

}
p::first-line {

color: #0000ff;

font-variant: small-caps;

</style>

</head>

<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a

special effect to the first letter and the first line of a text!</p>

</body>

</html>

You can combine the ::first-letter and ::first-line pseudo-elements to add a special
effect to the first letter and the first line of a text!

CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the
content of an element.

The following example inserts an image before the content of each <h1>
element:

<!DOCTYPE html>

<html>

<head>

content: url(smiley.gif);

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The ::before pseudo-element inserts content before the content of an

element.</p>

<h1>This is a heading</h1>

<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is

specified.</p>

</body>

</html>
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the
content of an element.

The following example inserts an image after the content of each <h1>
element:

<!DOCTYPE html>

<html>

<head>

<style>

h1::after {

content: url(smiley.gif);

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The ::after pseudo-element inserts content after the content of an

element.</p>

<h1>This is a heading</h1>

<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is

specified.</p>
</body>

</html>

CSS - The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is
selected by a user.

The following CSS properties can be applied

to ::selection: color, background, cursor, and outline.

The following example makes the selected text red on a yellow background:

<!DOCTYPE html>

<html>

<head>

<style>

::-moz-selection { /* Code for Firefox */

color: red;

background: yellow;

}
::selection {

color: red;

background: yellow;

</style>

</head>

<body>

<h1>Select some text on this page:</h1>

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

<div>This is some text in a div element.</div>

<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8

and earlier versions.</p>

<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-

selection property.</p>

</body>

</html>

Select some text on this page:

This is a paragraph.

This is some text in a div element.

Note: ::selection is not supported in Internet Explorer 8 and earlier versions.

Note: Firefox supports an alternative, the ::-moz-selection property.

CSS Opacity / Transparency
<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.5;

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

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower

the value, the more transparent:</p>

<p>Image with 50% opacity:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

Image Transparency
The opacity property specifies the transparency of an element. The lower the value,
the more transparent:

Image with 50% opacity:

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change
the opacity on mouse-over:

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.5;

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

img:hover {

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

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property is often used together with the :hover selector to
change the opacity on mouse-over:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">

<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to

work on other elements than the a element.</p>

</body>

</html>

Image Transparency
The opacity property is often used together with the :hover selector to change the
opacity on mouse-over:

Note: In IE, a !DOCTYPE must be added for the :hover selector to work on other
elements than the a element.

Transparent Box
When using the opacity property to add transparency to the background of an
element, all of its child elements inherit the same transparency. This can make
the text inside a fully transparent element hard to read:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #4CAF50;

padding: 10px;

div.first {

opacity: 0.1;

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

div.second {

opacity: 0.3;

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

}

div.third {

opacity: 0.6;

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

</style>

</head>

<body>

<h1>Transparent Box</h1>

<p>When using the opacity property to add transparency to the background of an

element, all of its child elements become transparent as well. This can make the text
inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>

<div class="second"><p>opacity 0.3</p></div>

<div class="third"><p>opacity 0.6</p></div>

<div><p>opacity 1 (default)</p></div>

</body>

</html>
Transparent Box
When using the opacity property to add transparency to the background of an element,
all of its child elements become transparent as well. This can make the text inside a

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values. The following example sets the opacity for the
background color and not the text:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background: rgb(76, 175, 80);

padding: 10px;
}

div.first {

background: rgba(76, 175, 80, 0.1);

div.second {

background: rgba(76, 175, 80, 0.3);

div.third {

background: rgba(76, 175, 80, 0.6);

</style>

</head>

<body>

<h1>Transparent Box</h1>

<p>With opacity:</p>

<div style="opacity:0.1;"><p>10% opacity</p></div>

<div style="opacity:0.3;"><p>30% opacity</p></div>

<div style="opacity:0.6;"><p>60% opacity</p></div>

<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>

<div class="first"><p>10% opacity</p></div>

<div class="second"><p>30% opacity</p></div>

<div class="third"><p>60% opacity</p></div>

<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using
the opacity property.</p>

</body>

</html>
Text in Transparent Box
<!DOCTYPE html>

<html>

<head>

<style>

div.background {

background: url(klematis.jpg) repeat;

border: 2px solid black;

div.transbox {

margin: 30px;

background-color: #ffffff;

border: 1px solid black;

opacity: 0.6;

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

div.transbox p {

margin: 5%;

font-weight: bold;
color: #000000;

</style>

</head>

<body>

<p>This is some text that is placed in the transparent box.</p>

</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>

 Home
 News
 Contact
 About

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

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

<!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>

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

Home

News

Contact

About

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>

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>

Home

News

Contact

About

A background color is added to the links to show the link area.

Notice that the whole link area is clickable, not just the text.

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

Vertical Navigation Bar

Home

News

Contact

About

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>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

li a {

display: block;

color: #000;

padding: 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 class="active" href="#home">Home</a></li>

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

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

</ul>

</body>

</html>

Vertical Navigation Bar

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.
Home

News

Contact

About

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 class="active" href="#home">Home</a></li>

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

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

</ul>

</body>

</html>
Vertical Navigation Bar

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

 Home
 News
 Contact
 About

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 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 class="active" href="#home">Home</a></li>

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

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

</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

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

 Home
 News
 Contact
 About

Fixed Full-height Side Nav

Try to scroll this area, and see how the sidenav sticks to the page

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.

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).

Some text..

Some text..
Some text..

Some text..

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>

Home News Contact About

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="#news">News</a></li>
<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>

Home News Contact About

Note: If a !DOCTYPE is not specified, floating items can produce unexpected results.

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

Note: overflow:hi dden is added to the ul element to prevent li elements from going

outside of the list.

Tip: Add the background-color to <ul> instead of each <a> element if you

want a full-width background color:

<!DOCTYPE html>

<html>

<head>

<style>
ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #dddddd;

li {

float: left;

li a {

display: block;

padding: 8px;

</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 list instead of each link to create a full-width
background color.</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>

Home News Contact About

A background color is added to the list instead of each link to create a full-width
background color.

Note: overflow:hidden is added to the ul element to prevent li elements from going

outside of the list.

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>

<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 {

background-color: #111;

</style>

</head>

<body>

<ul>

<li><a class="active" href="#home">Home</a></li>

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

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

</ul>

</body>

</html>

Home News Contact About

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 class="active" href="#home">Home</a></li>

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

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

</ul>

</body>

</html>

Home News Contact About

Right-Align Links
Right-align links by floating the list items to the right (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 style="float:right"><a class="active" href="#about">About</a></li>

</ul>
</body>

</html>

Home News Contact About

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 class="active" href="#home">Home</a></li>

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

<li style="float:right"><a href="#about">About</a></li>

</ul>

</body>

</html>

Home News Contact About

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 class="active" href="#home">Home</a></li>

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

<p>Some text some text some text some text..</p>

</div>

</body>

</html>

Home News Contact About

Fixed Top Navigation Bar

Scroll this page to see the effect

The navigation bar will stay at the top of the page while scrolling

Some text some text some text some text..

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:0;}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

position: fixed;

bottom: 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 class="active" href="#home">Home</a></li>

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

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

</ul>

<h1>Fixed Bottom Navigation Bar</h1>

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

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

<p>Some text some text some text some text..</p>

</div>

</body>

</html>

Fixed Bottom Navigation Bar

Scroll this page to see the effect

The navigation bar will stay at the bottom of the page while scrolling

Some text some text some text some text..

text some text some text some text..

Some text some text some text some text..

Home News Contact About

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 class="active" href="#home">Home</a></li>

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

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

</ul>

</body>

</html>

Home News Contact About

CSS Dropdowns
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;

z-index: 1;

.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>

<div class="dropdown-content">
<p>Hello World!</p>

</div>

</body>

</html>

Hoverable Dropdown

Move the mouse over the text below to open the dropdown content.

Mouse over me

Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:

<!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);

z-index: 1;

.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>

<a href="#">Link 1</a>

<a href="#">Link 3</a>

</div>

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

</body>

</html>

Dropdown Menu

Move the mouse over the button to open the dropdown menu.

Dropdown

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

Right-aligned Dropdown Content

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

right: 0;

background-color: #f9f9f9;

min-width: 160px;

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

z-index: 1;

}
.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>Aligned Dropdown Content</h2>

<p>Determine whether the dropdown content should go from left to right or right to
left with the left and right properties.</p>

<div class="dropdown" style="float:left;">

<div class="dropdown-content" style="left:0;">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

<div class="dropdown" style="float:right;">

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

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</body>
</html>

Aligned Dropdown Content

Determine whether the dropdown content should go from left to right or right to left
with the left and right properties.

Left Right

Dropdown Navbar
How to add a dropdown menu inside a navigation bar.

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

li {

float: left;

}
li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

li.dropdown {

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

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

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

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</li>

</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>

</html>

Home News Dropdown

Dropdown Menu inside a Navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.

Dropdown Image
How to add an image and other content inside the dropdown box.
<!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);

z-index: 1;

.dropdown:hover .dropdown-content {

display: block;

}
.desc {

padding: 15px;

text-align: center;

</style>

</head>

<body>

<h2>Dropdown Image</h2>

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

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50">

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

<div class="desc">Beautiful Trolltunga, Norway</div>

</div>

</body>

</html>
Dropdown Image

Move the mouse over the image below to open the dropdown content.

CSS Tooltip
Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;
color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial
and continue reading on how to position the tooltip in a desirable way.</p>

</body>

</html>

Move the mouse over the text below:

Hover over me

Note that the position of the tooltip text isn't very good. Go back to the tutorial and
continue reading on how to position the tooltip in a desirable way.

Positioning Tooltips
In this example, the tooltip is placed to the right (left:105%) of the "hoverable"
text (<div>). Also note that top:-5px is used to place it in the middle of its
container element. We use the number 5 because the tooltip text has a top and
bottom padding of 5px. If you increase its padding, also increase the value of
the top property to ensure that it stays in the middle (if this is something you
want). The same applies if you want the tooltip placed to the left

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}
.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

top: -5px;

left: 105%;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<body style="text-align:center;">
<h2>Right Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Right Tooltip

Move the mouse over the text below:

Hover over me

Left Tooltip
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}
.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

top: -5px;

right: 105%;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<body style="text-align:center;">
<h2>Left Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Left Tooltip

Move the mouse over the text below:

Hover over me

Top Tooltip
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

bottom: 100%;

left: 50%;

margin-left: -60px;

.tooltip:hover .tooltiptext {

visibility: visible;

}
</style>

<h2>Top Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Top Tooltip

Move the mouse over the text below:

Hover over me

Bottom Tooltip
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;
display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

top: 100%;

left: 50%;

margin-left: -60px;

.tooltip:hover .tooltiptext {
visibility: visible;

</style>

<h2>Bottom Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Bottom Tooltip

Move the mouse over the text below:

Hover over me

Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add
"empty" content after tooltip, with the pseudo-element class ::after together
with the content property. The arrow itself is created using borders. This will
make the tooltip look like a speech bubble.

This example demonstrates how to add an arrow to the bottom of the tooltip:
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 150%;

left: 50%;

margin-left: -60px;
}

.tooltip .tooltiptext::after {

content: "";

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: black transparent transparent transparent;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Top Tooltip w/ Bottom Arrow

Hover over me

Top Arrow
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;
text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

top: 150%;

left: 50%;

margin-left: -60px;

.tooltip .tooltiptext::after {

content: "";

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent black transparent;

.tooltip:hover .tooltiptext {
visibility: visible;

</style>

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Bottom Tooltip w/ Top Arrow

Hover over me

Left Arrow
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;
border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

top: -5px;

left: 110%;

.tooltip .tooltiptext::after {

content: "";

position: absolute;

top: 50%;

right: 100%;
margin-top: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent black transparent transparent;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Right Tooltip w/ Left Arrow

Hover over me
Right Arrow
<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

top: -5px;
right: 110%;

.tooltip .tooltiptext::after {

content: "";

position: absolute;

top: 50%;

left: 100%;

margin-top: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent transparent black;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Left Tooltip w/ Right Arrow

Hover over me

Fade In Tooltips (Animation)

If you want to fade in the tooltip text when it is about to be visible, you can use
the CSS3 transition property together with the opacity property, and go
from being completely invisible to 100% visible, in a number of specified
seconds (1 second in our example):

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;
width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 100%;

left: 50%;

margin-left: -60px;

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */

opacity: 0;

transition: opacity 1s;

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>

<p>When you move the mouse over the text below, the tooltip text will fade in and
take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

Fade In Tooltip on Hover

When you move the mouse over the text below, the tooltip text will fade in and take 1
second to go from completely invisible to visible.

Hover over me

CSS Image Gallery
<!DOCTYPE html>

<html>

<head>

<style>

div.gallery {
margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

div.gallery:hover {

border: 1px solid #777;

div.gallery img {

width: 100%;

height: auto;

div.desc {

padding: 15px;

text-align: center;

</style>

</head>

<a target="_blank" href="img_fjords.jpg">

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

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

</div>

<a target="_blank" href="img_forest.jpg">

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

</a>

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

</div>

<a target="_blank" href="img_lights.jpg">

<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">

</a>

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

</div>
<div class="gallery">

<a target="_blank" href="img_mountains.jpg">

<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">

</a>

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

</div>

</body>

</html>

Add a description of the image here

CSS Image Sprites
Create a Navigation List
<!DOCTYPE html>

<style>

#navlist {

position: relative;

#navlist li {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

top: 0;

#navlist li, #navlist a {

height: 44px;

display: block;

#home {

left: 0px;

width: 46px;
background: url('img_navsprites.gif') 0 0;

#prev {

left: 63px;

width: 43px;

background: url('img_navsprites.gif') -47px 0;

#next {

left: 129px;

width: 43px;

background: url('img_navsprites.gif') -91px 0;

</style>

</head>

<body>

<li id="home"><a href="default.asp"></a></li>

<li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li>

</ul>

</body>

</html>

Image Sprites - Hover Effect

<!DOCTYPE html>

<html>

<head>

<style>

#navlist {

position: relative;

#navlist li {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

top: 0;

}
#navlist li, #navlist a {

height: 44px;

display: block;

#home {

left: 0px;

width: 46px;

background: url('img_navsprites_hover.gif') 0 0;

#prev {

left: 63px;

width: 43px;

background: url('img_navsprites_hover.gif') -47px 0;

#next {

left: 129px;

width: 43px;

background: url('img_navsprites_hover.gif') -91px 0;

}
#home a:hover {

background: url('img_navsprites_hover.gif') 0 -45px;

#prev a:hover {

background: url('img_navsprites_hover.gif') -47px -45px;

#next a:hover {

background: url('img_navsprites_hover.gif') -91px -45px;

</style>

</head>

<body>

<li id="home"><a href="default.asp"></a></li>

<li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li>

</ul>
</body>

</html>

CSS Forms
<!DOCTYPE html>

<html>

<style>

input[type=text], select {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

input[type=submit] {

width: 100%;

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

input[type=submit]:hover {

background-color: #45a049;

div {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

</style>

<body>

<h3>Using CSS to style an HTML Form</h3>

<div>

<form action="/action_page.php">
<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="country">Country</label>

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>

</select>

<input type="submit" value="Submit">

</form>

</div>

</body>

</html>

Using CSS to style an HTML Form

First Name
Last Name

Country

Submit
Styling Input Fields
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>

<p>A full-width input field:</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>

</body>

A full-width input field:

First Name
Padded Inputs
Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add
some margin, to add more space outside of them:

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

</style>

</head>

<body>

<p>Padded text fields:</p>

<form>

<label for="fname">First Name</label>

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

Padded text fields:

First Name

Last Name

Bordered Inputs
Use the border property to change the border size and color, and use
the border-radius property to add rounded corners:

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;
box-sizing: border-box;

border: 2px solid red;

border-radius: 4px;

</style>

</head>

<body>

<p>Text fields with borders:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

Text fields with borders:

First Name

Last Name
If you only want a bottom border, use the border-bottom property:

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

border: none;

border-bottom: 2px solid red;

</style>

</head>

<body>

<p>Text fields with only a bottom border:</p>

<form>

<label for="fname">First Name</label>

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

</html>

Text fields with only a bottom border:

First Name

Last Name

Colored Inputs
Use the background-color property to add a background color to the input,
and the color property to change the text color:

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;
box-sizing: border-box;

border: none;

background-color: #3CBC8D;

color: white;

</style>

</head>

<body>

<p>Colored text fields:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname" value="John">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname" value="Doe">

</form>

</body>

</html>

Colored text fields:

First Name
John

Last Name
Doe

Focused Inputs
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding outline: none; to
the input.

Use the :focus selector to do something with the input field when it gets focus:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}

input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a background color to the text
field when it gets focused (clicked on):</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>

In this example, we use the :focus selector to add a background color to the text field
when it gets focused (clicked on):

First Name
John

Last Name
Doe

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border color to
the text field when it gets focused (clicked on):</p>
<p>Note that we have added the CSS3 transition property to animate the
border color (takes 0.5 seconds to change the color on focus).</p>

</body>
</html>

In this example, we use the :focus selector to add a black border color to the text field
when it gets focused (clicked on):

Note that we have added the CSS3 transition property to animate the border color
(takes 0.5 seconds to change the color on focus).

First Name
John

Last Name
Doe

Input with icon/image

If you want an icon inside the input, use the background-image property and
position it with the background-position property. Also notice that we add a
large left padding to reserve the space of the icon:

<!DOCTYPE html>

<html>

<head>

width: 100%;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

font-size: 16px;

background-color: white;

background-position: 10px 10px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

</style>

</head>

<body>

<p>Input with icon:</p>

<form>

<input type="text" name="search" placeholder="Search..">

</form>
</body>

</html>

Input with icon:

Animated Search Input

In this example we use the CSS3 transition property to animate the width of
the search input when it gets focus. You will learn more about
the transition property later, in our CSS3 Transitions chapter.

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 130px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

font-size: 16px;

background-color: white;

background-position: 10px 10px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

-webkit-transition: width 0.4s ease-in-out;

transition: width 0.4s ease-in-out;

input[type=text]:focus {

width: 100%;

</style>

</head>

<body>

<p>Animated search input:</p>

<form>

<input type="text" name="search" placeholder="Search..">

</form>

</body>

</html>

Animated search input:

Styling Textareas
Tip: Use the resize property to prevent textareas from being resized (disable
the "grabber" in the bottom right corner):

<!DOCTYPE html>

<html>

<head>

<style>

textarea {

width: 100%;

height: 150px;

padding: 12px 20px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

font-size: 16px;

resize: none;

</style>

</head>

<body>
<p><strong>Tip:</strong> Use the resize property to prevent textareas from being
resized (disable the "grabber" in the bottom right corner):</p>

<form>

</form>

</body>

</html>

Tip: Use the resize property to prevent textareas from being resized (disable the
"grabber" in the bottom right corner):

Styling Select Menus

<!DOCTYPE html>

<html>

<head>

<style>

select {

width: 100%;

padding: 16px 20px;

border: none;
border-radius: 4px;

background-color: #f1f1f1;

</style>

</head>

<body>

<p>A styled select menu.</p>

<form>

<select id="country" name="country">

<option value="au">Australia</option>

<option value="ca">Canada</option>

</select>

</form>

</body>

</html>

A styled select menu.

Styling Input Buttons
<!DOCTYPE html>

<html>

<head>

<style>

input[type=button], input[type=submit], input[type=reset] {

background-color: #4CAF50;

border: none;

color: white;

padding: 16px 32px;

text-decoration: none;

margin: 4px 2px;

cursor: pointer;

</style>

</head>

<body>

<p>Styled input buttons.</p>

<input type="button" value="Button">

<input type="reset" value="Reset">

</body>

</html>

Styled input

buttons.

Reset Submit

CSS Counters
Automatic Numbering With Counters
CSS counters are like "variables". The variable values can be incremented by
CSS rules (which will track how many times they are used).

To work with CSS counters we will use the following properties:

 counter-reset - Creates or resets a counter

 counter-increment - Increments a counter value
 content - Inserts generated content
 counter() or counters() function - Adds the value of a counter to an
element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector),
then increments the counter value for each <h2> element and adds "Section
<value of the counter>:" to the beginning of each <h2> element:

<!DOCTYPE html>

<style>

body {

counter-reset: section;

h2::before {

counter-increment: section;

content: "Section " counter(section) ": ";

</style>

</head>

<body>

<h1>Using CSS Counters:</h1>

<h2>HTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>

</html>

Using CSS Counters:

Section 1: HTML Tutorial

Section 2: CSS Tutorial

Section 3: JavaScript Tutorial

Note: IE8 supports these properties only if a !DOCTYPE is specified.

Nesting Counters
The following example creates one counter for the page (section) and one
counter for each <h1> element (subsection). The "section" counter will be
counted for each <h1> element with "Section <value of the section counter>.",
and the "subsection" counter will be counted for each <h2> element with
"<value of the section counter>.<value of the subsection counter>":

<!DOCTYPE html>

<html>

<head>

<style>

body {

counter-reset: section;

h1 {

counter-reset: subsection;
}

h1::before {

counter-increment: section;

content: "Section " counter(section) ". ";

h2::before {

counter-increment: subsection;

content: counter(section) "." counter(subsection) " ";

</style>

</head>

<body>

<h1>HTML tutorials:</h1>

<h2>HTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>

<h2>VBScript</h2>

<h1>XML tutorials:</h1>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>

</html>

Section 1: HTML tutorials:

1.1 HTML Tutorial

1.2 CSS Tutorial

Section 2: Scripting tutorials:

2.1 JavaScript

2.2 VBScript

Section 3: XML tutorials:

3.1 XML

3.2 XSL

Note: IE8 supports these properties only if a !DOCTYPE is specified.

A counter can also be useful to make outlined lists because a new instance of a
counter is automatically created in child elements. Here we use
the counters() function to insert a string between different levels of nested
counters:

<!DOCTYPE html>

<html>

<head>

<style>

ol {

counter-reset: section;

list-style-type: none;

li::before {

counter-increment: section;

content: counters(section,".") " ";

</style>

</head>

<li>item

<ol>

<li>item

<ol>

</ol>

</li>

</ol>

</li>

</ol>

<ol>

</ol>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>

</html>

1. item
2. item
1. item
2. item
3. item
1. item
2. item
3. item
4. item
3. item
4. item

1. item
2. item

Note: IE8 supports these properties only if a !DOCTYPE is specified.

CSS Website Layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
}

/* Style the header */

.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}

/* Style the top navigation bar */

.topnav {
overflow: hidden;
background-color: #333;
}

/* Change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create three equal columns that floats next to each other */

.column {
float: left;
width: 33.33%;
padding: 15px;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of
next to each other */
@media (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna
tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros,
eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan
convallis.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna
tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros,
eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan
convallis.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna
tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros,
eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan
convallis.</p>
</div>
</div>

</body>
</html>

Header
Resize the browser window to see the responsive effect.

LinkLinkLink

Column pretium urna. Vivamus aliquam placerat, purus

venenatis velit nec leo tincidunt eros, eget
Lorem ipsum dolor sit neque ultricies, eget luctus quam orci in
amet, consectetur elementum magna velit. Praesent
adipiscing elit. tristique. Quisque scelerisque tortor sed
Maecenas sit amet vehicula, risus eget accumsan
convallis.olumnLorem velit. Praesent elementum magna
ipsum dolor sit amet, scelerisque tortor sed tristique. Quisque
consectetur adipiscing accumsan convallis. vehicula, risus eget
elit. Maecenas sit amet aliquam placerat, purus
pretium urna. Vivamus Column leo tincidunt eros, eget
venenatis velit nec luctus quam orci in
neque ultricies, eget Lorem ipsum dolor sit velit. Praesent
elementum magna amet, consectetur scelerisque tortor sed
tristique. Quisque adipiscing elit. accumsan convallis.
vehicula, risus eget Maecenas sit amet
aliquam placerat, purus pretium urna. Vivamus
leo tincidunt eros, eget venenatis velit nec
luctus quam orci in neque ultricies, eget

Footer
The footer is placed at the bottom of your page. It often contains information
like copyright and contact info:

<!DOCTYPE html>

<head>

<title>CSS Website Layout</title>

<meta charset="utf-8"> /*Character encoding for Unicode

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

box-sizing: border-box;

}
body {

margin: 0;

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;
}

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

/* Create three unequal columns that floats next to each other */

.column {

float: left;

padding: 10px;

/* Left and right column */

.column.side {

width: 25%;

/* Middle column */

.column.middle {

width: 50%;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other
*/

@media (max-width: 600px) {

.column.side, .column.middle {

width: 100%;

/* Style the footer */

.footer {

background-color: #f1f1f1;

padding: 10px;

text-align: center;

</style>

</head>

<body>

<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>

</div>

</div>

<div class="column side">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

<div class="column middle">

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus
venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed
accumsan convallis.</p>

</div>

<div class="column side">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

<p>Footer</p>

</div>

</body>

</html>

Header
Resize the browser window to see the responsive effect.

LinkLinkLink

Side elementum magna neque ultricies, eget

tristique. Quisque elementum magna
Lorem ipsum dolor sit vehicula, risus eget tristique. Quisque
amet, consectetur aliquam placerat, purus vehicula, risus eget
adipiscing elit.. leo tincidunt eros, eget aliquam placerat, purus
luctus quam orci in leo tincidunt eros, eget
Main Content velit. Praesent luctus quam orci in
scelerisque tortor sed velit. Praesent
Lorem ipsum dolor sit accumsan convallis. scelerisque tortor sed
amet, consectetur accumsan convallis.
adipiscing elit. Lorem ipsum dolor sit
Maecenas sit amet amet, consectetur Side
pretium urna. Vivamus adipiscing elit.
venenatis velit nec Maecenas sit amet Lorem ipsum dolor sit
neque ultricies, eget pretium urna. Vivamus amet, consectetur
venenatis velit nec adipiscing elit..

Footer
CSS3 Introduction
CSS3 is the latest standard for CSS.

CSS3 is completely backwards-compatible with earlier versions of CSS.

This section teaches you about the new features in CSS3!

CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification"
(which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

Most of the new CSS3 properties are implemented in modern browsers.

CSS3 Rounded Corners
CSS3 border-radius Property
With CSS3, you can give any element "rounded corners", by using the border-
radius property.

Here are three examples:

<!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-radius - Specify Each Corner
If you specify only one value for the border-radius property, this radius will be
applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the
rules:

 Four values: first value applies to top-left, second value applies to top-

right, third value applies to bottom-right, and fourth value applies to
bottom-left corner
 Three values: first value applies to top-left, second value applies to top-
right and bottom-left, and third value applies to bottom-right
 Two values: first value applies to top-left and bottom-right corner, and
the second value applies to top-right and bottom-left corner
 One value: all four corners are rounded equally

Here are three examples:

1. Four values - border-radius: 15px 50px 30px 5px:

2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:

Here is the code:

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners4 {

border-radius: 15px 50px 30px 5px;

background: #73AD21;

padding: 20px;

width: 200px;
height: 150px;

#rcorners5 {

border-radius: 15px 50px 30px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

#rcorners6 {

border-radius: 15px 50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

</style>

</head>

<body>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>

<p id="rcorners4"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>

<p>Two values - border-radius: 15px 50px:</p>

</body>

</html>
CSS3 Border Images
Browser Support
The numbers in the table specify the first browser version that fully supports the
property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that
worked with a prefix.

Property
border-image 16.0 11.0 15.0 6.0
4.0 -webkit- 3.5 -moz- 3.1 -webk

CSS3 border-image Property

The CSS3 border-image property allows you to specify an image to be used
instead of the normal border around an element.

The property has three parts:

1. The image to use as the border

2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "border.png"):

The border-image property takes the image and slices it into nine sections, like
a tic-tac-toe board. It then places the corners at the corners, and the middle
sections are repeated or stretched as you specify.

Note: For border-image to work, the element also needs the border property

set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

<!DOCTYPE html>

<html>

#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>

The border-image property specifies an image to be used as the border around an

element:

Here, the middle sections of the image are repeated to create the border.
Here is the original image:

Note: Internet Explorer 10, and earlier versions, do not support the border-image
property.

Here, the middle sections of the image are stretched to create the border:

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

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

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

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

</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 stretched 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>

The border-image property specifies an image to be used as the border around an

element:

Here, the middle sections of the image are stretched to create the border.

Here is the original image:

Note: Internet Explorer 10, and earlier versions, do not support the border-image
property.

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
Browser Support
The numbers in the table specify the first browser version that fully supports the
property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that
worked with a prefix.

Property

background-image 4.0 9.0 3.6 3.1

(with multiple
backgrounds)

background-size 4.0 9.0 4.0 4.1

1.0 -webkit- 3.6 -moz- 3.0 -web

background-origin 1.0 9.0 4.0 3.0

background-clip 4.0 9.0 4.0 3.0

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>

#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>

<div id="example2">
<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>

The two other possible values for background-

size are contain and cover.
The contain keyword scales the background image to be as large as possible
(but both its width and its height must fit inside the content area). As such,
depending on the proportions of the background image and the background
positioning area, there may be some areas of the background which are not
covered by the background image.

The cover keyword scales the background image so that the content area is

completely covered by the background image (both its width and height are
equal to or exceed the content area). As such, some parts of the background
image may not be visible in the background positioning area.

The following example illustrates the use of contain and cover:

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

.div2 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;
background-size: contain;

.div3 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

background-size: cover;

</style>

</head>

<body>

<p>Original image:</p>

<p>Lorem ipsum dolor sit amet.</p>

</div>

<p>Using the "contain" keyword:</p>

<p>Lorem ipsum dolor sit amet.</p>

</div>
<p>Using the "cover" keyword:</p>

<p>Lorem ipsum dolor sit amet.</p>

</div>

</body>

</html>
Define Sizes of Multiple Background Images
The background-size property also accepts multiple values for background size
(using a comma-separated list), when working with multiple backgrounds.

The following example has three background images specified, with different
background-size value for each image:

<!DOCTYPE html>
<html>

<head>

<style>

#example1 {

background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right

bottom no-repeat, url(paper.gif) left top repeat;

padding: 15px;

background-size: 50px, 130px, auto;

</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>
Full Size Background Image
Now we want to have a background image on a website that covers the entire
browser window at all times.

The requirements are as follows:

 Fill the entire page with the image (no white space)
 Scale image as needed
 Center image on page
 Do not cause scrollbars

The following example shows how to do it; Use the html element (the html
element is always at least the height of the browser window). Then set a fixed
and centered background on it. Then adjust its size with the background-size
property:

<!DOCTYPE html>

<html>

<head>

<style>

html {

background: url(img_flower.jpg) no-repeat center fixed;

background-size: cover;

}
body {

color: white;

</style>

</head>

<body>

<h1>Full Page Background Image</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>
CSS3 background-origin Property
The CSS3 background-origin property specifies where the background image
is positioned.

The property takes three different values:

 border-box - the background image starts from the upper left corner of
the border
 padding-box - (default) the background image starts from the upper left
corner of the padding edge
 content-box - the background image starts from the upper left corner of
the content

The following example illustrates the background-origin property:

<!DOCTYPE html>
<html>

<head>

<style>

#example1 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

#example2 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: border-box;

#example3 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: content-box;

}
</style>

</head>

<body>

<p>No background-origin (padding-box is default):</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>background-origin: border-box:</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>background-origin: content-box:</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 background-clip Property
The CSS3 background-clip property specifies the painting area of the
background.

The property takes three different values:

 border-box - (default) the background is painted to the outside edge of

the border
 padding-box - the background is painted to the outside edge of the
padding
 content-box - the background is painted within the content box

The following example illustrates the background-clip property:

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

#example2 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: padding-box;

}
#example3 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

</style>

</head>

<body>

<p>No background-clip (border-box is default):</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>

</div>

<p>background-clip: padding-box:</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>

</div>
<p>background-clip: content-box:</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>

</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)

Browser Support
The numbers in the table specify the first browser version that fully supports the
property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that
worked with a prefix.

Property

linear-gradient 26.0 10.0 16.0 6.1

10.0 -webkit- 3.6 -moz- 5.1 -webk

radial-gradient 26.0 10.0 16.0 6.1

10.0 -webkit- 3.6 -moz- 5.1 -webk

repeating-linear-gradient 26.0 10.0 16.0 6.1

10.0 -webkit- 3.6 -moz- 5.1 -webk

repeating-radial-gradient 26.0 10.0 16.0 6.1

10.0 -webkit- 3.6 -moz- 5.1 -webk
CSS3 Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops
are the colors you want to render smooth transitions among. You can also set a
starting point and a direction (or an angle) along with the gradient effect.

Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

<!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>

<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support
gradients.</p>

</body>
</html>

Linear Gradient - Left to Right

The following example shows a linear gradient that starts from the left. It starts
red, transitioning to yellow:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

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

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

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

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

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

be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Left to Right</h3>

<p>This linear gradient starts at the left. It starts red, transitioning to

yellow:</p>

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

support gradients.</p>

</body>

</html>
Linear Gradient - Diagonal

You can make a gradient diagonally by specifying both the horizontal and
vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes
to bottom right). It starts red, transitioning to yellow:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

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

background: -webkit-linear-gradient(left top, red, yellow); /* For

Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* For
Opera 11.1 to 12.0 */

background: -moz-linear-gradient(bottom right, red, yellow); /* For

Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, red, yellow); /* Standard

syntax (must be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Diagonal</h3>

<p>This linear gradient starts at top left. It starts red, transitioning to

yellow:</p>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support gradients.</p>

</body>

</html>

Using Angles
If you want more control over the direction of the gradient, you can define an
angle, instead of the predefined directions (to bottom, to top, to right, to left, to
bottom right, etc.).
Syntax
background: linear-gradient(angle, color-stop1, color-stop2);

The angle is specified as an angle between a horizontal line and the gradient
line.

The following example shows how to use angles on linear gradients:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 100px;

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

background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari

5.1 to 6.0 */

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

to 12.0 */

background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox

3.6 to 15 */

background: linear-gradient(0deg, red, yellow); /* Standard syntax

(must be last) */

#grad2 {

height: 100px;

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

background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari

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

background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox

3.6 to 15 */

background: linear-gradient(90deg, red, yellow); /* Standard syntax

(must be last) */

#grad3 {

height: 100px;

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

background: -webkit-linear-gradient(180deg, red, yellow); /* For

Safari 5.1 to 6.0 */

background: -o-linear-gradient(180deg, red, yellow); /* For Opera

11.1 to 12.0 */

background: -moz-linear-gradient(180deg, red, yellow); /* For Firefox

3.6 to 15 */

background: linear-gradient(180deg, red, yellow); /* Standard syntax

(must be last) */

#grad4 {

height: 100px;

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

background: -webkit-linear-gradient(-90deg, red, yellow); /* For

Safari 5.1 to 6.0 */

background: -o-linear-gradient(-90deg, red, yellow); /* For Opera

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

background: linear-gradient(-90deg, red, yellow); /* Standard syntax

(must be last) */

</style>

</head>

<body>

<h3>Linear Gradients - Using Different Angles</h3>

<div id="grad1" style="color:white;text-align:center;">0deg</div><br>

<div id="grad2" style="color:white;text-

align:center;">90deg</div><br>

<div id="grad3" style="color:white;text-

align:center;">180deg</div><br>

<div id="grad4" style="color:white;text-align:center;">-90deg</div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support gradients.</p>

</body>

</html>
Using Multiple Color Stops
The following example shows a linear gradient (from top to bottom) with
multiple color stops:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

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

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

to 12.0 */

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

3.6 to 15 */

background: linear-gradient(red, yellow, green); /* Standard syntax

(must be last) */

#grad2 {

height: 200px;

background: -webkit-linear-gradient(red, orange, yellow, green, blue,

indigo, violet); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, orange, yellow, green, blue,

indigo, violet); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, orange, yellow, green, blue,

indigo, violet); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, orange, yellow, green, blue, indigo,

violet); /* Standard syntax (must be last) */

#grad3 {

height: 200px;

background: -webkit-linear-gradient(red 10%, green 85%, blue 90%);

/* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red 10%, green 85%, blue 90%); /*

For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /*
For Firefox 3.6 to 15 */

background: linear-gradient(red 10%, green 85%, blue 90%); /*

Standard syntax (must be last) */

</style>

</head>

<body>

<h3>3 Color Stops (evenly spaced)</h3>

<h3>7 Color Stops (evenly spaced)</h3>

<h3>3 Color Stops (not evenly spaced)</h3>

<p><strong>Note:</strong> Color stops are automatically spaced

evenly when no percents are specified.</p>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support gradients.</p>

</body>
</html>

Using Transparency
CSS3 gradients also support transparency, which can be used to create fading
effects.
To add transparency, we use the rgba() function to define the color stops. The
last parameter in the rgba() function can be a value from 0 to 1, and it defines
the transparency of the color: 0 indicates full transparency, 1 indicates full color
(no transparency).

The following example shows a linear gradient that starts from the left. It starts
fully transparent, transitioning to full color red:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(255,0,0,0),

rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /*

For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, rgba(255,0,0,0),

rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*

Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Transparency</h3>

<p>To add transparency, we use the rgba() function to define the color stops.
The last parameter in the rgba() function can be a value from 0 to 1, and it
defines the transparency of the color: 0 indicates full transparency, 1 indicates
full color (no transparency).</p>

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

support gradients.</p>

</body>

</html>

Repeating a linear-gradient
The repeating-linear-gradient() function is used to repeat linear gradients:

<!DOCTYPE html>
<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-repeating-linear-gradient(red, yellow 10%, green

20%); /* For Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(red, yellow 10%, green

20%); /* For Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(red, yellow 10%, green

20%); /* For Firefox 3.6 to 15 */

background: repeating-linear-gradient(red, yellow 10%, green

20%); /* Standard syntax (must be last) */

#grad2 {

height: 200px;

background: -webkit-repeating-linear-gradient(45deg,red,yellow
7%,green 10%); /* For Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(45deg,red,yellow 7%,green

10%); /* For Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(45deg,red,yellow
7%,green 10%); /* For Firefox 3.6 to 15 */

background: repeating-linear-gradient(45deg,red,yellow 7%,green

10%); /* Standard syntax (must be last) */

#grad3 {
height: 200px;

background: -webkit-repeating-linear-gradient(190deg,red,yellow
7%,green 10%); /* For Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(190deg,red,yellow 7%,green

10%); /* For Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(190deg,red,yellow
7%,green 10%); /* For Firefox 3.6 to 15 */

background: repeating-linear-gradient(190deg,red,yellow 7%,green

10%); /* Standard syntax (must be last) */

#grad4 {

height: 200px;

background: -webkit-repeating-linear-gradient(90deg,red,yellow
7%,green 10%); /* For Safari 5.1 to 6.0 */

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

background: -moz-repeating-linear-gradient(90deg,red,yellow
7%,green 10%); /* For Firefox 3.6 to 15 */

background: repeating-linear-gradient(90deg,red,yellow 7%,green

10%); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Repeating Linear Gradient</h3>

<p>A repeating gradient on 45deg axe starting red and finishing

green:</p>

<p>A repeating gradient on 190deg axe starting red and finishing

green:</p>

<p>A repeating gradient on 90deg axe starting red and finishing

green:</p>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support gradients.</p>

</body>

</html>
CSS3 Radial Gradients
A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax
background: radial-gradient(shape size at position, start-color, ..., last-
color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

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

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

background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to

12.0 */

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

15 */

background: radial-gradient(red, yellow, green); /* Standard syntax (must

be last) */

</style>

</head>

<body>

<h3>Radial Gradient - Evenly Spaced Color Stops</h3>

<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not
support gradients.</p>

</body>

</html>

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color
stops:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

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

background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /*
Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For

Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For

Firefox 3.6 to 15 */

background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard

syntax (must be last) */

</style>

</head>

<body>

<h3>Radial Gradient - Differently Spaced Color Stops</h3>

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

support gradients.</p>

</body>

</html>
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse.
The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

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

6.0 */

background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to

12.0 */

background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */

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

#grad2 {

height: 150px;

width: 200px;

background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari

5.1 to 6.0 */

background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6

to 12.0 */

background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to

15 */

background: radial-gradient(circle, red, yellow, green); /* Standard syntax

(must be last) */

</style>

</head>

<body>

<h3>Radial Gradient - Shapes</h3>

<p><strong>Ellipse (this is default):</strong></p>

<p><strong>Circle:</strong></p>

<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not
support gradients.</p>

</body>

</html>

Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:

<!DOCTYPE html>

<style>

#grad1 {

height: 150px;

width: 200px;

background: -webkit-repeating-radial-gradient(red, yellow 10%, green

15%); /* For Safari 5.1 to 6.0 */

background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /*

For Opera 11.6 to 12.0 */

background: -moz-repeating-radial-gradient(red, yellow 10%, green

15%); /* For Firefox 3.6 to 15 */

background: repeating-radial-gradient(red, yellow 10%, green 15%); /*

Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Repeating Radial Gradient</h3>

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

support gradients.</p>

</body>

</html>
CSS3 Shadow Effects
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

Browser Support
The numbers in the table specify the first browser version that fully supports the
property.

Numbers followed by -webkit- or -moz- specifies the first version that worked
with a prefix.

Property
text-shadow 4.0 10.0 3.5 4.0

box-shadow 10.0 9.0 4.0 5.1

4.0 -webkit- 3.5 -moz- 3.1 -webk

CSS3 Text Shadow

The CSS3 text-shadow property applies shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px):

Text shadow effect!

Example
<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px;

</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>

Next, add a color to the 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>

Then, add a blur effect to the shadow:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px 5px 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>

The following example shows a white text with black shadow:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

</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>

Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list
of shadows.

The following example shows a red and blue neon glow shadow:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

</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>

You can also use the text-shadow property to create a plain border
around some text (without shadows):

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: yellow;

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
</style>

</head>

<body>

<h1>Border around text!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the

text-shadow property.</p>

</body>

</html>

CSS3 box-shadow Property

The CSS3 box-shadow property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical
shadow:

<!DOCTYPE html>

<html>

<head>

<style>
div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>

Next, add a color to the shadow:

<!DOCTYPE html>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px grey;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>

Next, add a blur effect to the shadow:

<!DOCTYPE html>
<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px 5px grey;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>
Cards
An example of using the box-shadow property to create paper-like cards:

<!DOCTYPE html>

<html>

<head>

<style>

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

div.header {

background-color: #4CAF50;

color: white;

padding: 10px;

font-size: 40px;

div.container {

padding: 10px;

</style>

</head>
<body>

<h2>Cards</h2>

<p>The box-shadow property can be used to create paper-like cards:</p>

</div>

<p>January 1, 2016</p>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

div.polaroid {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

div.container {

padding: 10px;
}

</style>

</head>

<body>

<h2>Polaroid Images / Cards</h2>

<p>The box-shadow property can be used to create paper-like cards:</p>

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

<p>Hardanger, Norway</p>

</div>

</body>

</html>
CSS3 Text
CSS3 Text
CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

 text-overflow
 word-wrap
 word-break

Browser Support
The numbers in the table specify the first browser version that fully supports the
property.

Numbers followed by -o- specify the first version that worked with a prefix.
Property

text-overflow 4.0 6.0 7.0 3.1

word-wrap 23.0 5.5 3.5 6.1

word-break 4.0 5.5 15.0 3.1

CSS3 Text Overflow

The CSS3 text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user.

It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (...):

This is some long text that will not fit in the box

The CSS code is as follows:

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

</style>

</head>

<body>

<p>The following two paragraphs contains a long text that will not fit in the
box.</p>

<p>text-overflow: clip:</p>

<p>text-overflow: ellipsis:</p>

</body>
</html>

The following example shows how you can display the overflowed content
when hovering over the element:
<!DOCTYPE html>

<html>

<head>

<style>

div.test {

white-space: nowrap;

width: 200px;

overflow: hidden;

border: 1px solid #000000;

div.test:hover {

text-overflow: inherit;

overflow: visible;

</style>

</head>

<body>

<p>Hover over the two divs below, to see the entire text.</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text

that will not fit in the box</div>

<br>

<div class="test" style="text-overflow:clip;">This is some long text that

will not fit in the box</div>
</body>

</html>

CSS3 Word Wrapping

The CSS3 word-wrap property allows long words to be able to be broken and
wrap onto the next line.

<!DOCTYPE html>

<html>

<head>

<style>

p.test {

width: 11em;

border: 1px solid #000000;

word-wrap: break-word;

</style>

</head>

<body>

<p class="test"> This paragraph contains a very long word:

thisisaveryveryveryveryveryverylongword. The long word will break and wrap to
the next line.</p>

</body>

</html>
CSS3 Word Breaking
The CSS3 word-break property specifies line breaking rules.

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

p.test2 {

width: 140px;

border: 1px solid #000000;

word-break: break-all;

</style>
</head>

<body>

<p class="test1">This paragraph contains some text. This line will-break-

at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break
at any character.</p>

<p><b>Note:</b> The word-break property is not supported in Opera

12 and earlier versions.</p>

</body>

</html>

CSS3 Web Fonts
Using The Font You Want
In the CSS3 @font-face rule you must first define a name for the font (e.g.
myFirstFont), and then point to the font file.

Tip: Always use lowercase letters for the font URL. Uppercase letters can give
unexpected results in IE.

To use the font for an HTML element, refer to the name of the font
(myFirstFont) through the font-family property:

<!DOCTYPE html>

<html>

<head>

<style>

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

div {

font-family: myFirstFont;

</style>

</head>

<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-
safe" fonts.

</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-

face rule.</p>

</body>

</html>

With CSS3, websites can finally use fonts other than the pre-selected "web-safe"
fonts.

Note: Internet Explorer 8 and earlier, do not support the @font-face rule.

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

<!DOCTYPE html>

<html>

<head>

<style>

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

@font-face {

font-family: myFirstFont;
src: url(sansation_bold.woff);

font-weight: bold;

div {

font-family: myFirstFont;

</style>

</head>

<body>

<div>

With CSS3, websites can <b>finally</b> use fonts other than the pre-selected
"web-safe" fonts.

</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-

face rule.</p>

</body>

</html>

With CSS3, websites can finally use fonts other than the pre-selected "web-safe"
fonts.

Note: Internet Explorer 8 and earlier, do not support the @font-face rule.

CSS3 2D Transforms
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>

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>

Using negative values will rotate the element counter-clockwise.

The following example rotates the <div> element counter-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 counter-clockwise with 20 degrees.

</div>

</body>

</html>
The scale() Method
The scale() method increases or decreases the size of an element (according
to the parameters given for the width and height).

The following example increases the <div> element to be two times of its
original width, and three times of its original height:

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari */

transform: scale(2,3); /* Standard syntax */

</style>

</head>

<body>

<p>The scale() method increases or decreases the size of an element.</p>

<div>

This div element is two times of its original width, and three times of its original
height.

</div>

</body>

</html>
The following example decreases the <div> element to be half of its original
width and height:

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: yellow;
border: 1px solid black;

border: 1px solid black;

-ms-transform: scale(0.5,0.5); /* IE 9 */

-webkit-transform: scale(0.5,0.5); /* Safari */

transform: scale(0.5,0.5); /* Standard syntax */

</style>

</head>

<body>

<p>The scale() method increases or decreases the size of an element.</p>

<div>

This div element is decreased to be half of its original width and height.

</div>

</body>

</html>
The skewX() Method
The skewX() method skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees along the X-axis:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

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

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

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

</style>

</head>

<body>

<p>The skewX() method skews an element along the X-axis by the given
angle.</p>

<div>

This a normal div element.

</div>

This div element is skewed 20 degrees along the X-axis.

</div>

</body>

</html>
The skewY() Method
The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 20 degrees along the Y-axis:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}
div#myDiv {

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

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

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

</style>

</head>

<body>

<p>The skewY() method skews an element along the Y-axis by the given
angle.</p>

<div>

This a normal div element.

</div>

This div element is skewed 20 degrees along the Y-axis.

</div>

</body>

</html>
The skew() Method
The skew() method skews an element along the X and Y-axis by the given
angles.

The following example skews the <div> element 20 degrees along the X-axis,
and 10 degrees along the Y-axis:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;
border: 1px solid black;

div#myDiv {

-ms-transform: skew(20deg,10deg); /* IE 9 */

-webkit-transform: skew(20deg,10deg); /* Safari */

transform: skew(20deg,10deg); /* Standard syntax */

</style>

</head>

<body>

<p>The skew() method skews an element into a given angle.</p>

<div>

This a normal div element.

</div>

This div element is skewed 20 degrees along the X-axis, and 10 degrees along
the Y-axis.

</div>

</body>

</html>
The matrix() Method
The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions,

which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;
background-color: yellow;

border: 1px solid black;

div#myDiv1 {

-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */

div#myDiv2 {

-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */

-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */

transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */

</style>

</head>

<body>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>

This a normal div element.

</div>
<div id="myDiv1">

Using the matrix() method.

</div>

Another use of the matrix() method.

</div>

</body>

</html>

CSS3 3D Transforms
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:

<!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>
CSS3 Transitions
CSS3 Transitions
CSS3 transitions allows you to change property values smoothly (from one
value to another), over a given duration.

Example: Mouse over the element below to see a CSS3 transition effect:

How to Use CSS3 Transitions?

To create a transition effect, you must specify two things:

 the CSS property you want to add an effect to

 the duration of the effect

Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a
duration of 2 seconds:
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s;

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<p>Hover over the div element above, to see the transition effect.</p>
</body>

</html>

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the
transition effect.

The transition-timing-function property can have the following values:

 ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
 linear - specifies a transition effect with the same speed from start to
end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function

The following example shows the some of the different speed curves that can be
used:

<!DOCTYPE html>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

/* For Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {
width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<div id="div1">linear</div><br>

<p>Hover over the div elements above, to see the different speed curves.</p>

</body>

</html>
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition
effect.

The following example has a 1 second delay before starting:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 3s; /* Safari */

-webkit-transition-delay: 1s; /* Safari */

transition: width 3s;

transition-delay: 1s;

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<div></div>
<p>Hover over the div element above, to see the transition effect.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before

starting.</p>

</body>

</html>

Transition + Transformation
The following example also adds a transformation to the transition effect:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;
background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari

transition: width 2s, height 2s, transform 2s;

div:hover {

width: 300px;

height: 300px;

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

transform: rotate(180deg);

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9

and earlier versions.</p>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>
CSS3 Animations
CSS3 Animations
CSS3 animations allows animation of most HTML elements without using
JavaScript or Flash!

What are CSS3 Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the
animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

from {background-color: red;}

to {background-color: yellow;}

/* Standard syntax */

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<p><b>Note:</b> When an animation is finished, it changes back to its

original style.</p>

</body>

</html>
Note: If the animation-duration property is not specified, the animation will
have no effect, because the default value is 0.

In the example above we have specified when the style will change by using the
keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style
changes as you like.

The following example will change the background-color of the <div> element
when the animation is 25% complete, 50% complete, and again when the
animation is 100% complete:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

/* Standard syntax */

@keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

</body>

</html>
The following example will change both the background-color and the
position of the <div> element when the animation is 25% complete, 50%
complete, and again when the animation is 100% complete:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9

and earlier versions.</p>
<div></div>

</body>

</html>

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;
position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

</body>

</html>

Set How Many Times an Animation Should

Run
The animation-iteration-count property specifies the number of times an
animation should run.

The following example will run the animation 3 times before it stops:
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}
/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

</body>

</html>
Run Animation in Reverse Direction or
Alternate Cycles
The animation-direction property is used to let an animation run in reverse
direction or alternate cycles.

The following example will run the animation in reverse direction:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: reverse;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}
</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

</body>

</html>

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the
animation.

The animation-timing-function property can have the following values:

 ease - specifies an animation with a slow start, then fast, then end slowly
(this is default)
 linear - specifies an animation with the same speed from start to end
 ease-in - specifies an animation with a slow start
 ease-out - specifies an animation with a slow end
 ease-in-out - specifies an animation with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function

The following example shows the some of the different speed curves that can be
used:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 50px;

background-color: red;

font-weight: bold;

position: relative;

-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */

animation: mymove 5s infinite;

/* Safari 4.0 - 8.0 */

#div1 {-webkit-animation-timing-function: linear;}

#div2 {-webkit-animation-timing-function: ease;}

#div3 {-webkit-animation-timing-function: ease-in;}

#div4 {-webkit-animation-timing-function: ease-out;}

#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {

from {left: 0px;}

to {left: 300px;}

/* Standard syntax */

@keyframes mymove {

from {left: 0px;}

to {left: 300px;}

</style>

</head>

<body>
<p><strong>Note:</strong> The animation-timing-funtion property is not
supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>

</body>

</html>

CSS Images
Learn how to style images using CSS.

Rounded Images
Use the border-radius property to create rounded images:

<!DOCTYPE html>

<html>

<head>

<style>

img {

border-radius: 8px;

</style>

</head>

<body>

<h2>Rounded Images</h2>

<p>Use the border-radius property to create rounded images:</p>

<img src="paris.jpg" alt="Paris" width="300" height="300">

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

img {

border-radius: 50%;

</style>

</head>

<body>
<h2>Rounded Images</h2>

<p>Use the border-radius property to create circled images:</p>

<img src="paris.jpg" alt="Paris" width="300" height="300">

</body>

</html>

Thumbnail Images
Use the border property to create thumbnail images.
<!DOCTYPE html>

<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

</style>

</head>

<body>

<h2>Thumbnail Images</h2>

<p>Use the border property to create thumbnail images:</p>

<img src="paris.jpg" alt="Paris" style="width:150px">

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

img:hover {

box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

</style>

</head>

<body>
<h2>Thumbnail Image as Link</h2>

<p>Use the border property to create thumbnail images. Wrap an anchor

around the image to use it as a link.</p>

<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">

<img src="paris.jpg" alt="Paris" style="width:150px">

</a>

</body>

</html>

Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the effect:

<!DOCTYPE html>

<html>

<head>

<style>

img {

max-width: 100%;

height: auto;

</style>

</head>

<body>

<h2>Responsive Images</h2>

<p>Responsive images will automatically adjust to fit the size of the

screen.</p>

<p>Resize the browser window to see the effect:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>

</html>
Center an Image
To center an image within the page, use margin: auto; and make it into
a block element:

<!DOCTYPE html>

<html>

<head>

<style>

img {

display: block;

margin: auto;

</style>

</head>
<body>

<img src="paris.jpg" alt="Paris" style="width:50%">

</body>

</html>

Polaroid Images / Cards

<!DOCTYPE html>

<html>

<head>

div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

margin-bottom: 25px;

div.container {

text-align: center;

padding: 10px 20px;

</style>

</head>

<body>

<h2>Responsive Polaroid Images / Cards</h2>

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

<p>The Troll's tongue in Hardanger, Norway</p>

</div>

</div>
<div class="polaroid">

<img src="lights600x400.jpg" alt="Norway" style="width:100%">

<p>Northern Lights in Norway</p>

</div>

</body>

</html>
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the
more transparent:

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.5;

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

}
</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower

the value, the more transparent:</p>

<p>Image with 50% opacity:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>

</html>

Image Text
How to position text in an image:
<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

img {

width: 100%;

height: auto;

opacity: 0.3;

</style>

</head>

<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

<div class="topleft">Top Left</div>

</div>

</body>

</html>

For topright

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;
}

For bottom left

.bottomleft {

position: absolute;

bottom: 8px;

left: 16px;

font-size: 18px;

Bottom right
.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;
}

For centered
.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;

Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an
element.

Note: The filter property is not supported in Internet Explorer, Edge 12, or

Safari 5.1 and earlier.

<!DOCTYPE html>

<html>

<head>

<style>

img {

width: 33%;

height: auto;

float: left;

max-width: 235px;

}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}

.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

.invert {-webkit-filter: invert(100%);filter: invert(100%);}

.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

.saturate {-webkit-filter: saturate(7); filter: saturate(7);}

.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-

shadow(8px 8px 10px green);}

</style>

</head>

<body>

<p><strong>Note:</strong> The filter property is not supported in Internet

Explorer, Edge 12, or Safari 5.1 and earlier.</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">

<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300"

height="300">

</body>

</html>
Image Hover Overlay
Create an overlay effect on hover:

Example
Fade in text:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

.image {

display: block;

width: 100%;

height: auto;

.overlay {

position: absolute;

top: 0;

bottom: 0;
left: 0;

right: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: .5s ease;

background-color: #008CBA;

.container:hover .overlay {

opacity: 1;

.text {

color: white;

font-size: 20px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

</style>

</head>

<body>
<h2>Fade in Overlay</h2>

<img src="img_avatar.png" alt="Avatar" class="image">

<div class="text">Hello World</div>

</div>

</body>

</html>
Example
Fade in a box:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;
}

.image {

opacity: 1;

display: block;

width: 100%;

height: auto;

transition: .5s ease;

backface-visibility: hidden;

.middle {

transition: .5s ease;

opacity: 0;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%)

.container:hover .image {

opacity: 0.3;

}
.container:hover .middle {

opacity: 1;

.text {

background-color: #4CAF50;

color: white;

font-size: 16px;

padding: 16px 32px;

</style>

</head>

<body>

<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">

<div class="text">John Doe</div>

</div>

</body>

</html>
Flip an Image
Move your mouse over the image:

<!DOCTYPE html>

<html>

<head>

<style>

img:hover {

-webkit-transform: scaleX(-1);

transform: scaleX(-1);
}

</style>

</head>

<body>

<h2>Flip an Image</h2>

<p>Move your mouse over the image.</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>

</html>
Responsive Image Gallery
CSS can be used to create image galleries. This example use media queries to
re-arrange the images on different screen sizes. Resize the browser window to
see the effect:

<!DOCTYPE html>

<html>

<head>

<style>

div.gallery {

border: 1px solid #ccc;

div.gallery:hover {

border: 1px solid #777;

div.gallery img {

width: 100%;

height: auto;

div.desc {

padding: 15px;

text-align: center;

}
*{

box-sizing: border-box;

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

.clearfix:after {
content: "";

display: table;

clear: both;

</style>

</head>

<body>

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<a target="_blank" href="img_fjords.jpg">

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300"

height="200">

</a>

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

</div>

<a target="_blank" href="img_forest.jpg">

</a>

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

</div>

<a target="_blank" href="img_lights.jpg">

<img src="img_lights.jpg" alt="Northern Lights" width="600"

height="400">

</a>

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

</div>

<a target="_blank" href="img_mountains.jpg">

<img src="img_mountains.jpg" alt="Mountains" width="600"

height="400">

</a>

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

</div>

</div>
<div class="clearfix"></div>

<p>This example use media queries to re-arrange the images on different

screen sizes: for screens larger than 700px wide, it will show four images side
by side, for screens smaller than 700px, it will show two images side by side.
For screens smaller than 500px, the images will stack vertically (100%).</p>

<p>You will learn more about media queries and responsive web design later
in our CSS Tutorial.</p>

</div>

</body>

</html>
Image Modal (Advanced)
This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image
inside the modal, when a user clicks on the image:

<!DOCTYPE html>

<html>

<head>

<style>

#myImg {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

left: 0;
top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

/* Modal Content (image) */

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

/* Caption of Modal Image */

#caption {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

text-align: center;

color: #ccc;

padding: 10px 0;
height: 150px;

/* Add Animation */

.modal-content, #caption {

-webkit-animation-name: zoom;

-webkit-animation-duration: 0.6s;

animation-name: zoom;

animation-duration: 0.6s;

@-webkit-keyframes zoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

@keyframes zoom {

from {transform: scale(0.1)}

to {transform: scale(1)}

/* The Close Button */

.close {

position: absolute;

top: 15px;
right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

.modal-content {

width: 100%;

</style>

</head>

<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden
by default.</p>

<p>We use JavaScript to trigger the modal and to display the current image
inside the modal when it is clicked on. Also note that we use the value from the
image's "alt" attribute as an image caption text inside the modal.</p>

<p>Don't worry if you do not understand the code right away. When you are
done with CSS, go to our JavaScript Tutorial to learn more.</p>

<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway"

width="300" height="200">

<div id="myModal" class="modal">

<img class="modal-content" id="img01">

</div>

// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){
modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = this.alt;

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

</script>

</body>

</html>

Image Modal

In this example, we use CSS to create a modal (dialog box) that is hidden by default.

We use JavaScript to trigger the modal and to display the current image inside the
modal when it is clicked on. Also note that we use the value from the image's "alt"
attribute as an image caption text inside the modal.

Don't worry if you do not understand the code right away. When you are done with
CSS, go to our JavaScript Tutorial to learn more.
CSS The object-fit Property
All Values of The CSS object-fit Property
The object-fit property can have the following values:

 fill - This is default. The replaced content is sized to fill the element's
content box. If necessary, the object will be stretched or squished to fit
 contain - The replaced content is scaled to maintain its aspect ratio while
fitting within the element's content box
 cover - The replaced content is sized to maintain its aspect ratio while
filling the element's entire content box. The object will be clipped to fit
 none - The replaced content is not resized
 scale-down - The content is sized as if none or contain were specified
(would result in a smaller concrete object size)

The following example demonstrates all the possible values of the object-

fit property:

<!DOCTYPE html>

<html>

<head>

<style>

.fill {object-fit: fill;}

.contain {object-fit: contain;}

.cover {object-fit: cover;}

.scale-down {object-fit: scale-down;}

.none {object-fit: none;}

</style>

</head>

<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>

<img src="paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: fill (this is default):</h2>

<img class="fill" src="paris.jpg" alt="Paris"

style="width:200px;height:400px">

<h2>object-fit: contain:</h2>

<img class="contain" src="paris.jpg" alt="Paris"

style="width:200px;height:400px">

<h2>object-fit: cover:</h2>

<img class="cover" src="paris.jpg" alt="Paris"

style="width:200px;height:400px">

<h2>object-fit: scale-down:</h2>

<img class="scale-down" src="paris.jpg" alt="Paris"

style="width:200px;height:400px">
<h2>object-fit: none:</h2>

<img class="none" src="paris.jpg" alt="Paris"

style="width:200px;height:400px">

</body>

</html>

The object-fit Property

No object-fit:
object-fit: fill (this is default):

object-fit: contain:
object-fit: cover:

object-fit: scale-down:
object-fit: none:

CSS Buttons
Learn how to style buttons using CSS.

Basic Button Styling

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

</style>

</head>

<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>

<a href="#" class="button">Link Button</a>

<button class="button">Button</button>

<input type="button" class="button" value="Input Button">

</body>

</html>
CSS Buttons

Button Colors
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}
.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>
Button Sizes
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

margin: 4px 2px;

cursor: pointer;

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

</style>

</head>
<body>

<h2>Button Sizes</h2>

<p>Change the font size of a button with the font-size property:</p>

<button class="button button1">10px</button>

<button class="button button2">12px</button>

<button class="button button3">16px</button>

<button class="button button4">20px</button>

<button class="button button5">24px</button>

</body>

</html>

Rounded Buttons
<!DOCTYPE html>

<html>

<head>

<style>
.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

</style>

</head>

<body>

<h2>Rounded Buttons</h2>

<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button2">4px</button>

<button class="button button3">8px</button>

<button class="button button4">12px</button>

<button class="button button5">50%</button>

</body>

</html>

Colored Button Borders

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;
padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

</style>

</head>

<body>

<h2>Colored Button Borders</h2>

<p>Use the border property to add a border to the button:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

Hoverable Buttons
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;
margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

.button1:hover {

background-color: #4CAF50;

color: white;

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

.button2:hover {

background-color: #008CBA;
color: white;

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

.button3:hover {

background-color: #f44336;

color: white;

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

.button4:hover {background-color: #e7e7e7;}

.button5 {

background-color: white;

color: black;
border: 2px solid #555555;

.button5:hover {

background-color: #555555;

color: white;

</style>

</head>

<body>

<h2>Hoverable Buttons</h2>

<p>Use the :hover selector to change the style of the button when you move
the mouse over it.</p>

<p><strong>Tip:</strong> Use the transition-duration property to determine

the speed of the "hover" effect:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>
Shadow Buttons
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

.button1 {

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

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0

rgba(0,0,0,0.19);

</style>

</head>

<body>

<h2>Shadow Buttons</h2>

<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>

<button class="button button2">Shadow on Hover</button>

</body>

</html>
Disabled Buttons
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}
.disabled {

opacity: 0.6;

cursor: not-allowed;

</style>

</head>

<body>

<h2>Disabled Buttons</h2>

<p>Use the opacity property to add some transparency to the button (make it
look disabled):</p>

<button class="button">Normal Button</button>

<button class="button disabled">Disabled Button</button>

</body>

</html>
Button Width
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

</style>

</head>

<body>
<h2>Button Width</h2>

<p>Use the width property to change the width of the button:</p>

<p><strong>Tip:</strong> Use pixels if you want to set a fixed width and use
percent for responsive buttons (e.g. 50% of its parent element). Resize the
browser window to see the effect.</p>

<button class="button button1">250px</button><br>

<button class="button button2">50%</button><br>

<button class="button button3">100%</button>

</body>

</html>
Button Groups
<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>
<h2>Button Groups</h2>

<p>Remove margins and float the buttons to create a button group:</p>

<button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p

element also float next to the buttons.</p>

</body>

</html>
Bordered Button Groups
<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

.btn-group .button:not(:last-child) {

border-right: none; /* Prevent double borders */

.btn-group .button:hover {

background-color: #3e8e41;

</style>
</head>

<body>

<h2>Bordered Button Group</h2>

<p>Add borders to create a bordered button group:</p>

<button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p

element also float next to the buttons.</p>

</body>

</html>
Vertical Button Groups
<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

width: 150px;
display: block;

.btn-group .button:not(:last-child) {

border-bottom: none; /* Prevent double borders */

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Vertical Button Group</h2>

<button class="button">Button</button>

</div>

</body>

</html>
Animated Buttons
<!DOCTYPE html>

<html>

<head>

<style>

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;
transition: all 0.5s;

cursor: pointer;

margin: 5px;

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

.button span:after {

content: '\00bb';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

.button:hover span {

padding-right: 25px;

}
.button:hover span:after {

opacity: 1;

right: 0;

</style>

</head>

<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover

</span></button>

</body>

</html>

Example
Add a "pressed" effect on click:
<!DOCTYPE html>

<html>

<head>

<style>

.button {

display: inline-block;

padding: 15px 25px;

font-size: 24px;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

.button:hover {background-color: #3e8e41}

.button:active {

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);
}

</style>

</head>

<body>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

</body>

</html>

Example
Add a "ripple" effect on click:

<!DOCTYPE html>

<html>

<head>

<style>
.button {

position: relative;

background-color: #4CAF50;

border: none;

font-size: 28px;

color: #FFFFFF;

padding: 20px;

width: 200px;

text-align: center;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

text-decoration: none;

overflow: hidden;

cursor: pointer;

.button:after {

content: "";

background: #f1f1f1;

display: block;

position: absolute;

padding-top: 300%;

padding-left: 350%;

margin-left: -20px !important;

margin-top: -120%;
opacity: 0;

transition: all 0.8s

.button:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition: 0s

</style>

</head>

<body>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

</body>

</html>
CSS Pagination Examples
Simple Pagination
If you have a website with lots of pages, you may wish to add some sort of
pagination to each page:

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

}
</style>

</head>

<body>

<h2>Simple Pagination</h2>

</div>

</body>

</html>
Active and Hoverable Pagination
<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

.pagination a.active {

background-color: #4CAF50;

color: white;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<a class="active" href="#">2</a>

</div>

</body>

</html>
Rounded Active and Hoverable Buttons
<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

.pagination a.active {

background-color: #4CAF50;

color: white;

border-radius: 5px;

.pagination a:hover:not(.active) {

background-color: #ddd;
border-radius: 5px;

</style>

</head>

<body>

<h2>Rounded Active and Hover Buttons</h2>

<a href="#" class="active">2</a>

</div>

</body>

</html>
Hoverable Transition Effect
<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

.pagination a.active {

background-color: #4CAF50;

color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Transition Effect on Hover</h2>

<p>Move the mouse over the numbers.</p>

<a href="#" class="active">2</a>

</div>

</body>

</html>
Bordered Pagination
<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

}
.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination with Borders</h2>

<a href="#" class="active">2</a>

</div>

</body>
</html>

Space Between Links

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

margin: 0 4px;
}

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination with Margins</h2>

<a href="#" class="active">2</a>

</div>
</body>

</html>

Pagination Size
<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

font-size: 22px;
}

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or

bigger.</p>

<a href="#" class="active">2</a>

</div>

</body>

</html>

Centered Pagination
<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

.pagination {

display: inline-block;

}
.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

margin: 0 4px;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Centered Pagination</h2>

<a href="#" class="active">2</a>

</div>

</body>

</html>

CSS3 Multiple Columns
CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should
be divided into.

The following example will divide the text in the <div> element into 3 columns:

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-count property.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

Note: Internet Explorer 9, and earlier versions, does not support the column-count
property.

Lorem ipsum dolor sit consequat. Duis autem facilisi. Nam liber
amet, consectetuer vel eum iriure dolor in tempor cum soluta
adipiscing elit, sed diam hendrerit in vulputate nobis eleifend option
nonummy nibh euismod velit esse molestie congue nihil imperdiet
tincidunt ut laoreet consequat, vel illum doming id quod mazim
dolore magna aliquam dolore eu feugiat nulla placerat facer possim
erat volutpat. Ut wisi facilisis at vero eros et assum.
enim ad minim veniam, accumsan et iusto odio
quis nostrud exerci dignissim qui blandit
tation ullamcorper praesent luptatum zzril
suscipit lobortis nisl ut delenit augue duis
aliquip ex ea commodo dolore te feugait nulla

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

The following example specifies a 40 pixels gap between the columns:

<!DOCTYPE html>

<html>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-gap property.</p>

</div>
</body>

Note: Internet Explorer 9, and earlier versions, does not support the column-gap
property.

. Lorem ipsum dolor sit aliquip ex ea commodo delenit augue duis

amet, consectetuer consequat. Duis autem dolore te feugait nulla
adipiscing elit, sed diam vel eum iriure dolor in facilisi. Nam liber
nonummy nibh euismod hendrerit in vulputate tempor cum soluta
tincidunt ut laoreet velit esse molestie nobis eleifend option
dolore magna aliquam consequat, vel illum congue nihil imperdiet
erat volutpat. Ut wisi dolore eu feugiat nulla doming id quod mazim
enim ad minim veniam, facilisis at vero eros et placerat facer possim
quis nostrud exerci accumsan et iusto odio assum
tation ullamcorper dignissim qui blandit
suscipit lobortis nisl ut praesent luptatum zzril

CSS3 Column Rules

The column-rule-style property specifies the style of the rule between
columns:

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-rule-style property.</p>

</div>

</body>

</html>

Note: Internet Explorer 9, and earlier versions, does not support the column-rule-style
property.

Lorem ipsum dolor sit adipiscing elit, sed diam tincidunt ut laoreet
amet, consectetuer nonummy nibh euismod dolore magna aliquam
erat volutpat. Ut wisi velit esse molestie facilisi. Nam liber
enim ad minim veniam, consequat, vel illum tempor cum soluta
quis nostrud exerci dolore eu feugiat nulla nobis eleifend option
tation ullamcorper facilisis at vero eros et congue nihil imperdiet
suscipit lobortis nisl ut accumsan et iusto odio doming id quod mazim
aliquip ex ea commodo dignissim qui blandit placerat facer possim
consequat. Duis autem praesent luptatum zzril assum.
vel eum iriure dolor in delenit augue duis
hendrerit in vulputate dolore te feugait nulla

The column-rule-width property specifies the width of the rule between

columns:

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;
}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-rule-width property.</p>

</div>

</body>

</html>

Note: Internet Explorer 9, and earlier versions, does not support the column-rule-
width property.

Lorem ipsum dolor sit enim ad minim veniam, hendrerit in vulputate

amet, consectetuer quis nostrud exerci velit esse molestie
adipiscing elit, sed diam tation ullamcorper consequat, vel illum
nonummy nibh euismod suscipit lobortis nisl ut dolore eu feugiat nulla
tincidunt ut laoreet aliquip ex ea commodo facilisis at vero eros et
dolore magna aliquam consequat. Duis autem accumsan et iusto odio
erat volutpat. Ut wisi vel eum iriure dolor in dignissim qui blandit
praesent luptatum zzril tempor cum soluta placerat facer possim
delenit augue duis nobis eleifend option assum.
dolore te feugait nulla congue nihil imperdiet
facilisi. Nam liber doming id quod mazim

The column-rule-color property specifies the color of the rule between

columns:

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */

-moz-column-rule-color: lightblue; /* Firefox */

column-rule-color: lightblue;
}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-rule-color property.</p>

</div>

</body>

</html>

Note: Internet Explorer 9, and earlier versions, does not support the column-rule-color
property.

Lorem ipsum dolor sit enim ad minim veniam, hendrerit in vulputate

CSS3 Box Sizing
CSS3 Box Sizing
The CSS3 box-sizing property allows us to include the padding and border in
an element's total width and height.

The two <div> elements above end up with different sizes in the result
(because div2 has a padding specified):

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="div1">This div is smaller (width is 300px and height is

100px).</div>

<br>

<div class="div2">This div is bigger (width is also 300px and height is

100px).</div>

</body>

</html>
With the CSS3 box-sizing Property
The CSS3 box-sizing property allows us to include the padding and border in
an element's total width and height.

If you set box-sizing: border-box; on an element padding and border are

included in the width and height:

Here is the same example as above, with box-sizing: border-box; added to

both <div> elements:

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;
}

</style>

</head>

<body>

<div class="div1">Both divs are the same size now!</div>

<br>

<div class="div2">Hooray!</div>

</body>

</html>

The code below ensures that all elements are sized in this more intuitive way.
Many browsers already use box-sizing: border-box; for many form elements
(but not all - which is why inputs and text areas look different at width:
100%;).

Applying this to all elements is safe and wise:

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

box-sizing: border-box;

input, textarea {

width: 100%;

</style>

</head>

<body>

First name:<br>

<input type="text" name="firstname" value="Mickey"><br>

Last name:<br>

<input type="text" name="lastname" value="Mouse"><br>

Comments:<br>

<textarea name="message" rows="5" cols="30">

</textarea>

<input type="submit" value="Submit">

</form>

<p><strong>Tip:</strong> Try to remove the box-sizing property from the

style element and look what happens.

Notice that the width of input, textarea, and submit button will go outside of the
screen.</p>

</body>

</html>
CSS3 Media Queries
CSS3 Introduces Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for
a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

 width and height of the viewport

 width and height of the device
 orientation (is the tablet/phone in landscape or portrait mode?)
 resolution

Using media queries are a popular technique for delivering a tailored style sheet
to tablets, iPhone, and Androids.
Media Queries Simple Examples
One way to use media queries is to have an alternate CSS section right inside
your style sheet.

The following example changes the background-color to lightgreen if the

viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the
background-color will be pink):

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: pink;

@media screen and (min-width: 480px) {

body {

background-color: lightgreen;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<p>The media query will only apply if the media type is screen and the
viewport is 480px wide or wider.</p>
</body>

</html>

The following example shows a menu that will float to the left
of the page if the viewport is 480 pixels wide or wider (if the viewport is less
than 480 pixels, the menu will be on top of the content):

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {

float: none;

width: auto;

#menulist {

margin: 0;

padding: 0;

.menuitem {

background: #CDF0F6;

border: 1px solid #d4d4d4;

border-radius: 4px;

list-style-type: none;

margin: 4px;

padding: 2px;

@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}

#main {margin-left: 216px;}

}

</style>

</head>

<body>

<li class="menuitem">Menu-item 1</li>

<li class="menuitem">Menu-item 2</li>

<li class="menuitem">Menu-item 3</li>

<li class="menuitem">Menu-item 4</li>

<li class="menuitem">Menu-item 5</li>

</ul>

</div>

<h1>Resize the browser window to see the effect!</h1>

<p>This example shows a menu that will float to the left of the page if the
viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the
menu will be on top of the content.</p>

</div>

</body>

</html>
Width from 520 to 699px - Apply an email
icon to each link
When the browser's width is between 520 and 699px, we will apply an email
icon to each email link:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

}
ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

@media screen and (max-width: 699px) and (min-width: 520px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>

<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

</body>

</html>

Responsive Web Design - Grid-View

Example
<!DOCTYPE html>

<html>

<style>

box-sizing: border-box;

.row::after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

}
</style>

</head>

<body>

<h1>Chania</h1>

</div>

<div class="col-3 menu">

<ul>

<li>The Flight</li>

<li>The Island</li>

</ul>

</div>

<p>Chania is the capital of the Chania region on the island of Crete. The
city can be divided in two parts, the old town and the modern city.</p>

<p>Resize the browser window to see how the content respond to the
resizing.</p>

</div>
</div>

</body>

</html>

Responsive Web Design - Media

Queries
What is a Media Query?
Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain

condition is true.

Example
If the browser window is 500px or smaller, the background color will be
lightblue:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-color: lightgreen;

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

</style>

</head>

<body>
<p>Resize the browser window. When the width of this document is 500pixels
or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>

</html>

Add a Breakpoint
Earlier in this tutorial we made a web page with rows and columns, and it was
responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts
of the design will behave differently on each side of the breakpoint.
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

box-sizing: border-box;

.row::after {

content: "";

clear: both;

display: block;

[class*="col-"] {

float: left;

padding: 15px;

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

}
.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.footer {

background-color: #0099cc;
color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}
</style>

</head>

<body>

<h1>Chania</h1>

</div>

<div class="col-3 menu">

<ul>

<li>The Flight</li>

<li>The Island</li>

</ul>

</div>

<p>Chania is the capital of the Chania region on the island of Crete. The city
can be divided in two parts, the old town and the modern city.</p>

</div>
<div class="col-3 right">

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<p>You can reach Chania airport from all over Europe.</p>

</div>

<p>Resize the browser window to see how the content respond to the
resizing.</p>

</div>

</body>

</html>
Responsive Web Design - Images
Using The width Property
If the width property is set to 100%, the image will be responsive and scale up
and down:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>
img {

width: 100%;

height: auto;

</style>

</head>

<body>

<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image will scale.</p>

</body>

</html>

Resize the browser window to see how the image will scale.
Background Images
Background images can also respond to resizing and scaling.

Here we will show three different methods:

1. If the background-size property is set to "contain", the background image

will scale, and try to fit the content area. However, the image will keep its
aspect ratio (the proportional relationship between the image's width and
height):

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>

div {

width: 100%;

height: 400px;

background-repeat: no-repeat;

background-size: contain;

border: 1px solid red;

</style>

</head>

<body>
<p>Resize the browser window to see the effect.</p>

</body>

</html>

Resize the browser window to see the effect.

. If the background-size property is set to "100% 100%", the background

image will stretch to cover the entire content area:

<!DOCTYPE html>

<html>

<style>

div {

width: 100%;

height: 400px;

background-size: 100% 100%;

border: 1px solid red;

</style>

</head>

<body>

<p>Resize the browser window to see the effect.</p>

</body>

</html>
If the background-size property is set to "cover", the background image
will scale to cover the entire content area. Notice that the "cover" value keeps
the aspect ratio, and some part of the background image may be clipped:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>

div {

width: 100%;

height: 400px;
background-image: url('img_flowers.jpg');

background-size: cover;

border: 1px solid red;

</style>

</head>

<body>

<p>Resize the browser window to see the effect.</p>

</body>

</html>
Different Images for Different Devices
A large image can be perfect on a big computer screen, but useless on a small
device. Why load a large image when you have to scale it down anyway? To
reduce the load, or for any other reasons, you can use media queries to display
different images on different devices.

Here is one large image and one smaller image that will be displayed on
different devices:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<style>

/* For width smaller than 400px: */

body {

background-repeat: no-repeat;

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {

body {

</style>

</head>

<body>

<p style="margin-top:360px;">Resize the browser width and the

background image will change at 400px.</p>

</body>

</html>
Responsive Web Design - Videos
Using The width Property
If the width property is set to 100%, the video player will be responsive and
scale up and down:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>
video {

width: 100%;

height: auto;

</style>

</head>

<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

<p>Resize the browser window to see how the size of the video player
will scale.</p>

</body>

</html>
Notice that in the example above, the video player can be scaled up to be larger
than its original size. A better solution, in many cases, will be to use the max-
width property instead.

Using The max-width Property

If the max-width property is set to 100%, the video player will scale down if it
has to, but never scale up to be larger than its original size:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>

video {

max-width: 100%;
height: auto;

</style>

</head>

<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

<p>Resize the browser window to see how the size of the video player
will scale when the width is less than 400px.</p>

</body>

</html>
Add a Video to the Example Web Page
We want to add a video in our example web page. The video will be resized to
always take up all the available space:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<style>

box-sizing: border-box;

video {

width: 100%;
height: auto;

.row:after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

width: 100%;

@media only screen and (min-width: 600px) {

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;
margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;
font-size: 12px;

padding: 15px;

</style>

</head>

<body>

<h1>Chania</h1>

</div>

<div class="col-3 col-s-3 menu">

<ul>

<li>The Flight</li>

<li>The Island</li>

</ul>

</div>

<div class="col-6 col-s-9">

<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The
city can be divided in two parts, the old town and the modern city.</p>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

</div>

<div class="col-3 col-s-12">

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<p>You can reach Chania airport from all over Europe.</p>

</div>

<p>Resize the browser window to see how the content respond to the
resizing.</p>

</div>
</body>

</html>

Chania
 The Flight
 The City
 The Island
 The Food

The City
Chania is the capital of the Chania region on the island of Crete. The city can be
divided in two parts, the old town and the modern city.

What?

Chania is a city on the island of Crete.

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

Responsive Web Design - Frameworks

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>

<p>Resize this responsive page!</p>

</div>

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

</div>
<div class="w3-third">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

<p>The Paris area is one of the largest population centers in Europe,

with more than 12 million inhabitants.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<p>It is the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</div>

</body>

</html>

W3Schools Demo
Resize this responsive page!

London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.

Paris
Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more
than 12 million inhabitants.

Tokyo
Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan
area in the world.

Responsive Web Design - Templates

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>

body {font-family: "Times New Roman", Georgia, Serif;}

h1,h2,h3,h4,h5,h6 {

font-family: "Playfair Display";

letter-spacing: 5px;
}

</style>

<body>

<div class="w3-bar w3-white w3-padding w3-card" style="letter-

spacing:4px;">

<a href="#home" class="w3-bar-item w3-button">Gourmet au

Catering</a>

<div class="w3-right w3-hide-small">

<a href="#about" class="w3-bar-item w3-button">About</a>

<a href="#menu" class="w3-bar-item w3-button">Menu</a>

<a href="#contact" class="w3-bar-item w3-button">Contact</a>

</div>

<header class="w3-display-container w3-content w3-wide" style="max-

width:1600px;min-width:500px" id="home">

<img class="w3-image" src="/w3images/hamburger.jpg" alt="Hamburger

Catering" width="1600" height="800">

<div class="w3-display-bottomleft w3-padding-large w3-opacity">

<h1 class="w3-xxlarge">Le Catering</h1>

</div>

</header>

<div class="w3-content" style="max-width:1100px">

<div class="w3-row w3-padding-64" id="about">

<div class="w3-col m6 w3-padding-large w3-hide-small">

<img src="/w3images/tablesetting2.jpg" class="w3-round w3-image w3-

opacity-min" alt="Table Setting" width="600" height="750">

</div>

<div class="w3-col m6 w3-padding-large">

<h1 class="w3-center">About Catering</h1><br>

<h5 class="w3-center">Tradition since 1889</h5>

<p class="w3-large">The Catering was founded in blabla by Mr. Smith in

lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.We only use <span class="w3-
tag w3-light-grey">seasonal</span> ingredients.</p>

<p class="w3-large w3-text-grey w3-hide-medium">Excepteur sint

occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</div>

<hr>

<div class="w3-row w3-padding-64" id="menu">

<div class="w3-col l6 w3-padding-large">

<h1 class="w3-center">Our Menu</h1><br>

<h4>Bread Basket</h4>

<p class="w3-text-grey">Assortment of fresh baked fruit breads and

muffins 5.50</p><br>

<h4>Honey Almond Granola with Fruits</h4>

<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins,

almonds and dates 7.00</p><br>

<h4>Belgian Waffle</h4>

<p class="w3-text-grey">Vanilla flavored batter with malted flour

7.50</p><br>

<h4>Scrambled eggs</h4>

<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic,

with green onions 7.50</p><br>
<h4>Blueberry Pancakes</h4>

<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>

</div>

<div class="w3-col l6 w3-padding-large">

<img src="/w3images/tablesetting.jpg" class="w3-round w3-image w3-

opacity-min" alt="Menu" style="width:100%">

</div>

<hr>

<div class="w3-container w3-padding-64" id="contact">

<h1>Contact</h1><br>

<p>We offer full-service catering for any event, large or small. We

understand your needs and we will cater the food to satisfy the biggerst criteria
of them all, both look and taste. Do not hesitate to contact us.</p>

<p class="w3-text-blue-grey w3-large"><b>Catering Service, 42nd Living

St, 43043 New York, NY</b></p>

<p>You can also contact us by phone 00553123-2323 or email

[email protected], or you can send us a message here:</p>

<form action="/action_page.php" target="_blank">

<p><input class="w3-input w3-padding-16" type="text"

placeholder="Name" required name="Name"></p>

<p><input class="w3-input w3-padding-16" type="number"

placeholder="How many people" required name="People"></p>
<p><input class="w3-input w3-padding-16" type="datetime-local"
placeholder="Date and time" required name="date" value="2017-11-
16T20:00"></p>

<p><input class="w3-input w3-padding-16" type="text"

placeholder="Message \ Special requirements" required
name="Message"></p>

<p><button class="w3-button w3-light-grey w3-section"

type="submit">SEND MESSAGE</button></p>

</form>

</div>

</div>

<footer class="w3-center w3-light-grey w3-padding-32">

<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-
green">w3.css</a></p>

</footer>

</body>

</html>
CV Template
<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">

<style>

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

</style>

<div class="w3-content w3-margin-top" style="max-width:1400px;">

<div class="w3-white w3-text-grey w3-card-4">

<img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar">

<div class="w3-display-bottomleft w3-container w3-text-black">

</div>

<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-

teal"></i>[email protected]</p>

<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>

<hr>
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-
teal"></i>Skills</b></p>

<p>Adobe Photoshop</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal"

style="width:90%">90%</div>

</div>

<p>Photography</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">

<div class="w3-center w3-text-white">80%</div>

</div>

<p>Illustrator</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal"

style="width:75%">75%</div>

</div>

<p>Media</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal"

style="width:50%">50%</div>

</div>

<br>
<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-
teal"></i>Languages</b></p>

<p>English</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>

</div>

<p>Spanish</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>

</div>

<p>German</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>

</div>

<br>

</div>

</div><br>

</div>

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-

xxlarge w3-text-teal"></i>Work Experience</h2>

<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 -

<span class="w3-tag w3-teal w3-round">Current</span></h6>

<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur
est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure,
iste.</p>

<hr>

</div>

<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 -

Dec 2014</h6>

<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur

est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure,
iste.</p>

<hr>

</div>

<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar

2012</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>

</div>

</div>
<div class="w3-container w3-card w3-white">

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-

xxlarge w3-text-teal"></i>Education</h2>

<h5 class="w3-opacity"><b>W3Schools.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>

<p>Web Development! All I need to know in one place</p>

<hr>

</div>

<h5 class="w3-opacity"><b>London Business School</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 -

2015</h6>

<p>Master Degree</p>

<hr>

</div>

<h5 class="w3-opacity"><b>School of Coding</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 -

2013</h6>

<p>Bachelor Degree</p><br>

</div>

</div>

</div>

</div>

</div>

<footer class="w3-container w3-teal w3-center w3-margin-top">

<p>Find me on social media.</p>

<i class="fa fa-facebook-official w3-hover-opacity"></i>

<i class="fa fa-instagram w3-hover-opacity"></i>

<i class="fa fa-snapchat w3-hover-opacity"></i>

<i class="fa fa-pinterest-p w3-hover-opacity"></i>

<i class="fa fa-twitter w3-hover-opacity"></i>

<i class="fa fa-linkedin w3-hover-opacity"></i>

<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</footer>

</body>

</html>

Cookies Netflix
100% (3)
Cookies Netflix
5 pages
Men Salon Project 1
No ratings yet
Men Salon Project 1
32 pages
BCS L3 Digital Marketer IfATE V1.1 KM1 Principles of Coding Sample Paper A V1.1
No ratings yet
BCS L3 Digital Marketer IfATE V1.1 KM1 Principles of Coding Sample Paper A V1.1
7 pages
How To Post Unlimited Ads On Craigslist - pdf0
No ratings yet
How To Post Unlimited Ads On Craigslist - pdf0
10 pages
ActixOne General User Training PDF
100% (2)
ActixOne General User Training PDF
38 pages
Css
No ratings yet
Css
197 pages
UNIT-2 Web Technology (BCS502)
100% (1)
UNIT-2 Web Technology (BCS502)
27 pages
Introduction To CSS - Prelim
No ratings yet
Introduction To CSS - Prelim
9 pages
CSS (1)
No ratings yet
CSS (1)
19 pages
CSS Syntax: Cascading Style Sheet (CSS)
No ratings yet
CSS Syntax: Cascading Style Sheet (CSS)
10 pages
CSS Notes
No ratings yet
CSS Notes
38 pages
Tot Webdev - CSS
100% (1)
Tot Webdev - CSS
68 pages
CSS Introduction
No ratings yet
CSS Introduction
26 pages
CSS Tutorial
No ratings yet
CSS Tutorial
98 pages
CSS (Cascading Style Sheet)
No ratings yet
CSS (Cascading Style Sheet)
95 pages
Itec50 Lesson 6 Part 1
No ratings yet
Itec50 Lesson 6 Part 1
142 pages
CSS Introduction
No ratings yet
CSS Introduction
15 pages
CLASS 7 CSS Handout 1
No ratings yet
CLASS 7 CSS Handout 1
10 pages
CSS Introduction
No ratings yet
CSS Introduction
15 pages
CSS Basic
No ratings yet
CSS Basic
37 pages
CSS
100% (1)
CSS
264 pages
What Is CSS
No ratings yet
What Is CSS
15 pages
A Comple Tutorial On Cascading Style Sheets
No ratings yet
A Comple Tutorial On Cascading Style Sheets
186 pages
Unit Iii
No ratings yet
Unit Iii
46 pages
CSS Introduction
No ratings yet
CSS Introduction
42 pages
Cssnotes
No ratings yet
Cssnotes
24 pages
Cascading Style Sheet Handout March 2023
No ratings yet
Cascading Style Sheet Handout March 2023
104 pages
CSS Types Properties
No ratings yet
CSS Types Properties
18 pages
WD Unit 3 (A)
No ratings yet
WD Unit 3 (A)
39 pages
Styling HTML With CSS
No ratings yet
Styling HTML With CSS
6 pages
Unit 3 CSS
No ratings yet
Unit 3 CSS
11 pages
Nov 2024 Handouts
No ratings yet
Nov 2024 Handouts
5 pages
Css Completo e Total
No ratings yet
Css Completo e Total
566 pages
Cascading Style Sheets (CSS) : The Basics of
No ratings yet
Cascading Style Sheets (CSS) : The Basics of
64 pages
Week5
No ratings yet
Week5
35 pages
csspdf
No ratings yet
csspdf
38 pages
Css
No ratings yet
Css
191 pages
Unit - iii IT study from this
No ratings yet
Unit - iii IT study from this
19 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
52 pages
CSS Basics
No ratings yet
CSS Basics
15 pages
Cascading Style Sheets Lecture 1
No ratings yet
Cascading Style Sheets Lecture 1
20 pages
CSS Tutorial
No ratings yet
CSS Tutorial
26 pages
CSS Notes
No ratings yet
CSS Notes
20 pages
Css
No ratings yet
Css
79 pages
CSS Notes-1
No ratings yet
CSS Notes-1
69 pages
CSS Reading Material 2025
No ratings yet
CSS Reading Material 2025
30 pages
CSS Tutorial
No ratings yet
CSS Tutorial
148 pages
CSS and CSS3 Notes
100% (1)
CSS and CSS3 Notes
54 pages
Lightblue: Background-Color
No ratings yet
Lightblue: Background-Color
16 pages
Css PDF
No ratings yet
Css PDF
26 pages
What is CSS
No ratings yet
What is CSS
15 pages
CSS Notes
No ratings yet
CSS Notes
61 pages
CSSNotes
No ratings yet
CSSNotes
37 pages
What Is CSS?: CSS Stands For Cascading Style Sheets
No ratings yet
What Is CSS?: CSS Stands For Cascading Style Sheets
28 pages
1) CSS
No ratings yet
1) CSS
16 pages
CSS Basics PDF
No ratings yet
CSS Basics PDF
15 pages
WP_UNIT 2
No ratings yet
WP_UNIT 2
17 pages
Css Lesson 2
No ratings yet
Css Lesson 2
7 pages
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
No ratings yet
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
109 pages
Introduction to CSS
No ratings yet
Introduction to CSS
250 pages
Css
No ratings yet
Css
113 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
117 pages
HTML Part 3 CSS
No ratings yet
HTML Part 3 CSS
59 pages
CSS3 Notes Inifnity2
No ratings yet
CSS3 Notes Inifnity2
19 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
Ambo University Woliso Campus: Web Based Help Desk Information Management System
No ratings yet
Ambo University Woliso Campus: Web Based Help Desk Information Management System
18 pages
Copywriting Modul - Nikojulius
No ratings yet
Copywriting Modul - Nikojulius
2 pages
Mumtaz Shabbir (PUCIT) Resume
No ratings yet
Mumtaz Shabbir (PUCIT) Resume
1 page
A Study On Enhancing E-Governance Applications Through Semantic Web Technologies
No ratings yet
A Study On Enhancing E-Governance Applications Through Semantic Web Technologies
5 pages
World Market Environment - Technological Environment
No ratings yet
World Market Environment - Technological Environment
54 pages
Curriculum Vitae: Personal Information
No ratings yet
Curriculum Vitae: Personal Information
2 pages
Fortios v7.2.5 Release Notes
No ratings yet
Fortios v7.2.5 Release Notes
60 pages
Ruijie RG-EST Series Bridges Web-Based Configuration Guide, Release AP - 3.0 (1) B2P38 (V1.0)
No ratings yet
Ruijie RG-EST Series Bridges Web-Based Configuration Guide, Release AP - 3.0 (1) B2P38 (V1.0)
22 pages
Series Fast Operation Manual (7.0) 1
No ratings yet
Series Fast Operation Manual (7.0) 1
29 pages
Empowering Technology
No ratings yet
Empowering Technology
4 pages
Google Privacy Policy en
No ratings yet
Google Privacy Policy en
28 pages
Tools Not Rules Teaching Grammar in The Writing
No ratings yet
Tools Not Rules Teaching Grammar in The Writing
3 pages
E-Commerce Client Server Architecture
No ratings yet
E-Commerce Client Server Architecture
29 pages
Information Networks and World Wide Web
No ratings yet
Information Networks and World Wide Web
37 pages
Panda Eco System Berhad - Prospectus Dated 8 November 2023 (Part 1)
No ratings yet
Panda Eco System Berhad - Prospectus Dated 8 November 2023 (Part 1)
126 pages
Internship Report Sample 4
100% (1)
Internship Report Sample 4
40 pages
Information Technology and Its Applicatiion Business
No ratings yet
Information Technology and Its Applicatiion Business
31 pages
XXX ??GLCNW PDF
No ratings yet
XXX ??GLCNW PDF
2 pages
The Role of Information Technology in Education
100% (19)
The Role of Information Technology in Education
20 pages
Resume of Aliul Azim
No ratings yet
Resume of Aliul Azim
3 pages
000-317 WAS 8 Dumps
No ratings yet
000-317 WAS 8 Dumps
24 pages
Lesson 2.2 Cybercrimes
No ratings yet
Lesson 2.2 Cybercrimes
35 pages
Avijit Sood: Background
No ratings yet
Avijit Sood: Background
7 pages
Web Technologies: Anurag Singh Mohit Srivastava Rishi Pandey
No ratings yet
Web Technologies: Anurag Singh Mohit Srivastava Rishi Pandey
43 pages
How The Internet Is Changing Lives Forever
No ratings yet
How The Internet Is Changing Lives Forever
1 page