Css
Uploaded by
sahalmgm933Css
Uploaded by
sahalmgm933What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
CSS Syntax and Selectors
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
In the following example all <p> elements will be center-aligned, with a red text color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too! </p>
<p>And me!</p>
</body>
</html>
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the
class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
Example
<!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>
You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Grouping Selectors
If you have elements with the same style definitions, like this:
Example
<!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>
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later
date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one
file!
Each page must include a reference to the external style sheet file inside the <link> element. The
<link> element goes inside the <head> section:
Example
<!DOCTYPE html>
<html>
<head>
<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>
An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.
Example
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
Example
<!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>
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the
value from the last read style sheet will be used.
CSS Colors
Colors in CSS are most often specified by:
a valid color name - like "red"
an RGB value - like "rgb(255, 0, 0)"
a HEX value - like "#ff0000"
Color Names
Colors set by using color names:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Color Names Examples</h2>
<p>Note: You will learn more about the background-color and the color property later in our
tutorial.</p>
<h2 style="background-color:red">
Red background-color
</h2>
<h2 style="background-color:green">
Green background-color
</h2>
<h2 style="background-color:blue;color:white">
Blue background-color and white text color
</h2>
<h2 style="background-color:orange">
Orange background-color
</h2>
<h2 style="background-color:yellow">
Yellow background-color
</h2>
<h2 style="background-color:cyan">
Cyan background-color
</h2>
<h2 style="background-color:black;color:white">
Black background-color and white text color
</h2>
</body>
</html>
RGB (Red, Green, Blue)
RGB color values can be specified using this formula: rgb(red, green, blue).
Each parameter (red, green, 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)
Example
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(255, 0, 0)">
Background-color set by using rgb(255, 0, 0)
</h2>
<h2 style="background-color:rgb(0, 255, 0)">
Background-color set by using rgb(0, 255, 0)
</h2>
<h2 style="background-color:rgb(0, 0, 255)">
Background-color set by using rgb(0, 0, 255)
</h2>
<h2 style="background-color:rgb(255, 165, 0)">
Background-color set by using rgb(255, 165, 0)
</h2>
<h2 style="background-color:rgb(255, 255, 0)">
Background-color set by using rgb(255, 255, 0)
</h2>
<h2 style="background-color:rgb(0, 255, 255)">
Background-color set by using rgb(0, 255, 255)
</h2>
Hexadecimal Colors
RGB values can also be specified using hexadecimal color values in the form: #RRGGBB,
where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same
as decimal 0-255).
For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the
others are set to the lowest value (00). Note: HEX values are case-insensitive: "#ff0000" is the
same as "FF0000".
Example
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>
<h2 style="background-color:#FFA500">
Background-color set by using #FFA500
</h2>
<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
</body>
</html>
CSS Backgrounds
The CSS background properties are used to define the background effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Example
<!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>
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this
Example
<!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>
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like
this:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background
will look better:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a backgound image is repeated only horizontally!</p>
</body>
</html>
Background Image - Set position and no-repeat
Showing the background image only once is also specified by the background-repeat property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
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>
In the example above, the background image is shown in the same place as the text. We want to
change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
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>
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page),
use the background-attachment property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
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>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<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>
Background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
The shorthand property for background is background:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World! /h1>
<p>Now the background image is only shown once, and it is also positioned away from the
text.</p>
<p>In this example we have also added a margin on the right side, so that the background image
will not disturb the text.</p>
</body>
</html>
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
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
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in
newspapers and magazines).</p>
<div>
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.'
</div>
</body>
</html>
Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border).
Example
<!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>
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 is also properties for specifying each of the borders (top, right, bottom, and left):
Example
<!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>
If the border-style property has four values:
border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
If the border-style property has three values:
border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
If the border-style property has two values:
border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:
border-style: dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also works with border-
width and border-color.
Border - Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing
with borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
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>
<!DOCTYPE html>
<html>
<head>
<style>
p{
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>
Rounded Borders
The border-radius property is used to add rounded borders to an element:
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>
CSS Margins
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border.
With CSS, you have full control over the margins. There are CSS properties for setting the
margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
Example
<!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>
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
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
</style>
</head>
<body>
<h2>Using the margin shorthand property</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>
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
If the margin property has three values:
margin: 25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
If the margin property has two values:
margin: 25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
If the margin property has one value:
margin: 25px;
o all four margins are 25px
The auto Value
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
</style>
</head>
<body>
<h2>Use of the auto Value</h2>
<p>You can set the margin property to auto to horizontally center the element within its
container.
The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins:</p>
<div>
This div will be centered because it has margin: auto;
</div>
</body>
</html>
The inherit Value
This example lets the left margin be inherited from the parent element:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
border: 1px solid red;
margin-left: 100px;
p.one {
margin-left: inherit;
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container">
<p class="one">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>
Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal
to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
h2 {
margin: 20px 0 0 0;
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top
margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px +
20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
In the example above, the <h1> element has a bottom margin of 50px. The <h2> element has a
top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the <h1> and the <h2>
would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up
being 50px.
CSS Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the
padding for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
The following example sets different padding for all four sides of a <p> element:
Example
<!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>
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
Example
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding: 50px 30px 50px 80px;
</style>
</head>
<body>
<h2>Using the padding shorthand property</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>
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
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
If the padding property has two values:
padding: 25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px
If the padding property has one value:
padding: 25px;
o all four paddings are 25px
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
div.ex1 {
padding: 25px 50px 75px 100px;
div.ex2 {
padding: 25px 50px 75px;
div.ex3 {
padding: 25px 50px;
}
div.ex4 {
padding: 25px;
</style>
</head>
<body>
<h2>Using the padding shorthand property</h2>
<div class="ex1">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><br>
<div class="ex2">This div element has a top padding of 25px, a left and right padding of 50px,
and a bottom padding of 75px.</div><br>
<div class="ex3">This div element has a top and bottom padding of 25px, and a left and right
padding of 50px.</div><br>
<div class="ex4">This div element has a top, right, bottom and left paddding of 25px.</div>
</body>
</html>
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>
<div></div>
</body>
</html>
This element has a height of 100 pixels and a width of 500 pixels.
Example
<!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>
<div></div>
</body>
</html>
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the <div> above occurs when the browser window is smaller than the width of
the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small
windows.
Tip: Drag the browser window to smaller than 500px wide, to see the difference between the
two divs!
This element has a height of 100 pixels and a max-width of 500 pixels.
Note: The value of the max-width property overrides width.
The following example shows a <div> element with a height of 100 pixels and a max-width of
500 pixels:
Example
<!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>
<div></div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
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.
Example
<!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>
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:
Example
<!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>
CSS Outline
The CSS outline properties specify the style, color, and width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the element
"stand out".
However, the outline property is different from the border property - The outline is NOT a part
of an element's dimensions; the element's total width and height is not affected by the width of
the outline.
Outline Style
The outline-style property specifies the style of the outline.
The outline-style property 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. The effect depends on the outline-color value
ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
inset - Defines a 3D inset outline. The effect depends on the outline-color value
outset - Defines a 3D outset outline. The effect depends on the outline-color value
none - Defines no outline
hidden - Defines a hidden outline
The following example first sets a thin black border around each <p> element, then it shows the
different outline-style valu
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid black;
outline-color:red;
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</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.
</body>
</html>
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)
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid black;
outline-style: double;
outline-color: red;
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>
Outline Width
The outline-width property specifies the width of the outline.
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.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid black;}
p.one {
outline-style: double;
outline-color: red;
outline-width: thick;
p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="one">This is some text.</p>
<p class="two">This is some text.</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.
</body>
</html>
Outline - Shorthand property
To shorten the code, it is also possible to specify all the individual outline properties in one
property.
The outline property is a shorthand property for the following individual outline properties:
outline-width
outline-style (required)
outline-color
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid black;
outline: 5px dotted red;
</style>
</head>
<body>
<h2>The outline Property</h2>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</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 remo ved from this
colored "Try it Yourself" link.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
p{
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
a{
text-decoration:none;
color: #008CBA;
</style>
</head>
<body>
<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>
</body>
</html>
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
<!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>
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>
When the text-align property is set to "justify", each line is stretched so that every line has
equal width, and the left and right margins are straight (like in magazines and newspapers):
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in
newspapers and magazines).</p>
<div>
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.'
</div>
</body>
</html>
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>
a{
text-decoration: none;
</style>
</head>
<body>
<p>A link with no underline: <a href="https://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
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>
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>
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
<!DOCTYPE html>
<html>
<head>
<style>
p{
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>
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>
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>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
Text Direction
The direction property is used to change the text direction of an element:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
direction: rtl;
</style>
</head>
<body>
<div>This is default text direction.</div>
<div class="ex1">This is right-to-left text direction.</div>
</body>
</html>
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>
<head>
<style>
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>
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>
Difference Between Serif and Sans-serif Fonts
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>
<head>
<style>
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>
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>
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
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
h2 {
font-size: 30px;
p{
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>
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>
In the example above, the text size in em is the same as the previous example in pixels. However,
with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it
should when made larger, and smaller than it should when made smaller.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
h1 {
font-size: 2.5em;
h2 {
font-size: 1.875em;
p{
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>
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>
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>
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:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<!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:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!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>
<body class="container">
<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>
<br><br>
<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<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>
Google Icons
To use the Google icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>
CSS Links
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
<!DOCTYPE html>
<html>
<head>
<style>
a{
color: hotpink;
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
/* visited link */
a:visited {
color: green;
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
</style>
</head>
<body>
<p><b><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>
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>
Background Color
The background-color property can be used to specify a background color for links:
<!DOCTYPE html>
<html>
<head>
<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>
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
CSS Lists
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
ul.b {
list-style-type: square;
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
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>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
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>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Remove bullets, margin and padding:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
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>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
CSS Tables
able 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>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
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>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<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>
f you only want a border around the table, only specify the border property for <table>:
<!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>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
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>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
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>
<style>
table, td, th {
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>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Table Padding
To control the space between the border and the content in a table, use the padding property on <td>
and <th> elements:
<!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>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Horizontal Dividers
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>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or
odd) table rows:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
th, td {
text-align: left;
padding: 8px;
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or
odd) table rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
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>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full
content:
<!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>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
CSS Layout - width and max-width
Using width, max-width and margin: auto;
As mentioned in the previous chapter; a block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
Setting the width of a block-level element will prevent it from stretching out to the edges of its
container. Then, you can set the margins to auto, to horizontally center the element within its
container. The element will take up the specified width, and the remaining space will be split
equally between the two margins:
<!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>
CSS Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
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>
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>
xample explained
The first CSS block is similar to the code in Example 1. In addition, we have added what should
happen when a user hovers over one of the images. In this case we want the image to NOT be
transparent when the user hovers over it. The CSS for this is opacity:1;.
When the mouse pointer moves away from the image, the image will be transparent again.
An example of reversed hover effect:
Run »Result Size: 668 x 513
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* 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>
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>
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>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
First, we create a <div> element (class="background") with a background image, and a border. Then
we create another <div> (class="transbox") inside the first <div>. The <div class="transbox">
have a background color, and a border - the div is transparent. Inside the transparent <div>, we
add some text inside a <p> element.
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="#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>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Vertical Navigation Bar Examples
Create a basic vertical navigation bar with a gray background color and change the background color
of the links when the user moves the mouse over them:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
li a {
display: block;
color: #000;
padding: 8px 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="#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>
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
li a {
display: block;
color: #000;
padding: 8px 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="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Full-height Fixed Vertical Navbar
Create a full-height, "sticky" side navigation:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
li a {
display: block;
color: #000;
padding: 8px 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="#news">News</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>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to
the "standard" code above:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline;
</style>
</head>
<body>
<ul>
<li><a href="#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>
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color and change the background
color of the links when the user moves the mouse over them:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
li a {
display: 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="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
.active {
background-color: #4CAF50;
</style>
</head>
<body>
<ul>
<li><a 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>
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="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
Fixed Navigation Bar
Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the
page:
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover:not(.active) {
background-color: #111;
.active {
background-color: #4CAF50;
</style>
</head>
<body>
<ul>
<li><a 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>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<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>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
Gray Horizontal Navbar
An example of a gray horizontal navigation bar with a thin gray border:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
li {
float: left;
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover:not(.active) {
background-color: #ddd;
li a.active {
color: white;
background-color: #4CAF50;
</style>
</head>
<body>
<ul>
<li><a 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>
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color and change the background
color of the links when the user moves the mouse over them:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
}
li a {
display: 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="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
CSS Dropdowns
Create a hoverable dropdown with CSS
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
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>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Example Explained
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.
Use a container element (like <div>) to create the dropdown content and add whatever you want
inside of it.
Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
CSS) The .dropdown class use position:relative, which is needed when we want the dropdown
content to be placed right below the dropdown button (using position:absolute).
The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be
displayed on hover (see below). Note the min-width is set to 160px. Feel free to change
this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set
the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the CSS3 box-shadow property to make the dropdown
menu look like a "card".
The :hover selector is used to show the dropdown menu when the user moves the mouse over the
dropdown button.
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>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be
URLs.</p>
</body>
</html>
CSS Tooltip
Demo: Tooltip Examples
A tooltip is often used to specify extra information about something when the user moves the mouse
pointer over an element:
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>
<body style="text-align:center;">
<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 an desirable way.</p>
</body>
</html>
Example Explained
HTML) Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse
over this <div>, it will show the tooltip text.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext".
CSS) The tooltip class use position:relative, which is needed to position the tooltip text
(position:absolute).Note: See examples below on how to position the tooltip.
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover
(see below). We have also added some basic styles to it: 120px width, black background color,
white text color, centered text, and 5px top and bottom padding.
The CSS3 border-radius property is used to add rounded corners to the tooltip text.
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div>
with class="tooltip".
Positioning Tooltips
In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (<div>). Also
note that top:-5pxis 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>
CSS Image Gallery
CSS can be used to create an image gallery.
Image Gallery
The following image gallery is created with CSS:
<!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>
<body>
<div class="gallery">
<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>
<div class="gallery">
<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>
<div class="gallery">
<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>
Responsive Image Gallery
How to use CSS3 media queries to create a responsive image gallery.
<!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>
<div class="responsive">
<div class="gallery">
<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>
</div>
<div class="responsive">
<div class="gallery">
<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>
</div>
<div class="responsive">
<div class="gallery">
<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>
<div class="responsive">
<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>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<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>
CSS Forms
The look of an HTML form can be greatly improved with CSS:
Styling Input Fields
Use the width property to determine the width of the input field:
<!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>
</html>
The example above applies to all <input> elements. If you only want to style a specific input type,
you can use attribute selectors:
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
etc..
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: 13px 20px;
margin: 8px 0;
box-sizing: border-box;
</style>
</head>
<body>
<p>Padded text fields:</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>
</html>
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>
</html>
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>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
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>
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>
Example 2
<!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>
<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>
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>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
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>
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-image: url('searchicon.png');
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>
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>
<textarea>Some text...</textarea>
</form>
</body>
</html>
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>
<option value="usa">USA</option>
</select>
</form>
</body>
</html>
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">
<input type="submit" value="Submit">
</body>
</html>
You might also like
- Hourglass Workout Program by Luisagiuliet 276% (21)Hourglass Workout Program by Luisagiuliet 251 pages
- Read People Like A Book by Patrick King-Edited61% (69)Read People Like A Book by Patrick King-Edited12 pages
- Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health77% (13)Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health260 pages
- Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits83% (1016)Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits13 pages
- The 36 Questions That Lead To Love - The New York Times94% (34)The 36 Questions That Lead To Love - The New York Times3 pages
- The 36 Questions That Lead To Love - The New York Times95% (21)The 36 Questions That Lead To Love - The New York Times3 pages
- Jeffrey Epstein39s Little Black Book Unredacted PDF75% (12)Jeffrey Epstein39s Little Black Book Unredacted PDF95 pages
- The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt23% (954)The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt38 pages
- CSS Syntax: Cascading Style Sheet (CSS)No ratings yetCSS Syntax: Cascading Style Sheet (CSS)10 pages
- What Is CSS?: CSS Stands For Cascading Style SheetsNo ratings yetWhat Is CSS?: CSS Stands For Cascading Style Sheets28 pages
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyNo ratings yetCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy88 pages
- Web-Engineering: CSS - Cascading Style SheetNo ratings yetWeb-Engineering: CSS - Cascading Style Sheet15 pages
- Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSSNo ratings yetWeb Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS27 pages
- A Comple Tutorial On Cascading Style SheetsNo ratings yetA Comple Tutorial On Cascading Style Sheets186 pages
- Css Notes (Web Designing) Css IntroductionNo ratings yetCss Notes (Web Designing) Css Introduction7 pages
- Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample CodesFrom EverandMaster Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample CodesNo ratings yet
- Information and Communication TechnologyNo ratings yetInformation and Communication Technology18 pages
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>ERROR: The requested URL could not be retrieved</TITLE> <STYLE type="text/css"><!--BODY{background-color:#ffffff;font-family:verdana,sans-serif}PRE{font-family:sans-serif}--></STYLE> </HEAD><BODY> <H1>ERROR</H1> <H2>The requested URL could not be retrieved</H2> <HR noshade size="1px"> <P> While trying to process the request: <PRE> TEXT http://www.scribd.com/titlecleaner?title=merit_list13-1.xlsx HTTP/1.1 Host: www.scribd.com Proxy-Connection: keep-alive Accept: */* Origin: http://www.scribd.com X-CSRF-Token: 5d1c4e34b6c663eec8fbe2799aad5acc4a94ad58 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22 X-Requested-With: XMLHttpRequest Referer: http://www.scribd.com/upload-document?archive_doc=43940400&metadNo ratings yet<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>ERROR: The requested URL could not be retrieved</TITLE> <STYLE type="text/css"><!--BODY{background-color:#ffffff;font-family:verdana,sans-serif}PRE{font-family:sans-serif}--></STYLE> </HEAD><BODY> <H1>ERROR</H1> <H2>The requested URL could not be retrieved</H2> <HR noshade size="1px"> <P> While trying to process the request: <PRE> TEXT http://www.scribd.com/titlecleaner?title=merit_list13-1.xlsx HTTP/1.1 Host: www.scribd.com Proxy-Connection: keep-alive Accept: */* Origin: http://www.scribd.com X-CSRF-Token: 5d1c4e34b6c663eec8fbe2799aad5acc4a94ad58 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22 X-Requested-With: XMLHttpRequest Referer: http://www.scribd.com/upload-document?archive_doc=43940400&metad1,551 pages
- M-Fin Microfinance Loan Management System: T. A. MakumburageNo ratings yetM-Fin Microfinance Loan Management System: T. A. Makumburage101 pages
- Quick CSS Transitions and Animations GuideNo ratings yetQuick CSS Transitions and Animations Guide8 pages
- 4 Periodical Examination in ICT 5: I. Matching TypeNo ratings yet4 Periodical Examination in ICT 5: I. Matching Type3 pages
- Server-Side Web Programming: Introduction To Java Server PagesNo ratings yetServer-Side Web Programming: Introduction To Java Server Pages23 pages
- English (UK) Style Guide: Published: June, 2017No ratings yetEnglish (UK) Style Guide: Published: June, 201742 pages
- Aspirants-AS1143-11th-computer-applications-list-of-2m-and-3m-questions-english-mediumNo ratings yetAspirants-AS1143-11th-computer-applications-list-of-2m-and-3m-questions-english-medium15 pages
- Templete Surat Keterangan Update Siswa Penerima Beasiswa Pemuda TangguhNo ratings yetTemplete Surat Keterangan Update Siswa Penerima Beasiswa Pemuda Tangguh41 pages
- Chapters of Linux Gym: (Green Means Completed) : The Filesystem 1No ratings yetChapters of Linux Gym: (Green Means Completed) : The Filesystem 13 pages
- Download Complete R Markdown Cookbook Chapman Hall CRC The R Series 1st Edition Yihui Xie PDF for All Chapters100% (12)Download Complete R Markdown Cookbook Chapman Hall CRC The R Series 1st Edition Yihui Xie PDF for All Chapters50 pages
- Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real HealthLivingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
- Donald Trump & Jeffrey Epstein Rape Lawsuit and AffidavitsDonald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
- The 36 Questions That Lead To Love - The New York TimesThe 36 Questions That Lead To Love - The New York Times
- The 36 Questions That Lead To Love - The New York TimesThe 36 Questions That Lead To Love - The New York Times
- Jeffrey Epstein39s Little Black Book Unredacted PDFJeffrey Epstein39s Little Black Book Unredacted PDF
- The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - ExcerptThe 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
- What Is CSS?: CSS Stands For Cascading Style SheetsWhat Is CSS?: CSS Stands For Cascading Style Sheets
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
- Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSSWeb Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS
- Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample CodesFrom EverandMaster Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>ERROR: The requested URL could not be retrieved</TITLE> <STYLE type="text/css"><!--BODY{background-color:#ffffff;font-family:verdana,sans-serif}PRE{font-family:sans-serif}--></STYLE> </HEAD><BODY> <H1>ERROR</H1> <H2>The requested URL could not be retrieved</H2> <HR noshade size="1px"> <P> While trying to process the request: <PRE> TEXT http://www.scribd.com/titlecleaner?title=merit_list13-1.xlsx HTTP/1.1 Host: www.scribd.com Proxy-Connection: keep-alive Accept: */* Origin: http://www.scribd.com X-CSRF-Token: 5d1c4e34b6c663eec8fbe2799aad5acc4a94ad58 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22 X-Requested-With: XMLHttpRequest Referer: http://www.scribd.com/upload-document?archive_doc=43940400&metad<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>ERROR: The requested URL could not be retrieved</TITLE> <STYLE type="text/css"><!--BODY{background-color:#ffffff;font-family:verdana,sans-serif}PRE{font-family:sans-serif}--></STYLE> </HEAD><BODY> <H1>ERROR</H1> <H2>The requested URL could not be retrieved</H2> <HR noshade size="1px"> <P> While trying to process the request: <PRE> TEXT http://www.scribd.com/titlecleaner?title=merit_list13-1.xlsx HTTP/1.1 Host: www.scribd.com Proxy-Connection: keep-alive Accept: */* Origin: http://www.scribd.com X-CSRF-Token: 5d1c4e34b6c663eec8fbe2799aad5acc4a94ad58 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22 X-Requested-With: XMLHttpRequest Referer: http://www.scribd.com/upload-document?archive_doc=43940400&metad
- M-Fin Microfinance Loan Management System: T. A. MakumburageM-Fin Microfinance Loan Management System: T. A. Makumburage
- 4 Periodical Examination in ICT 5: I. Matching Type4 Periodical Examination in ICT 5: I. Matching Type
- Server-Side Web Programming: Introduction To Java Server PagesServer-Side Web Programming: Introduction To Java Server Pages
- Aspirants-AS1143-11th-computer-applications-list-of-2m-and-3m-questions-english-mediumAspirants-AS1143-11th-computer-applications-list-of-2m-and-3m-questions-english-medium
- Templete Surat Keterangan Update Siswa Penerima Beasiswa Pemuda TangguhTemplete Surat Keterangan Update Siswa Penerima Beasiswa Pemuda Tangguh
- Chapters of Linux Gym: (Green Means Completed) : The Filesystem 1Chapters of Linux Gym: (Green Means Completed) : The Filesystem 1
- Download Complete R Markdown Cookbook Chapman Hall CRC The R Series 1st Edition Yihui Xie PDF for All ChaptersDownload Complete R Markdown Cookbook Chapman Hall CRC The R Series 1st Edition Yihui Xie PDF for All Chapters