Cascading Style Sheet (CSS)

Cascading
Style Sheet
(CSS)
What is CSS?
● CSS is the acronym for ‘Cascading Style

Sheet’.
● CSS defines how HTML elements are to be
displayed on screen
● In other words, CSS is a simple design
language intended to simplify the process
of making web pages presentable
What is CSS?
● CSS handles the look and feel part of a web

page
● Using CSS, we can control the color of the
text, the style of fonts, the spacing between
paragraphs, background images or colors to
be used etc.
● Most commonly, CSS is combined with the
markup language like HTML
Advantages of CSS
● Easy Maintenance –
To change the style of an element that appears
across the whole site, we have to make change at
one place only.
● Faster Download –
Using CSS, HTML code will be less which in turn
result in faster download.
Advantages of CSS
● Accessibility–
Separating style from content makes life very
easy for visitors who prefer to view only the
content of a web page, or to modify the content.
● Consistency–
Layout and position of navigation can be
completely consistent across a website using
CSS.
CSS Syntax
● CSS Comprises of style rules that are

interpreted by the browser and then
applied to the corresponding elements in
the document.
● A CSS rule set consists of a selector and a
declaration block.
● The selector points to the HTML element for
which we want to apply style.
CSS Syntax
● The declaration block contains one or more

declarations separated by semicolons.
● CSS declaration always ends with a
semicolon and declaration block is
surrounded by curly braces.
● Each declaration includes a property name
and a value separated by a colon.
CSS Syntax
● Property is a type of attribute of HTML tag.

All HTML attributes are converted into CSS
properties.
● Values are assigned to properties. Multiple
values for a property are separated by
space.
● e.g., h1 {color:red; font-size:14px;}
CSS Selectors
● CSS Selectors allow us to select HTML

elements that we want to style.
● CSS selectors can select HTML elements

based on their name, id, class etc.
CSS element Selector
● The element selector selects the elements

based on the element name.
● e.g., we can select all <p> elements, i.e., all

paragraphs in the page to have same style.
Example
<html>
<head>
<style>
p {color:blue; text-align:center;}
</style>
</head>
<body>
<p>First CSS page</p>
<p>Paragraph styled with CSS</p>
</body>
</html>
CSS id Selector
● The id selector uses the id attribute of an

