CSS (Cascading Style Sheet)

CSS
Cascading Style Sheet
Prepared By: Farhad Mirkhail 1

CSS Introduction/ What is CSS?
• CSS is a language that describes the style of an HTML document.
• CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.
• CSS 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.
CSS Introduction/ CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!

CSS 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.
CSS Syntax/ Example
In the following example all <p> elements will be center-
aligned, with a red text color:
p {
color: red;
text-align: center;
}

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements
based on their element name, id, class, attribute, and more.
Some famous CSS Selector are as fallow:
• Tag/ Element or HTML Codes

• ID
• Class
• Grouping
• Compound
The element/code Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this
case, all <p> elements will be center-aligned, with a red text
color):
Exp:
p {
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select
one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
The style rule below will be applied to the HTML element with id="para1":
Note: An id name cannot start with a number!

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

The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,

followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and
center-aligned:
Exp:
.center {
text-align: center;
color: red; }

The class Selector – continue
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:
Exp:
p.center {
text-align: center;
color: red; }

The class Selector – continue
HTML elements can also refer to more than one class.
In the example below, the <p> element will be styled according

to class="center" and to class="large":
Note: A class name cannot start with a number!
Exp:
<p class="center large">This paragraph refers to two classes.</p>

Grouping Selectors
If you have elements with the same style definitions, like this:
Exp:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Grouping Selectors – continue
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the

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

Compound Selectors
Combination of two or more than two selector is called compound
selector
Exp:
table tr td p {
color: red;
text-align: center;

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:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
1. External style sheet

2. Internal style sheet
3. Inline style

CSS Introduction/ CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of
an entire website by changing just one file!

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:
Exp:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

External Style Sheet – continue
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.
body {
background-color: lightblue; }
h1 {
color: navy;
margin-left: 20px; }
Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;).
The correct way is: margin-left: 20px;

Internal Style Sheet
An internal style sheet 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:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1>
element:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Tip: An inline style loses many of the advantages of a style sheet (by mixing content
with presentation). Use this method sparingly.

Cascading Order
What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual"
style sheet by the following rules, where number 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 (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
CSS Colors
• Colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
• In HTML, a color can be specified by using a color name:

• Exp: Red, Blue, Green, white, black ...
• HTML supports 140 standard color names.

Background, Text and Border Color
You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>
You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
You can set the color of borders:
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:
Same as color name "Tomato":
<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between
0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb(0,
0, 0).
To display the color white, all color parameters must be set to 255, like this:
rgb(255, 255, 255).
RGB Color Examples

HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00

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

HEX Color Examples

HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL)
in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the

full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark,

100% is white
HSL Color Examples

HSL Color Examples
Saturation:
Saturation can be describe as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.

HSL Color Examples
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).

HSL Color Examples
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:

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

RGBA Color Examples

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

HSLA Color Examples

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.
body {
background-color: lightblue; }
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)“
h1 { background-color: green; }
div {background-color: lightblue;}

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.
body {
background-image: url("paper.gif");
}

Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally
and vertically.
Some images should be repeated only horizontally or vertically, or they will

look strange, like this:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; }
Tip: To repeat an image vertically, set background-repeat: repeat-y;
If you don’t want to the background repeate horizontally or vertically, set

background-repeat: no-repeat;
Background position
The position of the image is specified by the background-position property:
body {
background-image: url("img_tree.png");
background-position: right top;
}

Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest
of the page), use the background-attachment property:
body {
background-image: url("img_tree.png");
background-position: right top;
background-attachment: fixed;
}

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:

