Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML Part 3 CSS

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling web pages and explaining its syntax, including selectors, properties, and values. It covers various types of selectors, methods for inserting CSS, and the cascading order of styles, emphasizing the importance of inline, internal, and external styles. Additionally, it includes examples of how to apply styles to HTML elements, manage multiple styles, and format appearances using colors and borders.

Uploaded by

Saman Balasooriya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Part 3 CSS

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling web pages and explaining its syntax, including selectors, properties, and values. It covers various types of selectors, methods for inserting CSS, and the cascading order of styles, emphasizing the importance of inline, internal, and external styles. Additionally, it includes examples of how to apply styles to HTML elements, manage multiple styles, and format appearances using colors and borders.

Uploaded by

Saman Balasooriya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

10.

5 Uses Style sheet to change the appearance of web pages

Introduction to CSS
 CSS is used to control the style of a web document in a simple and easy way.
 CSS is the acronym for "Cascading Style Sheet".
 CSS is a simple design language intended to simplify the process of making web
pages presentable.

Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts.
 Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. All the HTML attributes are
converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }

Example − You can define a table border as follows −


table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value
of that property.
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>

Comments

A CSS comment is used to add explanatory notes to the code or to prevent the browser from
interpreting specific parts of the style sheet. By design, comments have no effect on the layout
of a document.

Syntax
Comments can be placed wherever white space is allowed within a style sheet. They
can be used on a single line, or traverse multiple lines.