HTML element to select a specific element.
● The id attribute of an element should not
start with a number.
● To select an element with a specific id,
write a hash(#) character followed by the id
of the element.
Example
<html>
<head>
<style>
#p1 {color:blue; text-align:center;}
</style>
</head>
<body>
<p id=“p1”>First CSS page</p>
<p>Paragraph styled with CSS</p>
</body>
</html>
CSS class Selector
● The class selector selects elements with a

specific class attribute.
● The class attribute of an element should not
start with a number.
● To select elements with a specific class,
write a period(.) character followed by the
name of the class.
The class Selector
<html>
<head>
<style>
.center {color:blue; text-align:center;}
</style>
</head>
<body>
<p class=“center”>First CSS page</p>
<p class=“center”>Paragraph styled with CSS</p>
</body>
</html>
CSS Universal Selector
● The universal selector selects all HTML

elements on the page.
● It is denoted by asterisk (*) character.
<head>
<style>
*{color:blue; text-align:center;}
</style>
</head>
Grouping Selectors
● If we have multiple elements with the same

style definitions, we can group the selectors
to minimize the code.
● To group selectors, separate each selector

with a comma.
Grouping Selectors
<html>
<head>
<style>
h1 {color:blue; text-align:center;}
h2 {color:blue; text-align:center;}
p {color:blue; text-align:center;}
</style>
</head>
Grouping Selectors
<head>
<style>
h1, h2, p{
color: blue; text-align: center;}
</style>
</head>
CSS Comments
● Comments are ignored by the browser.
● CSS comments starts with /* and ends with

*/.
● Comments can also span multiple lines.

CSS Comments
<html>
<head>
<style>
p {color:blue;
/* single-line comment */
text-align:center;}
/* This is
multi-line
comment*/
</style>
</head>
CSS Background
● CSS Background properties are used to

define the background effects of an element.
● Background properties are –
● background-color
● background-image
● background-repeat
● background-position
Background-color
● The background-color property specifies

the background color of an element.
● The background color of a page can be set
using body as a selector.
● e.g., body { background-color: yellow;}
Background-color
● With CSS, a color is mostly specified by –

● HEX value like “#FF0000”
● RGB value like “rgb(255,0,0)”
● color name like “red”
● Different elements in web page can have
different background color.
Example
<html>
<head>
<style>
h1 { background-color: #6495ed;}
p{ background-color: #e0ffff; }
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<p>This paragraph has its own background color.</p>
</body>
</html>
Background Image
● The background-image property specifies
an image to use as the background of an
element.
● By default, the image is repeated so it
covers the entire element.
● The background image for a page can be set
like -
e.g., body { background-image: url(“image”);
}
Background Image
● By default, the background-image property

repeats an image both horizontally and
vertically.
● Some images should be repeated only
horizontally or vertically.
● For this, we need background-repeat
property.
Repeat Horizontally
● If the image is to be repeated horizontally,

code should be –
body{
background-image : url(“image”);
background-repeat : repeat-x;
}
Repeat Vertically
● If the image is to be repeated vertically,

code should be –
body{
background-image : url(“image”);
background-repeat : repeat-y;
}
Background Repeat
● If the background image should appear as

the original image without any repetition,
use background-repeat property and set the
value as no-repeat.
e.g., body{ background-image :
url(“image”);
background-repeat : no-repeat;
}
Setting Position for Background Image
● We can change the position of the

background image so that it will not disturb
the text on the webpage.
● The position of the image can be specified
by the background-position property.
● The position can be left, right or center.
Example
<html>
<head>
<style>
body{
background-image: url(“Image”);
background-repeat: no-repeat;
background-position: left;
}
</style>
</head>
Example
<body>
<p>Hello World!</p>
<p>This is my First CSS Page.</p>
</body>
</html>
Background Size
● Background-size property specifies the size of

the background images.
● Default value is auto, i.e., background image

will be displayed with actual width and height.
● To specify different size, assign width and

height for the image in pixels.
Example
<html>
<head>
<style>
body{
background-size: 150px 100px;
}
</style>
</head>
Background-attachment
● Background-attachment property specifies

whether a background image should be
fixed or should scroll with the rest of the
page.
● We can set value as ‘fixed’ so that
background image is fixed with regard to
viewport.
● To scroll the background image along with
the element, we have to set the value as
‘scroll’.
Example
<head>
<style>
body{
background-attachment : fixed;
}
</style>
</head>
Example
<body>
<p> Fixed background image</p>
<p> Scroll Down to check </p>
</body>
CSS Text
• CSS allows to manipulate text using CSS

properties.
• Few such properties are –

• Text Color
• Text Alignment
• Text Decoration
• Text Transformation
• Text Indentation
Text Color
● The color property is used to set the color

of the text.
● e.g.,
body { color: blue;}
h1 { color: #00ff00;}
h2 { color: rgb(255,0,0);}
Text Alignment
● The text-align property is used to set the

horizontal alignment of a text.
● Text can be centered, or aligned to the left
or right, or justified.
● e.g.,
h1 { text-align: center; }
p.class1 { text-align: right;}
p.class2 { text-align: justify;}
Text Alignment
● The text-align-last property is used to

specify the horizontal alignment of the last
line of a text.
● e.g.,
p.a { text-align-last: center; }
p.b { text-align-last: right;}
p.c { text-align-last: justify;}
Vertical Alignment
● The vertical-align property is used to set

the vertical alignment of an element w.r.t
text.
● e.g.,
img.a { vertical-align: baseline; }
img.b { vertical-align: text-top; }
img.c { vertical-align: text-bottom; }
Text Decoration
• CSS allows to decorate the text using CSS

properties.
• These properties are –

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
Decoration Line to Text
● The text-decoration-line property can be

used to add a decoration line to text.
● Possible values that can be used are
overline, line-through and underline.
● e.g., h1 {text-decoration-line : overline;}
h2 {text-decoration-line : line-
through;}
h3 {text-decoration-line : underline;}
Color for Decoration Line
● The text-decoration-color property can be

used to set the color for decoration line.
● e.g., h1 {text-decoration-line : overline;
text-decoration-color : red; }
h2 {text-decoration-line : line-
through;
text-decoration-color : blue; }
Style for Decoration Line
● The text-decoration-style property can be

used to set the style for decoration line.
● Possible values that can be used are solid,
double, dotted, dashed etc.
text-decoration-color : red;
text-decoration-style : dotted; }
Thickness for Decoration Line
● The text-decoration-thickness property can be

used to set the thickness for decoration line.
text-decoration-color : red;
text-decoration-style : solid;
text-decoration-thickness : 5px}
Text Decoration
● The text-decoration property can be used to

combine above decoration properties
together.
● e.g., h1{ text-decoration : underline red; }
h2{ text-decoration : underline double
red; }
h3{ text-decoration : overline red 4px; }
Text Decoration
● The text-decoration property can also be

used to remove decorations from text.
● It is mostly used to remove underlines from
links for design purposes.
● e.g., a {
text-decoration : none;
}
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
first letter of each word.
● Possible values are uppercase, lowercase or
capitalize.
Example
<html>
<head>
<style>
h1 { text-transform: uppercase;}
h2{ text-transform: capitalize;}
p{ text-transform: lowercase;}
</style>
</head>
Example
<body>
<h1>Heading in uppercase</h1>
<h2>Heading with first letter in each word in
uppercase</h2>
<p>Paragraph in lowercase</p>
</body>
</html>
Text Spacing
● Spacing can be added in various elements

using CSS properties.
● These properties are –
● text-indent
● letter-spacing
● line-height
● word-spacing
● white-space
Text Indentation
● The text-indent property is used to specify

the indentation of the first line of a text.
● e.g., p {
text-indent: 100px;
}
Space between characters
● The letter-spacing property is used to

specify the space between characters or
letters in a word.
● e.g., h1 { letter-spacing: 8px;}

h3 { letter-spacing: -2px;}
Space between words
● The word-spacing property is used to

specify the space between the words.
● e.g., h1 { word-spacing: 6px;}

p { word-spacing: -1px;}
Space between lines
● The line-height property is used to specify

the space between the lines in a paragraph.
● e.g., .p1 { line-height: 20px;}

.p2 {line-height: 50px;}
Handling White Spaces
● The white-space property is used to specify

how white-space inside an element is
handled.
● e.g., .p1 { white-space : nowrap;}

Text Shadow
● The text-shadow property is used to apply
shadow to the text.
● Values can be –
● h-shadow, i.e., position of horizontal
shadow
● v-shadow, i.e., position of vertical shadow
● blur-radius, i.e., blur radius, adds blur
effect
● color, i.e., color of the shadow
Text Shadow
● e.g., p {
text-shadow: 3px 3px 4px red;
}
or
● e.g., p {
text-shadow: 2px 2px blue;
}
Text Direction
● The direction property is used to set the

direction of a text.
● Possible values are ltr or rtl.
● If value is ltr, text will be rendered from left
to right and if value is rtl, text will be
rendered from right to left.
● e.g., p { direction : rtl;
}
CSS Fonts
• CSS allows to set fonts of a content

available in an HTML element using CSS
properties.
• Few such properties are –
• Font family
• Font style
• Font size
• Font weight
Font Family
● The font-family property is used to set the

font family of a text.
● e.g., p
{ font-family: “Times New Roman”;
}
Font Style
● The font-style property is mostly used to

specify the italic text.
● Possible values are normal, italic or oblique.
● e.g., p
{ font-style: italic;
}
Font Size
● The font-size property is used to set the size of

the text.
● The font-size value can be absolute or relative
size and specified in pixels.
● Other possible values are small, medium,
large.
● e.g., p
{ font-size: 20 px;
}
Font Weight
● The font-weight property is used to specify

boldness of a font.
● Possible values are normal, bold, lighter or
number like 100, 200, 300 etc.
● e.g., .p1 { font-weight: bold;}
.p2 { font-weight: 800;}
Font Variant
● The font-variant property is used to specify

whether a text should be displayed in a small-
caps font.
● In a small-caps font, all lowercase letters are
converted to uppercase letters but in a
smaller font size.
● Possible values are – normal, small-caps.
Font Variant
● e.g., .p1 {
font-variant: normal;
}
.p2 {
font-variant: small-caps;
}
CSS Margin
● The CSS margin properties define the space

around elements.
● The margin clears an area around an element

outside the border.
● The margin does not have a background color,

and is completely transparent.
CSS Margin
● CSS allows to set the margin for each side of

an element.
● Few such properties are –

margin-top
margin-right
margin-bottom
margin-left
CSS Margin
margin-top -
specifies the top margin of an element
margin-right –
specifies the right margin of an element
margin-bottom -
specifies the bottom margin of an element
margin-left -
specifies the left margin of an element
Margin – shorthand property
The margin property is a shorthand property for

margin-top, margin-right, margin-bottom and
margin-left.
So, it is possible to specify all the margin

properties in one property.
Possible values for CSS Margin
Value Description
auto Browser calculates a margin
length Specifies margin in px, pt, cm etc.
% Specifies a margin in percent of

the width of the containing
element.
inherit specifies that the margin should be
inherited from the parent element
Example with Individual Margin
p{
margin-top: 80px;
margin-bottom: 80 px;
margin-right: 120px;
margin-left: 40px;
}
Example with shorthand
property
p{
margin: 80px 120px 80px 40px;
}
- top margin is 80px
- right margin is 120 px
- bottom margin is 80px
- left margin is 40px
Examples with shorthand property
• p { margin: 80px 120px 40px; }

- top margin is 80px
- left and right margin is 120px
- bottom margin is 40 px
• p { margin: 80px 100px; }
- top and bottom margin is 80px
- left and right margin is 100px
• p { margin: 50px; }
- all four margins are 50px
CSS Border
The CSS border properties allow us to specify
how the border of the box representing an
element should look.
Three properties of a border are –
● The border-color specifies the color of a
border.
● The border-style specifies whether a border
should be solid line, dashed line, double line
etc.
● The border-width specifies the width of a
border.
border-color Property
We can individually change the color of the

bottom, left, top and right sides of an element’s
border using the properties –
● border-bottom-color
● border-top-color
● border-left-color
● border-right-color
Example for border-color
p{
border-top-color: blue;
border-bottom-color: green;
border-left-color: grey;
border-right-color: brown;
}
or
p{
border-color: red;
}
border-style Property
● We can individually change the style of the

bottom, left, top and right borders of an
element using the properties -
● border-bottom-style
● border-top-style
● border-left-style
● border-right-style
border-style Values
● The border-style property allow to select one of

the following style -
● none – defines no border
● dotted – defines dotted border
● dashed – defines dashed border
● solid – defines a solid border
● double – defines two borders
border-style Values
● groove – defines a 3D grooved border

● ridge – defines a 3D ridged border
● inset – defines a 3D inset border, it makes
the box look like it is embedded in the
page
● outset – defines a 3D outset border, it
makes the box look like it is coming out
of the canvas.
Example for border-style
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
or
p{
border-style: solid;
}
border-width Property
● We can individually change the width of the

bottom, left, top and right borders of an
element using the properties -
● border-bottom-width
● border-top-width
● border-left-width
● border-right-width
border-width Values
● The border-width is set in pixels.
● It can also be set using the three pre-defined

values as thin, medium or thick.
● The border-width property does not work if

border-style is not set.
Example for border-width
p{
border-top-width: 4px;
border-right-width: thin;
border-bottom-width: 4pt;
border-left-width: medium;
}
or
p{
border-width: 5px;
}
border-shorthand Property
● The border property is a shorthand for the

following individual border properties –
● border-width
● border-style (required)
● border-color
● e.g., p { border: 4px solid blue;}
border-radius Property
● The border-radius property can be used to
make the corners rounded.
● We can also specify the width and height for
a border if used with paragraphs so that it
will be embedded around the text in the
paragraph.
● The property padding is used to specify the
gap between the paragraph text and the
border.
● It is mainly used with the border having
rounded corners.
Example for rounded corners
<html>
<head>
<style>
#corner { border-radius: 25px;
border: 2px solid green;
padding: 20px;
width: 200px;
height: 150px; }
Example for rounded corners
</style>
</head>
<body>
<p id=“corner”>
Paragraph having border with rounded
corners
</p>
</body>
</html>
Ways to insert CSS
● CSS is applied to a web page using three

different ways –
● Inline style sheet
● Internal style sheet
● External style sheet
Inline CSS
● Inline CSS applies styles directly to the
elements by adding declarations as a part of
style attribute.
● e.g. <html>
<body>
<p style=“color: red;”>
Paragraph where the inline style makes
it red.</p>
</body>
</html>
Internal Style Sheet
● Internal style sheet applies styles by placing
the CSS rules inside the <style>tag inside the
<head> tag.
● e.g. <html>
<head>
<style> p{color: red;} </style>
Paragraph where the inline style makes
it red.</p>
</head>
<body> …. </body>
</html>
External Style Sheet
● External style sheet is ideal when the style is

applied to many pages.
● With an external style sheet, you can change
the look of an entire Web site by changing
just one file.
● Each page must include a link to the style
sheet with the <link> tag.
● The <link> tag defines a link between a

document and external resource.
● It is used inside the head section.
● External style sheet file should not contain
any HTML tags.
● The style sheet file must be saved with .css
extension.
● Reference to the css file is given from html file

using the syntax –
<head>
<link rel=“stylesheet” type=“text/css” href=“style.
css”>
</head>
- rel specifies the relationship between the
current document and the linked document
● Before referencing the stylesheet, css file

should exist.
● Contents of css file will be like –
body { background-color:lightblue;}
h1{color:red;margin-left:20px;}
● Once the css file is ready, it can be specified

with href attribute.
CSS Links
● Links can be styled in different ways with the

help of CSS properties.
● Few such properties are color, font-family,
background-color etc.
● E.g.,
a{
color : green; }
CSS Links
● Links can be styled differently depending on

what state they are in.
● Four link states are –
● a:link – 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 is clicked
CSS Links
<html>
<head>
<style>
a:link { color: orange;}
a:visited { color: red;}
a:hover { color: green;}
a:active { color: blue;}
</style>
</head>
Background for CSS Links
• Background color for links can be specified
using background-color property.
<style>
a:link { color: orange; background-color:
blue;}
a:visited { color: red; background-color:
orange;}
a:hover { color: green; background-color:
red;}
a:active { color: blue; background-color:
green;}
</style>
Link Button
● Links can be styled to look like as a button by

combining several CSS properties.
a { background-color : red;
color : white;
padding : 15px 30 px;
text-align: center;
text-decoration: none; }
CSS Lists
● There are two types of lists:

− unordered lists - the list items are marked with
bullets
− ordered lists - the list items are marked with
numbers or letters
● The CSS list properties allow us to:

− Set different list item markers for ordered lists
− Set different list item markers for unordered lists
CSS Properties for Lists
● list-style-type
specifies the type or shape of list item
marker
● list-style-position
specifies the position of the list-item
markers
generally used for a long point to
specify whether bullet point should
be displayed outside the list item or
inside the list item
CSS Properties for Lists
● list-style-image
specifies an image for the marker rather
than a bullet point or a number.
● list-style
serves as shorthand for the style-type,
style-position and style-image property
Values for list-style-type(UL)
● disc (default)
A filled-in circle
● circle
An empty circle
● square
A filled-in square
Values for list-style-type(OL)
● upper-roman
● lower-roman
● upper-alpha
● lower-alpha
● decimal
● decimal-leading-zero
Example
<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>
Example
<body>
<ul class=‘a’> <li>…..</li> </ul>
<ul class=‘b’> <li>…..</li> </ul>
<ol class=‘c’> <li>…..</li> </ol>
<ol class=‘d’> <li>…..</li> </ol>
</body>
Values for list-style-position
● inside
text on the second line will appear
indented to where the text should have
started
● outside
text will be aligned with the start of the
first line to the right of the bullet
Example
<style>
ul.a {list-style-position: outside;}
ul.b {list-style-position: inside;}
</style>
<body>
<ul class=‘a’> <li>…..</li> </ul>
<ul class=‘b’> <li>…..</li> </ul>
</body>
Values for list-style-image
● url(image URL)
image URL will be the path of the image file
Example
<style>
ul {list-style-image: url(“image”);}
</style>
<body>
<ul >
<li>…..</li> </ul>
</ul>
</body>
list-style
● The property list-style is a shorthand
property.
● It is used to combine the properties list-style-

type, list-type-position or list-type-image.
● It is also used to remove default list style by

assigning value as none.
ul { list-style: none; }
Horizontal Lists
• Lists can be displayed horizontally with the

help of CSS properties.
• Both unordered list and ordered list can be

displayed horizontally.
• List should be assigned id before applying

style to it.
Horizontal Lists
<html>
<head>
<style>
ul#menu li {display: inline}
</style>
</head>
<body>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Horizontal Lists
<html>
<head>
<style>
ul#menu li { display: inline}
ul#menu li a { background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
}
ul#menu li a:hover { background-color:
green} </style>
</head>
Horizontal Lists
<html>
<body>
<ul id="menu">
<li><a href="HTML.html">HTML</a></
li>
<li><a href="CSS.html">CSS</a></li>
<li><a href="JAVA.html">JavaScript</
a></li>
<li><a href="PHP.html">PHP</a></li>
</ul>
</body>
</html>
CSS Tables
● Using CSS properties, we can