body { background: #ffffff url("img_tree.png") no-repeat right top; }
When using the shorthand property the order of the property values is:
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

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

CSS Borders
Border Style:
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border

CSS Borders – continue
Border Style:
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
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;}

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
p.two {
border-style: solid;
border-width: medium; }
p.three {
border-width: 2px 10px 4px 20px; }
Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:(red, #ff0000, rgb(255,0,0), transparent)
The border-color property can have from one to four values (for the top
If border-color is not set, it inherits the color of the element.

p.two {
border-color: green; }
p.three {
border-color: red green blue yellow;}
Border - Individual Sides
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
The example above gives the same result as this:

p {
border-style: dotted solid;
}

Border - Individual Sides – continue
If the border-style property has four values:
border-style: dotted solid double dashed;

top border is dotted
right border is solid
bottom border is double
left border is dashed
If the border-style property has three values:
border-style: dotted solid double;

top border is dotted
right and left borders are solid
bottom border is double
Border - Individual Sides - continue
If the border-style property has two values:
border-style: dotted solid;

top and bottom borders are dotted
right and left borders are solid
If the border-style property has one value:
border-style: dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also

works with border-width and border-color.
Border - Shorthand Property
As you can see from the examples above, there are many properties to
consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual

border properties in one property.
The border property is a shorthand property for the following individual

border properties:
• border-width
• border-style (required)
• border-color
p { border: 5px solid red; }
Rounded Borders
The border-radius property is used to add rounded borders to an
element:
p {
border: 2px solid red;
border-radius: 5px; }
Note: The border-radius property is not supported in IE8 and earlier

versions.

CSS Margins
The CSS margin properties are used to create space around elements(top,
right, bottom, left), outside of any defined borders.
Margin - Individual Sides:
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
CSS Margins - continue
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the

parent element
Tip: Negative values are allowed.

CSS Margins - continue
The following example sets different margins for all four sides of a
<p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in
one property.
If the margin property has four values:
margin: 25px 50px 75px 100px;

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
p { margin: 25px 50px 75px 100px; }

Margin - Shorthand Property – continue
If the margin property has three values:
margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px
p {
margin: 25px 50px 75px;
}

Margin - Shorthand Property – continue
If the margin property has two values:
margin: 25px 50px;

top and bottom margins are 25px
right and left margins are 50px
p {margin: 25px 50px;}
If the margin property has one value:
margin: 25px;
all four margins are 25px
p {margin: 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:
div {
width: 300px;
margin: auto;
}
The inherit Value
div {
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}

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:
h1 {
margin: 0 0 50px 0;}
h2 {
margin: 20px 0 0 0;}

Margin Collapse
In the example above, the <h1> element has a bottom margin of 50px and 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.

All CSS Margin Properties

CSS Padding
The CSS padding properties are used to generate space around an element's
content(top, right, bottom, left), inside of any defined borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left

CSS Padding - continue
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the

parent element
Note: Negative values are not allowed.

CSS Padding - continue
The following example sets different padding for all four sides of a
<div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in
one property.
If the padding property has four values:
padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
div { padding: 25px 50px 75px 100px;}

Padding - Shorthand Property – continue
If the padding property has three values:
padding: 25px 50px 75px;

top padding is 25px
right and left paddings are 50px
bottom padding is 75px
div {
padding: 25px 50px 75px;
}

Padding - Shorthand Property – continue
If the padding property has two values:
padding: 25px 50px;

top and bottom paddings are 25px
right and left paddings are 50px
div {padding: 25px 50px;}
If the padding property has one value:
padding: 25px;
all four paddings are 25px
div {padding: 25px;}

Padding and Element Width
The CSS width property specifies the width of the element's content area. The content area is
the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the
total width of the element. This is often an undesirable result.
In the following example, the <div> element is given a width of 300px. However, the actual
rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right
padding):
div {
width: 300px;
padding: 25px;
}
Padding and Element Width – continue
To keep the width at 300px, no matter the amount of padding, you can use the box-
sizing property. This causes the element to maintain its width; if you increase the
padding, the available content space will decrease. Here is an example:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

All CSS Padding Properties

CSS 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.
div {
height: 100px;
width: 500px;
background-color: powderblue; }

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.
Setting max-width – continue
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!
Setting max-width – continue
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:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

All CSS Dimension Properties

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:

The CSS Box Model – continue
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.

The CSS Box Model – continue
Exp:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
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:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;

Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:
Total element width = width + left padding + right padding +

left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding +

top border + bottom border + top margin + bottom margin

CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the
borders, to make the element "stand out".
CSS has the following outline properties:
• outline-style
• outline-color
• outline-width
• outline-offset
• outline
CSS Outline – continue
Note: Outline differs from borders! Unlike border, the outline
is drawn outside the element's border, and may overlap other
content. Also, the outline is NOT a part of the 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, and can have one of the
following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline
Outline Style – continue
The following example shows the different outline-style values:

Outline Style – Examples
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;}
Note: None of the other outline properties will have any effect, unless the
outline-style property is set!
Outline Style – Examples

CSS (Cascading Style Sheet)

Uploaded by

Copyright:

Available Formats

CSS (Cascading Style Sheet)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS (Cascading Style Sheet)

Uploaded by

Copyright:

Available Formats

CSS

Cascading Style Sheet

Prepared By: Farhad Mirkhail 1

• CSS describes how HTML elements are to be displayed on screen,

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

CSS removed the style formatting from the HTML page!

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

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

Prepared By: Farhad Mirkhail 5

Some famous CSS Selector are as fallow:

• Tag/ Element or HTML Codes

Note: An id name cannot start with a number!

Prepared By: Farhad Mirkhail 8

To select elements with a specific class, write a period (.) character,

Prepared By: Farhad Mirkhail 9

In the example below, only <p> elements with class="center"

Prepared By: Farhad Mirkhail 10

In the example below, the <p> element will be styled according

Note: A class name cannot start with a number!

Prepared By: Farhad Mirkhail 11

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the

Prepared By: Farhad Mirkhail 13

Prepared By: Farhad Mirkhail 14

Comments are ignored by browsers.

1. External style sheet

Prepared By: Farhad Mirkhail 16

With an external stylesheet file, you can change the look of

an entire website by changing just one file!

Prepared By: Farhad Mirkhail 17

Prepared By: Farhad Mirkhail 18

The correct way is: margin-left: 20px;

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

Prepared By: Farhad Mirkhail 21

1. Inline style (inside an HTML element)

• In HTML, a color can be specified by using a color name:

Prepared By: Farhad Mirkhail 23

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

You can set the color of text:

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

You can set the color of borders:

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

Same as color name "Tomato":

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

Prepared By: Farhad Mirkhail 25

rgb(red, green, blue)

Prepared By: Farhad Mirkhail 27

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00

Prepared By: Farhad Mirkhail 28

Prepared By: Farhad Mirkhail 29

hsl(hue, saturation, lightness)

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

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

Prepared By: Farhad Mirkhail 31

Saturation can be describe as the intensity of a color.

100% is pure color, no shades of gray

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

Prepared By: Farhad Mirkhail 32