/* A one-line comment */
/*
A comment
which stretches
over several
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>

CSS selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

 The element selector selects HTML elements based on the element name.
 Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
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>
</body> </html>

The CSS id Selector

 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element is 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 CSS rule below will be applied to the HTML element with id= "para1":
Note: An id name cannot start with a number!

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 CSS class Selector


 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the
class name.
In this example 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>
<p>Another paragraph.</p>
</body>
</html>

You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be center-aligned:
<!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>

HTML elements can also refer to more than one class.


Example
In this example the <p> element will be styled according to class="center" and to
class="large":
Note: A class name cannot start with a number!
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</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>
<p class="center large">This paragraph will be red, center-aligned, and in a
large font-size.</p>
</body>
</html>
The CSS Universal Selector
 The universal selector (*) selects all HTML elements on the page.
 The CSS rule below will affect every HTML element on the page:
Example
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me! </p>
</body>
</html

The CSS Grouping Selector


 The grouping selector selects all the HTML elements with the same style definitions.
 Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
h1 {
text-align: center;
color: red;
}

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

p{
text-align: center;
color: red;
}
 It will be better to group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
<!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>

Ways of inserting CSS


There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

External CSS

 With an external style sheet, you can change the look of an entire website by changing
just one file!
 Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML
page:
<!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, and must be saved with a .css
extension.
 The external .css file should not contain any HTML tags.
 Here is how the "mystyle.css" file looks like:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value and the unit (margin-left: 20 px;). The
correct way is: margin-left: 20px;

Internal CSS

 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
<!DOCTYPE html>
<html><head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

Inline CSS

 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.
Example
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">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.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will
be "orange":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal
style</p>
</body></html>

Example
However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal
style</p>
</body>
</html>

Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules,
where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an
internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work
(try removing the inline CSS first, then the internal, then the external).</p>
</body></html>

Appearance formatting
Background (color, image)

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.
In CSS, a color can be specified by using a color name:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

CSS Background Color

You can set the background color for HTML elements:


Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
A person with positive thinking mentality anticipates happiness, health and
success, and believes that he or she can overcome any obstacle and difficulty.
Positive thinking is not a concept that everyone believes and follows. Some,
consider it as nonsense, and scoff at people who follow it. However, there is a
growing number of people, who accept positive thinking as a fact, and believe
in its effectiveness.
</p>
</body></html>

CSS Text Color

You can set the color of text:


Example
<!DOCTYPE html>
<html><body>
<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;"> A person with positive thinking mentality


anticipates happiness, health and success, and believes that he or she can
overcome any obstacle and difficulty.</p>

<p style="color:MediumSeaGreen;"> Positive thinking is not a concept that


everyone believes and follows. Some, consider it as nonsense, and scoff at
people who follow it. However, there is a growing number of people, who
accept positive thinking as a fact, and believe in its effectiveness.</p>

</body></html>

CSS Border Color

You can set the colour of borders:


Example
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values:
Same as color name "Tomato":
 rgb(255, 99, 71)
 #ff6347
 hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:
 rgba(255, 99, 71, 0.5)
 hsla(9, 100%, 64%, 0.5)
Example
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB,
HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>

CSS RGB Value

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

rgb(red, green, blue)

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

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

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

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

Experiment by mixing the RGB values below:

rgb(255, 99, 71)


Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
<p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>

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

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>
<p>By using equal values for red, green, and blue, you will get different shades of
gray.</p>
</body>
</html>

CSS HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the
others are set to the lowest value (00).

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<p>In HTML, you can specify colors using Hex values.</p>
</body></html>

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

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>
<p>By using equal values for red, green, and blue, you will get different shades of
gray.</p>
</body>
</html>

HSL Value

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

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

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

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
<p>In HTML, you can specify colors using HSL values.</p>
</body>
</html>
Saturation

 Saturation can be described as the intensity of a color.


 100% is pure color, no shades of gray
 50% is 50% gray, but you can still see the color.
 0% is completely gray, you can no longer see the color.

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>
</body>
</html>
Lightness

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

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>
</body>
</html>

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the
lightness from 0% to 100% to get darker/lighter shades:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>
<p>With HSL colors, shades of gray are made by setting the saturation to 0%, and
adjusting the lightness according to how dark/light the gray color should be.</p>
</body>
</html>

RGBA Value

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

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at
all):

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
<p>You can make transparent colors by using the RGBA color value.</p>
</body>
</html>

HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which
specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at
all):

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
<p>You can make transparent colors by using the HSLA color value.</p>
</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

CSS background-color

 The background-color property specifies the background color of an element.


Example
The background color of a page is set like this:
<!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>

With CSS, a colour is most often specified by:

 a valid colour name - like "red"


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

Example
Here, the <h1>, <p>, and <div> elements will have different background colours:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

CSS background-image

 The background-image property specifies an image to use as the background of an


element.
Example
The background image for a page can be set like this:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>

CSS background-repeat

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 background image is repeated only horizontally!</p>
</body>
</html>
Tip: To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-
repeat property:
Example
Show the background image only once:
<!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 placed 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.

CSS background-position

The background-position property is used to specify the position of the background image.
Example
Position the background image in the top-right corner:
<!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>

CSS background-attachment

The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page):
Example
Specify that the background image should be fixed:
<!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>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</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>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

Example
Specify that the background image should scroll with the rest of the page:
<!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: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>

CSS 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
Use the shorthand property to set all the background properties in one declaration:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the
background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the
top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the
background image.</p>
</body>
</html>
When using the shorthand property the order of the property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
It does not matter if one of the property values is missing, as long as the other ones are in this
order.

Text and fonts


Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid gray;
padding: 8px;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p{
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a{
text-decoration: none;
color: #008CBA;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>This text is styled with some of the text formatting properties. The heading uses
the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified.
The underline is removed from this colored
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a>
link.</p>
</div>
</body>
</html>

Text Color

The color property is used to set the color of the text. The color is specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

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

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

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


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


Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>
</body>
</html>

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

CSS Fonts
The CSS font properties define the font family, boldness, size, and the style of a text.
Difference between Serif and Sans-serif Fonts

CSS Font Families

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

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

Generic Font family Description


family

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

Font Family

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


 The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font, and so on.
 Start with the font you want, and end with a generic family, to let the browser pick a
similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like:
"Times New Roman".
More than one font family is specified in a comma-separated list:
Example
<!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)

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

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is
16px.

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
Example
<!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>

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

 To allow users to resize the text (in the browser menu), many developers use em
instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size. The default text size in browsers is 16px. So, the
default size of 1em is 16px.
 The size can be calculated from pixels to em using this formula: pixels/16=em

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

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the <body>
element:

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

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

Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:
Hello World

Resize the browser window to see how the font size scales.

Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size
scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will
set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the
viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm
wide, 1vw is 0.5cm.

Font Variant

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

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

Example
<!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 Dulip Kumara.</p>
<p class="small">My name is Kumara Mendis.</p>
</body>
</html>

CSS Links
With CSS, links can be styled in different ways.

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example
<!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

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

When setting the style for several link states, there are some order rules:

 a:hover MUST come after a:link and a:visited


 a:active MUST come after a:hover

Text Decoration

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

Example
<!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:
Example
<!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>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<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:

Example

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

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

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

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

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list item. The
start of each line of a list item will be aligned vertically.
"list-style-position: inside;" means that the bullet points will be inside the list item. As it is
part of the list item, it will be part of the text and push the text at the start:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the
seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to
Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a source
of caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the
seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to
Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a source
of caffeine) and coca leaves</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>:

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

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one
declaration:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body></html>

When using the shorthand property, the order of the property values are:

 list-style-type (if a list-style-image is specified, the value of this property will be


displayed if the image for some reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should appear inside or
outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property
will be inserted, if any.

Styling List With Colors

We can also style lists with colours, 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:
Example
<!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
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th> <th>Contact</th><th>Country</th>
</tr>
<tr>
<td>MASS Holdings</td><td>Maria Anders</td><td>Germany</td>
</tr>
<tr>
<td>JC Builders</td><td>Jane Rivers</td><td>Sweden</td>
</tr>
<tr>
<td>Comercial DC</td><td>Francisco Chang</td><td>Mexico</td>
</tr>
<tr>
<td>Novel Industries</td><td>Roland Mendel</td><td>Austria</td>
</tr>
<tr>
<td>Island Trading</td><td>Helen Rose</td><td>UK</td>
</tr>
</table></body></html>

Table Borders

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

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

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

Notice that the table in the example above has double borders. This is because both the table
and the <th> and <td> elements have separate borders.

Collapse Table Borders

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

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

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

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

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


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

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

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

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

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

Example
<!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 colour and text colour of <th> elements:
Example
<!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>

You might also like