● specify table border
● collapse table borders
● specify width and height for a table
● set text alignment
● specify table padding and color
● set position of table caption
Table Border
● To specify table border, we have to use

border property.
● e.g.,
<style>
table, th, td { border: 1px solid black;}
</style>
Collapsing Table Borders
● The border-collapse property sets whether

the table borders are collapsed into a single
border or separated.
● Possible values for border-collapse property
are collapse or separate(default).
● e.g.,
<style>
table { border-collapse: collapse;}
</style>
Horizontal Dividers
● The border-bottom property is used for th

and td to get horizontal dividers.
● Similar to border property, style, color and
thickness can be specified for divider.
● e.g.,
<style>
th, td { border-bottom: solid 1px grey;}
</style>
Width and Height for a Table
● Width and height property can be used to

define width and height of a table.
● e.g.,
<style>
table { width: 100%; height:240px;}
th{ height: 60px;}
</style>
Text Alignment
● The text-align property sets the horizontal

alignment, like left, right, or center.
● The vertical-align property sets the vertical
alignment, like top, bottom, or middle.
● e.g.,
<style>
th, td {text-align : center; vertical-align:
bottom;}
</style>
Table Padding
● To control the space between the border and

content in a table, we can use the padding
property on <td> and <th> elements
● e.g.,
<style>
th, td { padding: 10px;}
</style>
Table Color
● Using color and background-color property,

we can change color and background color
for <td> and <th>.
● e.g.,
<style>
th { background-color: green;
color: white;}
td { background-color: lightgreen;
color: black;}
</style>
Hoverable Table
● Background color can be used for the tr:

hover selector to highlight table rows on
mouse over.
● e.g.,
<style>
tr:hover
{ background-color: orange;
}
</style>
Striped Table
● Background color can be applied to all odd or

all even table rows to get zebra-striped table.
● e.g.,
<style>
tr:nth-child(even)
{ background-color: lightblue;
}
</style>
Table Caption
● The caption-side property specifies the

placement of a table caption.
● Possible values for caption-side are top or
bottom.
● e.g.,
<style>
caption {
caption-side: bottom;
}
</style>

Cascading Style Sheet (CSS)

Uploaded by

Document Information

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

Cascading Style Sheet (CSS)

Uploaded by

Copyright:

Available Formats

Cascading

● CSS is the acronym for ‘Cascading Style

● CSS handles the look and feel part of a web

● CSS Comprises of style rules that are

● The declaration block contains one or more

● Property is a type of attribute of HTML tag.

● CSS Selectors allow us to select HTML

● CSS selectors can select HTML elements

● The element selector selects the elements

● e.g., we can select all <p> elements, i.e., all

● The id selector uses the id attribute of an

● The class selector selects elements with a

● The universal selector selects all HTML

● If we have multiple elements with the same

● To group selectors, separate each selector

● Comments are ignored by the browser.

● CSS comments starts with /* and ends with

● Comments can also span multiple lines.

● CSS Background properties are used to

● The background-color property speciﬁes

● With CSS, a color is mostly speciﬁed by –

● By default, the background-image property

● If the image is to be repeated horizontally,

● If the image is to be repeated vertically,

● If the background image should appear as

● We can change the position of the

● Background-size property speciﬁes the size of

● Default value is auto, i.e., background image

● To specify different size, assign width and

● Background-attachment property speciﬁes

• CSS allows to manipulate text using CSS

• Few such properties are –

● The color property is used to set the color

● The text-align property is used to set the

● The text-align-last property is used to

● The vertical-align property is used to set

• CSS allows to decorate the text using CSS

• These properties are –

● The text-decoration-line property can be

● The text-decoration-color property can be

● The text-decoration-style property can be

● The text-decoration-thickness property can be

● The text-decoration property can be used to

● The text-decoration property can also be

● The text-transform property is used to

● Spacing can be added in various elements

● The text-indent property is used to specify

● The letter-spacing property is used to

● e.g., h1 { letter-spacing: 8px;}

● The word-spacing property is used to

● e.g., h1 { word-spacing: 6px;}

● The line-height property is used to specify

● e.g., .p1 { line-height: 20px;}

● The white-space property is used to specify

● e.g., .p1 { white-space : nowrap;}

● The direction property is used to set the

• CSS allows to set fonts of a content

● The font-family property is used to set the

● The font-style property is mostly used to

● Possible values are normal, italic or oblique.

● The font-size property is used to set the size of

● The font-weight property is used to specify

● The font-variant property is used to specify