Unit 2

Cascading Style Sheets

 Introduction
• CSS or Cascading Style Sheet or the second pillar of front-end
development after HTML.
• Thus, making our webpage beautiful to the user.
• Let us breakdown the word CSS or Cascading Style Sheet
• Cascading: means that styles can fall (or cascade) from one style sheet to
another. That is, there can be multiple CSS files linked to the same HTML
document, where the last one matters the most.

• Style: Adding Styling our HTML tags.

• Sheets: Writing our style code in different documents.

• CSS is designed to make style sheets for web pages.

• It is independent, i.e., it can be used with any XML-based markup
language.
 History of Cascading Style Sheet (CSS)
• 1994: Cascading Style Sheet was First Proposed by Hakon
Wium Lie on 10th October
• 1996: Finally, Cascading Style Sheet was published on
17th November with influencer Bert Bos, after which he
became co-author of Cascading Style Sheet.
• 1996: Cascading Style Sheet became official with CSS and
was published in December
 Cascading Style Sheet (CSS) Syntax
h1{
Selector {
text-align: left;
Property_1 : value;
Property_2 : value; color: blue;
Property_3 : value; }
} #select {
color: red;
}
• Here, the role of the Selector is to select the element you want to target.
• Some of the basic selectors are tags, ids, and classes.
• Syntax in CSS forms a key-value pair, where key is a property which
includes background, color, font-size etc. and the value is the value
assigned to the properties.
 How does CSS Works?
• CSS brings style to your webpage by providing different style options to HTML
element, For example
<h1>
This is a paragraph.
</h1>
• We can create a Header using the <h1></h1> tag in HTML. But how do we make
it look attractive? This is where CSS comes into play-
• If you want to make the header color to be red and centered on the webpage
people are viewing, you will use CSS code like
h1{
color: red;
text-align:center;
}
 How does CSS Works?
• In this case, the h1 (the header) is called a selector. Basically, in CSS code, we
need to specify on which element the CSS styling will take place.
• The selector is written to the left with curly brackets, and in the information
between the curly brackets is called a declaration, which contains values to the
specified properties that are applied to the selectors.
• In the given example, the "color" and the "text-align" are properties while "red"
and "center" is their values, respectively. Hence,
{
color: red;
text-align:center;
}
• Above code is a declaration.
 CSS Comment
• In programming, a comment is a readable explanation of a code. The importance
of comment is to make the source code easier for humans to interpret. So,
similarly, we can add a comment in CSS code too. Let us take an example to
explain this further.
/*
This is a comment on styling the body of the page.
Multiple comments can be made too.
*/
body {
font-family: Sans-serif;
font-size: 50 em /* 1em = 10px */
}
 CSS Comment
• In programming, a comment is a readable explanation of a code. The importance of
comment is to make the source code easier for humans to interpret. So, similarly, we can
add a comment in CSS code too. Let us take an example to explain this further.
/*
This is a comment on styling the body of the page.
Multiple comments can be made too.
*/
body {
font-family: Sans-serif;
font-size: 50 em /* 1em = 10px */
}
• The lines inside /* and */ are CSS comments, and this helps in writing a bunch of lines
explaining the code which will not be executed.
• Thus, comments in CSS lets someone read the CSS file to understand the reason behind
the particular line of CSS code.
 Selectors
• The Selectors in CSS are used to select the specific content you want to style.
• In CSS there are many types of selectors used for selection HTML content, such are:
• The Element Selector
• The Universal Selectors
• Id Selector
• Class Selectors
The Element Selector :
• Element Selector is nothing but a way of providing styling to a selected HTML element.
Syntax:
element {
property : value
}
e.g.
p{
background-color: Red;
}
 Selectors
The Universal selectors
• The sign asterisk (*) is used for defining universal selectors. It is used to select all the
content of an HTML Page. For Example,-
*{
property: value;
}
• While selecting an HTML element, if we use an asterisk, the property of value will be
implemented on the overall HTML page, irrespective of the parent-child relation of
HTML tags.
 Selectors
<html> <body>
<head> <center>
<style> <h1 style="color: Red">This is a header!</h1>
*{ <div>
<p>
background-color: grey;
<span> div parent to p parent to span </span>
} </p>
*p{ <span>
background-color: Red; <h3>div parent to span parent to h3</h3>
} </span>
* p span { </div>
background-color: yellow; </center>
</body>
}
</html>
div * h3 {
background-color: orange;
}
</style>
</head>
 Selectors
The ID Selector :
• The ID Selector is the most commonly used operator, which is used to set the style to the
given Id. The Id attribute is a unique attribute value in HTML. We denote Id selector by
(#).
#id {
property:value;
}
 Selectors
<!DOCTYPE html> <body>
<html> <!-- id attribute declare here -->
<head> <h1 id="first">First Header</h1>
<!-- CSS property using id attribute --> <h2 id="second">Second Header</h2>
<style> </body>
*{ </html>
background-color: white;
}
#first {
color: black;
text-align: center;
}
#second {
text-align: center;
color: #ff1493;
}
</style>
</head>
 Selectors
The Class Selectors:
The class selectors select the element with a specified class attribute. To select the element
from a particular class, we use (.) followed by the class name.
Syntax:

.class {
property:value;
}
 Selectors
<!DOCTYPE html> <body>
<html> <!-- id attribute declare here -->
<head> <h1 class="first">First Header</h1>
<!-- CSS property using id attribute --> <h2 class="second">Second Header</h2>
<style> </body>
*{ </html>
background-color: white;
}
.first {
color: black;
text-align: center;
}
.second {
text-align: center;
color: #ff1493;
font-style: Italic;
}
</style>
 Selectors
Grouping Selectors:
You can give the same properties to a number of selectors without having to repeat them.
Syntax:
For example, if you have something like:
h2 {
color: red;
}

.thisOtherClass {
color: red;
}

.yetAnotherClass {
color: red;
}
 Selectors
You can simply separate selectors with commas in one line and apply the same properties to
them all so, making the above:

h2, .thisOtherClass, .yetAnotherClass {

color: red;
}
 Importing CSS to HTML
There are, in total, three ways of inserting CSS into an HTML page. The ways are :
• Inline CSS
• Internal CSS
• External CSS

Inline CSS:
• It is a way of adding a unique style to a particular element.
• To use Inline Styles, you can add the style attribute in the relevant HTML tag, and then
inside the style attribute, you can provide different styles.
Syntax:
<element style="property:value; property:value;"></element>
 Importing CSS to HTML
<html>
<body>
<h1 style="color: black; text-align: center">Header One</h1>
<h2 style="color: #ff69b4; text-align: center"><i>Header Two</i></h2>
</body>
</html>
 Importing CSS to HTML
Internal CSS:
Internal CSS is used under one single HTML page.
For inserting internal CSS, we place the whole CSS style inside the head tag of HTML by
using the <style> tag.
<html> </head>
<head> <body>
<style> <h1>Header One</h1>
body { <h2>Header Two</h2>
background-color: linen; </body>
} </html>
h1 {
color: Black;
text-align: center;
}
h2 {
color: #ff69b4;
text-align: center;
}
</style>
 Importing CSS to HTML
External CSS :
With the help of external CSS, we use the same CSS file again and again.
The way we do it is by making a CSS file and linking it to the HTML inside the <head> tag
using the <link> tag. Syntax :

<link rel="stylesheet" href="file_name.css">

Here, in href, we provide the path of the CSS file we want to use for our HTML Page.
<head>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<h1>Header One</h1>
<h2>Header Two</h2>
</body>
Importing CSS to HTML
body{
background-color: linen;
}

h1 {
color: Black;
text-align: center;
}
h2 {
color: #FF69B4;
text-align: center;
}
 CSS Background
CSS background property is used to define the background effects on element.
There are 5 CSS background properties that affects the HTML elements:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

background-color
The background-color property is used to specify the background color of the
element. Color values in CSS are most often specified in the following formats:

a.a color name - like "red"

b.a HEX value - like "#ff0000"
c.an RGB value - like "rgb(255, 0, 0)"
 CSS Background
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello CSE 3B. This is an example of CSS background-color.</p>
</body>
</html>
 CSS Background
background-image
The background-image property is used to set an image as a background of an element. By default,
the image covers the entire element. You can set the background image for a page like this.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello CSE 3B</h1>
</body>
</html>
 CSS Background
background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello CSE 3B</h1>
</body>
</html>
 CSS Background
background-attachment
The background-attachment property is used to specify if the background image is
fixed or scroll with the rest of the page in browser window.
If you set fixed the background image, then the image will not move during scrolling
in the browser. Let's take an example with fixed background image.

background: white url('bbb.gif');

background-repeat: no-repeat;
background-attachment: fixed;
 CSS Background
background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.
You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

background: white url('good-morning.jpg');

background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
CSS Text Format
 CSS Text Format
Text Color
The color property actively changes the color of the text when defined. It is used to specify
the desired color for the text.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Color </title>
</head>
<body>
<p style="color: crimson;">Hello world….</p>
<p style="color: royalblue;">Welcome to PSIT…</p>
</body>
</html>
 CSS Text Format
Text Alignment
The text-align property actively changes the horizontal alignment of text by utilizing
properties such as left, right, center, and justify.
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment </title>
</head>
<body>
<p style="text-align:left;">Hello World...</p>
<p style="text-align:center;">Welcome to PSIT...</p>
<p style="text-align:right;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Text Decoration
This property can be used to decorate the text. It can be defined by using underline,
overline, and line-through properties
<!DOCTYPE html>
<html>
<head>
<title>Text Decoration </title>
</head>
<body>
<p style="text-decoration:line-through;">Hello World...</p>
<p style="text-decoration:underline;">Welcome to PSIT...</p>
<p style="text-decoration:overline;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Text Transformation
This property can be used to change cases of the text. It can be defined by using
capital, uppercase, and lowercase properties.
<!DOCTYPE html>
<html>
<head>
<title>Text Indentation </title>
</head>
<body>
<p style="text-indent:20px;">Hello World...</p>
<p style="text-indent:5cm;">Welcome to PSIT...</p>
<p style="text-indent:30pt;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Text Indentation
This property can be used to indent the first line of the text. It can be defined by
using px, cm, and pt properties.
<!DOCTYPE html>
<html>
<head>
<title>Text Transformation </title>
</head>
<body>
<p style="text-transform: capitalize;">Hello World...</p>
<p style="text-transform: uppercase;">Welcome to PSIT...</p>
<p style="text-transform: lowercase;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Word Spacing
The word-spacing property actively creates space between words in text. It can be
defined by using the word-spacing property.
<!DOCTYPE html>
<html>
<head>
<title>Text Transformation </title>
</head>
<body>
<p style="word-spacing:5px;">Hello World...</p>
<p style="word-spacing:10px;">Welcome to PSIT...</p>
<p style="word-spacing:20px;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Letter Spacing
The letter-spacing property actively adjusts the space between characters, allowing for the
creation of letter spacing.
<!DOCTYPE html>
<html>
<head>
<title>Text Transformation </title>
</head>
<body>
<p style="letter-spacing:5px;">Hello World...</p>
<p style="letter-spacing:10px;">Welcome to PSIT...</p>
<p style="letter-spacing:15px;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Line Height
The line height property actively gives space between lines of text when defined.

<!DOCTYPE html>
<html>
<head>
<title>Text Transformation</title>
</head>
<body>
<p style="letter-spacing:5px;">Hello World...</p>
<p style="letter-spacing:10px;">Welcome to PSIT...</p>
<p style="letter-spacing:15px;">Kanpur...</p>
</body>
</html>
 CSS Text Format
Line Height
The line height property actively gives space between lines of text when defined.

<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
<style>
h3{
line-height:2.5;
}
h4{
line-height:150%;
}
</style>
</head>
 CSS Text Format
<body>
<h3>
PSIT (Educational Institute) is a <br> leading global provider of skill-
based education
</h3>
<h4>
At PSIT, it is a matter of pride to us to make job oriented<br> hands
on courses available to anyone, anytime and anywhere.
</h4>
</body>
</html>
 CSS Text Format
Text-shadow
The text-shadow property actively gives a shadow effect to the text when defined. It uses
components such as the left position, top position, blur size, and color name.

<!DOCTYPE html>
<html>
<head>
<title>Text Shadow</title>
<style>
h3{
text-shadow:3px 3px 2px lightblue;
}
h4{
text-shadow:3px 3px 2px plum;
}
</style>
CSS Text Format
</head>
<body>
<h3>
Hello World...Welcome to PSIT...
</h3>
<h4>
PSIT (Educational Institute) is a skill-based education
</h4>
</body>
</html>
 CSS Text Format
Font Family
This property provides various types of font-family names for the selected text. For instance,
Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.

<!DOCTYPE html>
<html>
<head>
<title>Font Family</title>
</head>
<body>
<p style="font-family:cursive;font-size:10pt;">Hello World...</p>
<p style="font-family:sans-serif;font-size:15pt;">Welcome to Educba...</p>
<p style="font-family:Georgia, serif;font-size:20pt;">Educational Consultant...</p>
</body>
</html>
 CSS Font Properties
• CSS font properties allow the developers to manipulate how the font will look
and feel on the webpage.
• The size, style, color, and much more can be changed by using properties. For
e.g., if the developer wants to make a part of the text more impactful, he/she can
BOLD the part.
• This property provides various types of font-family names for the selected text.
For instance, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.
• Similarly, if anyone wants to change to font style from normal(straight) ones to
italics (tilted), it can also be achieved.
• There are numerous things possible by making changes in the font properties.
And for that, we need to learn about the different font properties in CSS.
 CSS Font Properties
• The different CSS font properties are-
• CSS font-color
• CSS font-size
• CSS font-style
• CSS font-variant
• CSS font-weight
• CSS font-family
 CSS Font Properties
Font Color
The color property is used to set the color of the text/font on the webpage. The value
provided to the color property will be the color of the font.

color: < color name >;

color: < hex code >;
color: < rgb( ) >;
color: < hsl( ) >;
 CSS Font Properties
The different methods are-
• Color name - red, blue, green, etc. So, it will make the elements of that color.
• Hex code - It is the hexadecimal representation of a color. The code is made as
per the Red, Blue Green values present in color and is preceded by a hash(#),
#RRGGBB.eg-#ff00f2.
• rgb() - It is one of the most common methods. It takes the intensity of the Red-
Green-Blue color value that ranges from 0-255 or from 0% to 100%. e.g.-
rgb(0,255,0).
• hsl() - It is a method that takes the value of Hue, Saturation, and Lightness of the
color. It can be useful when you can select a color based on your imagination.
e.g.- hsl(59, 100%, 50%)
 CSS Font Properties
<!DOCTYPE html> <body>
<html>
<head> <h1>This is heading 1</h1>
<style> <h2>This is heading 2</h2>
h1 { <h3>This is heading 3</h3>
color: blue; <h4>This is heading 4</h4>
}
h2 { </body>
color: #ff00f2; //purple </html>
}
h3 {
color: rgb(0, 255, 0); // green
}
h4 {
color: hsl(59, 100%, 50%); // yellow
}
</style>
</head>
 CSS Font Properties
Font-size
In CSS, the font-size property is used to set or tweak the size of the font. It can have
several values that can be absolute (e.g.- xx-small, medium, xx-large.) or relative
(larger, smaller, %) or length (numbered- 12px, 1em, etc.)
font-size: xx-small | x-large | xx-large | larger | smaller | 20% | 2em | 7px;

Any of the values can be used for the font-size property.

Absolute size:
The absolute size is used to set the font size based on the predefined sizes. The
default value of absolute size is medium. It can have values starting from xx-small to
xx-large.
font-size: xx-small | x-small | small | medium | large | x-large | xx-large ;
 CSS Font Properties
Relative-size :
• Although the absolute-size is easy to use, it gives us less flexibility, and as a
developer, to be more inclusive of all the users, we use relative-size.
• It sets the font relative to the parent element's font size. It can have two values-
smaller and larger.
• Now, suppose a parent element has a font size of medium, and then we make a
child element and give its font-size: larger, then it will assign a value which is
larger than 'medium' size.
• Finally, the size of the child element will be "large".
font-size: larger | smaller;
 CSS Font Properties
Length:
We can also use numerical length values like 23, 54, etc., with units such as px, cm,
etc. It gives more control over the size of the text.

font-size: 10px | 12cm | 1em;

em is the measure of the default text size in browsers, 1em= 16px.

Using % is also a type of relative size.

font-size: 20%;
 CSS Font Properties
<!DOCTYPE html> div.d {
<html> font-size: small;
<head> }
<style> </style>
div.a { </head>
font-size: 20px; <body>
} <div class="a">This is 20px.</div>
div.b { <div class="b">This is large.</div>
font-size: large; <div class="c">This is 200%.</div>
} <div class="d">This is small</div>
div.c { </body>
font-size: 200%; </html>
}
 CSS Font Properties
Font-Weight
• The weight of the font refers to the thickness of the font, i.e., how thick or thin the
font will be on the webpage.
• The font-weight property of CSS is used to set the weight/thickness/boldness of
the font.
• It is either dependent on the specified weights of the browser or the available font
faces in a font family.
• It can have absolute or relative, or numeric values like normal, bold, lighter,
bolder, 100, 400.
• Though, we do not need to specify any unit while using the numeric values. 400
has the same weight as normal, and 700 have the same as bold.
font-weight: normal | bold | bolder | lighter | <number [1,1000]>;
 CSS Font Properties
<!DOCTYPE html> p.thicker {
<html> font-weight: 600;
<head> }
<style> </style>
p.normal { </head>
font-weight: normal; <body>
} <p class="normal">This line is normal</p>
p.light { <p class="light">This line is lighter</p>
font-weight: lighter; <p class="thick">This line is bold</p>
} <p class="thicker">This line is of value
p.thick { 600</p>
font-weight: bold; </body>
} </html>
 CSS Font Properties
Font-Style
• CSS font-style property is used to define the style of font for the text content of an
element.
• Here, style refers to the variation in the typeface. It may be italic, oblique, or
normal(default).
• Font-style property can be used to decorate and assign importance to a specific
text.

Italic vs Oblique
• Italic forms are generally cursive in nature, while oblique faces are sloped
versions of the regular face.
font-style: normal | italic | oblique;
 CSS Font Properties
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<style>
p.nor {
<p class="nor">This is a line, normal.</p>
font-style: normal;
} <p class="it">This is a line, italic.</p>
p.it { <p class="ob">This is a line, oblique.</p>
font-style: italic;
} </body>
p.ob { </html>
font-style: oblique;
}
 CSS Font Properties
Font-Variant
The font-variant property in CSS allows you to transform the specific line of text or
paragraph into small caps (capital letters that will be small in size as compared to
normal capital letters).
It can also have values such as
normal (by default),
initial- This sets the property to the default value, and
inherit- It takes the property's value of the parent element to the child element.

font-variant: normal | small-caps | initial | inherit;

 CSS Font Properties
<!DOCTYPE html> </head>
<html> <body>
<head>
<style> <p class="normal">Scaler Topics in normal</p>
p.normal { <p class="small">Scaler Topics in small-caps</p>
font-variant: normal;
} </body>
p.small { </html>
font-variant: small-caps;
}
</style>
 CSS Font Properties
Font-Family
• A font family is a set of fonts having similar typefaces and common designs.
• It is important to choose the right font family because fonts have many associated
values.
• The right font (along with the right color and size) leaves a huge impact on
readers and also shows your intention and emotion to put that font and make your
identity.
• Font-family property can have values like family name (times, courier, arial, etc.)
and generic-family (serif, sans-serif, cursive, fantasy, monospace).
 CSS Font Properties
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: 'Roboto Mono', monospace;
}
</style>
</head>
<body>
<p class="a">This is a paragraph, shown in the Times New Roman font.</p>
<p class="b">This is a paragraph, shown in the Roboto Mono font.</p>
</body>
</html>
 CSS Font Properties
Font (Shorthand) Property
• Instead of writing all the CSS Font-Properties one by one, we can use the font
property, which is a shorthand property to define the font-style, font-variant,
font-weight, font-size/line-height, and font-family.
• At least font-size and font-family should be provided for the shorthand to work.
• If one of the two is not provided, then we will not get the desired output as the
default values of the font-size or the font-family will be used.

font: <font-style> <font-variant> <font-weight> <font-size/line-height> <font-family>;

 Working with Block Elements and Objects
• Inline and Block elements are both parts of CSS that define how the content of the
web page will appear and what elements will take how much space.
• There are extremely important to understand as they will help in designing web
pages easier and more streamlined.
• Both are values of the display property in CSS.
• Every HTML element has some default values applied to them.
• These two attributes have some properties that define the layout of elements to
which they are applied.
 Need for Inline and Block Elements
When building a website, there are always times when you want to put a lot of things
together, like a link in a passage, different headings, and a lot of other things.

Inline Elements
• Inline in CSS are those elements that occupy only the space required for their
content.
• They start in the same line where they are put without creating a new line before or
after them. inline is a value of the display property in CSS.
• One more way of thinking about inline elements will be that they don't create a
newline. That means that if you insert an inline element in the middle of a line or
paragraph, it will not begin in a new line.
• Also, the elements after the inline element will not start from a new line.
 Need for Inline and Block Elements
There are a few more tags in HTML which are inline by default, like -
<img>, <button>, <span>, <b>, <canvas>, <em>, <small>, <strong>
The display property set the type of any element to be inline.

.element{
display: inline;
}
.div1{
display:inline;
}
 Need for Inline and Block Elements
Block Elements
• Block elements always occupy the entire width of the parent element available to
them by default. block is a value of the display property in CSS.
• Every block element will occupy 100% of its parents' width by default.
• If the parent's width is 500px it will occupy 500px. If it's 1000px it will occupy
1000px.
• We can say those block elements create a different section and force everything after
them to start from a new line.
• One more way of thinking about block elements will be that they do create newline
both before and after them.
• They always stack upon each other and never fit side to side by default, even when
there is enough space to do so.
• there are also some HTML tags that are block elements by default, like-
• <div>, <p>, <hr>, <article>, <form>, <table> and many more.
 Need for Inline and Block Elements
To make an HTML tag a Block element manually, we again use the display property.

.element{
display:block;
}
img,span{
display:block;
}
 Differences between Inline and Block Elements
Inline Elements Block Elements
They only take up space needed by the They take up all available space,
contents inside of them and no more. i.e. 100% of their parents
They don't insert newline before or after They do insert newline before and after
them them
Heights and width properties do not Both height and width properties can be
work here. specified for Block elements
They always stack on top of each other,
They stay side by side or do not move to
or they automatically start from a
a newline as long as there is enough
newline even if its possible to fit the
space for all the elements
elements in a single line
Some common examples Some common examples
include <img>,<button>,<span> include <div>,<p>,<article>
 CSS List Styles
• The List in CSS determines how the contents or items are listed in a certain fashion,
i.e., they can be arranged either neatly or randomly, which aids in creating a clean
webpage.
• Because they are adaptable and simple to handle, they may be used to organize large
amounts of material. The list's default style is borderless.
• List-style-type: This property is used to determine the look of the list item marker,
such as a disc, character, or custom counter style.
• List-style-image: The pictures that will serve as list item markers may be specified
using this parameter.
• List-style-position: It describes where the marker box should be about the main
block box.
• List-style: The list style is configured with this attribute.
 CSS List Styles
List-style-type:
• The default list type of marker may be changed to a variety of other types, including square,
circle, Roman numerals, Latin letters, and many more.
• The entries in an unordered list are denoted by round bullets (•), while the items in an
ordered list are numbered by default using Arabic numerals (1, 2, 3, etc.).
Syntax:
list-style-type:value;
• We may use the value as follows:
• circle
• decimal, e.g.:1,2,3, etc
• decimal-leading-zeroes , eg :01,02,03,04,etc
• lower-roman
• upper-roman
• lower-alpha, e.g., a,b,c, etc
• upper-alpha, e.g., A, B, C, etc
• square
 CSS List Styles
<!DOCTYPE html> .square{ <ol class="num">
<html> list-style-type:square; <li>one</li>
<head> }
.disc{ <li>two</li>
<title>CSS Lists</title> <li>three</li>
list-style-type:disc;
<style>
} </ol>
.num{ </style> <ol class="alpha">
list-style-type:decimal; </head>
<li>one</li>
} <body>
.alpha{ <h1> <li>two</li>
list-style-type:upper-alpha; Welcome <li>three</li>
} </h1> </ol>
.circle{ <h2> <h2>
Ordered Lists
list-style-type:circle; Unordered lists
</h2>
} </h2>
 CSS List Styles
<ul class="circle">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<ul class="disc">
<li>one</li>
<li>two</li>
<li>three</li>
</body>
</html>
CSS List Styles
 CSS List Styles
List-style-position:
• It indicates whether the marker appears within or outside of the box holding the
bullet points. It has two values in it:
• Inside: This indicates that the list item will contain the bullet points. If the text in
this extends to the second line, it will wrap beneath the marker.

• Outside: It indicates that the list item's bullet points will be outside of it. It is a
default value.
 CSS List Styles
<!DOCTYPE html> .circle{ </head>
list-style-type:circle; <body>
<html> <h1>
list-style-position:
<head> inside; Welcome to the Course
<title>CSS Lists</title> } </h1>
<h2>
<style> .disc{
Ordered Lists
.num{ list-style-type:disc; </h2>
list-style-type:decimal; list-style- <ol class="num">
position:inside; <li>INSIDE</li>
list-style-position:inside; } <li>two</li>
} .square{ <li>three</li>
.roman{ list-style-type:square; </ol>
list-style-type:upper-roman; list-style- <ol class="roman">
position:inside; <li>OUTSIDE</li>
list-style-position:outside; <li>two</li>
}
} </style> <li>three</li>
</ol>
 CSS List Styles
<h2> <ul class="square">
Unordered lists <li>DEFAULT</li>
</h2> <li>two</li>
<ul class="circle"> <li>three</li>
<li>INSIDE</li> </ul>
<li>two</li> </body>
<li>three</li>
</html>
</ul>
<ul class="disc">
<li>INSIDE</li>
<li>two</li>
<li>three</li>
</ul>
CSS List Styles
 CSS List Styles
List Styling:
• The list may be styled using CSS. The lists can have custom backgrounds, padding, borders,
and colors.
<!DOCTYPE html> <body>
<html> <h2>
<head> Welcome
<style> </h2>
ul.main { <p> Unordered lists </p>
list-style: circle; <ul class="main">
background: lightblue; <li>one</li>
padding: 30px; <li>two</li>
width: 70px ; <li>three</li>
} </ul>
</style> </body>
</head> </html>
CSS List Styles
 CSS List Styles
list-style-image
The list-style-image property allows us to use images as the marker.
Syntax:
ul
{
list-style-image: url(‘image path’);
}
 CSS List Styles
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>:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
 CSS List Styles
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one
declaration:
ul {
list-style: square inside url("sqpurple.gif");
}
• 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)
 CSS Table Styles
Table Border: The border property adds a border to the table. For example,
/* applies border to the table */
table,th,td {
border: 1px solid black;
}

Collapse Table Border: The border-collapse property merges the border between
the table cells into a single border. For example,
table {
border-collapse: collapse;
}
 CSS Table Styles
Border Spacing: The border-spacing property specifies the gap between the adjacent
cell borders. For example,
table {
border-spacing: 20px;
}

Table Size: The size of the table can be changed by using the width and height properties. For
example,
table {
border-collapse: collapse;
border: 1px solid black;
width: 80%;
height: 170px;
}
 CSS Table Styles
Table Layout: The table-layout property specifies the structure and behavior of the table. It
can take one of the following values:
auto: adjusts the column widths automatically based on content
fixed: specifies the fixed column width. Hence, all the columns of the table maintain the
fixed width.
/* styles table with fixed layout
*/
table {
width: 500px;
table-layout: fixed;
}

table, th , td {
border: 1px solid black;
border-collapse: collapse;
}
 CSS Table Styles
Now, changing the table layout to auto by adding
table-layout: auto;
 CSS Table Styles
Horizontal Alignment : The text-align property sets the horizontal alignment of the table
content. For example:

.first-data {
text-align: left;
}
.second-data {
text-align: right;
}
.third-data {
text-align: center;
}
Note: By default, the content inside the table cells is left-aligned.
 CSS Table Styles
Vertical Alignment: The vertical-align property sets the vertical alignment of the table content. For
example:
.first-data {
vertical-align: top;
}
.second-data {
vertical-align: bottom;
}
.third-data {
vertical-align: middle;
}
.fourth-data {
vertical-align: baseline;
}
Note: By default, the content in a table cell is vertically aligned to the middle.
 CSS Table Styles
Background Color: The table can be styled with different background colors. For example,
th {
background-color: greenyellow;
}
tr {
background-color: yellow;
}
table, th, td {
border: 1px solid black;
}
 CSS Table Styles
Table Padding: The padding property adds the space between the border and the content.
For example,

th,td {
padding: 15px;
}
 CSS Table Styles
Divide the Table Rows: We can use the border-bottom property to create a horizontal
division between the rows of the table. For example,

th,td {
border-bottom: 1px solid gray;
padding: 12px;
text-align: center;
}
 CSS Table Styles
Hoverable Table: We can add the hover effect to the table elements with the help of the
hover pseudo-class selector. For example,

tr:hover {
background-color: yellow;
}
 CSS Box Model
The CSS box model is a fundamental concept that defines how the element's dimensions and
spacing are calculated.
The box model treats every HTML element as a rectangular box consisting of content,
padding, border, and margin.
The components of the box model are:
• content: actual text or image that is displayed in the element
• padding: transparent space between the content and the border of an element
• border: line that surrounds the padding and content within the element
• margin: transparent area added outside the border
The primary purpose of the box model is to explain how the dimensions and spacing of
elements are calculated and how they relate to each other.
CSS Box Model
 CSS Box Model
Width and Height of an Element with Box Model
• The box model is important for understanding how the width and height of an element are
calculated.
• The width and height of the element are applied only to the content of the element by
default.
• Hence, the actual size of the element is calculated by adding the padding and border along
with the specified width and height of the element.

Actual width: border-left + padding-left + width + padding-right + border-right

Actual height: border-top + padding-top + height + padding-bottom + border-bottom
 CSS Box Model
div {
width: 400px;
height: 80px;
border: 10px solid black;
padding: 15px;
background-color: greenyellow;
}
The width and height of the div are applied only to the content of the element. The actual width and
height of the element are:

width = 10px + 15px + 400px + 15px + 10px = 450px

height = 10px + 15px + 80px + 15px + 10px = 130px
Hence, the actual width becomes 450px, and the height becomes 130px.
 CSS Box Model
Box Model With Inline Elements

p{
width: 350px;
border: 1px solid black;
}

span {
width: 100px;
height: 40px;
border: 5px solid black;
padding: 10px;
margin: 10px;
background-color: greenyellow;
}
 CSS Box Model
Box Model With Inline Elements
In the above example,
• The height and width are ignored.
• The top and bottom margins are also ignored, and only the left and right margins work.
• The padding works for all four sides of the elements.
• Hence, we cannot calculate the actual dimensions of the inline element.

In order to apply the box model in the inline elements, the display property should be
changed to either inline-block or block.
 CSS Box Model
p{
width: 350px;
border: 1px solid black;
}

span {
display: inline-block;
width: 100px;
height: 40px;
border: 5px solid black;
padding: 10px;
margin: 10px;
background-color: greenyellow;
}.
 CSS Display
The CSS display property is used to adjust the layout of an element. For
example,
div {
display: inline-block;
}
 CSS Display
The syntax of the display property is as follows:
display: value;
The commonly used values for the display property are as follows:
• inline: allows an element to behave like an inline-level element
• block: allows an element to behave like a block-level element
• inline-block: formats the element as inline-level but also allows to set
height/width like block-level element
• flex: sets the element as a flex container to have a flexible layout of its child
elements
• grid: sets the element as a grid container to create complex layouts
• none: removes the element from the document leaving no space.
 CSS Display
CSS Display Inline
• The inline value of the display property allows a block-level element to behave like
an inline element.
• The inline elements occupy only the required width for their content.
<body>
<h2>Before display: inline</h2>
<div>I am a first div element.</div>
<div>I am a second div element.</div>

<!-- Adding display: inline in divs -->

<h2>After display: inline</h2>

<div class="after">I am a first div element.</div>
<div class="after">I am a second div element.</div>
</body>
 CSS Display
div {
border: 2px solid black;
margin-bottom: 12px;
padding: 4px;
}
div.after {
display: inline;
}
 CSS Display
CSS Display Block
• The block value of the display property causes an inline element to behave like a
block element. For example,
<body>
<h2>Before display: inline</h2>
<span>I am a first div element.</ span>
< span >I am a second div element.</ span>

<!-- Adding display: inline in spans -->

<h2>After display: inline</h2>

<span class="after">I am a first span element.</div>
<span class="after">I am a second span element.</div>
</body>
 CSS Display
span {
border: 2px solid black;
margin-bottom: 12px;
padding: 4px;
}
span.after {
display: block;
}
 CSS Display
CSS Display Inline Block
• The inline-block value of the display property combines characteristics of inline and
block elements.
• When an element is set to inline-block,
o It flows like an inline element allowing other elements to flow around
horizontally.
o It accepts the width and height properties. (By default, width and height don't
work in inline elements.)
o It accepts the padding and margin values. (By default, top and bottom margins
don't work for inline elements, and padding also doesn't push other elements
away.)
CSS Display
<body>
<h2>Before display: inline-block</h2>
<p>
In this paragraph, the <span>span</span> element is color in green-yellow
color. The width and height don't work, the padding value doesn't push
surrounding content away, and the top/bottom margins don't work.
</p>
<!-- Adding display: inline-block the divs -->
<h2>After display: inline-block</h2>
<p>
In this paragraph, the <span class="after">span</span> element is color in
green-yellow color. The width and height work, the padding value push
surrounding content away, and the top/bottom margins work.
</p>
</body>
 CSS Display
span {
width: 60px;
height: 30px;
padding: 10px;
margin: 20px;
border: 2px solid black;
background-color: greenyellow;
}
span.after {
display: inline-block;
}
CSS Display
 CSS Display
CSS Display Flex
• The flex value of the display property allows for efficient alignment and
distribution of the space between the child elements within the parent element.
<body>
<ul class="parent">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</body>
 CSS Display
ul.parent {
display: flex;
background-color: greenyellow;
padding: 0px;
}

li {
background: skyblue;
border: 1px solid black;
padding: 12px;
margin: 8px;
list-style: none;
}
 CSS Display
CSS Display None
• The none value of the display property is used to hide an element and remove it
from the normal flow of the document.
• Let's see an example,
<body>
<h1>Heading: CSS Display Property</h1>
<p>
The display: none hides the element and removes the space from the
document.
</p>
</body>
 CSS Display
h1 {
border: 2px solid black;
background-color: greenyellow;
}

If we add,
h1 {
display: none;
}
 CSS Dimension
CSS dimensions define the size, length and measurement of the web elements.
For example,
p{
width: 300px;
background-color: greenyellow;
}
 CSS Dimension
• Here, we have specified the width value of the paragraph with a pixel (px)
length unit.
• There are various CSS properties such as width, padding, margin, etc. that
accept measurement values in various units.
• CSS units are mainly categorized as absolute and relative units.
 CSS Dimension
Absolute units
Absolute units are the constant measurements that remain unchanged regardless of
the device's screen size.
There are following types of absolute units:
• Pixels (px): Equivalent to one pixel on the screen. For example, width: 100px.
• Inches (in): Correspond to one inch in physical size. For example, height: 1in.
• Centimeters (cm): Equivalent to one centimeter. For example, margin: 2cm.
• Millimeters (mm): Equivalent to one millimeter. For example, padding: 5mm.
• Points (pt): Equal to one point (1/72 of an inch). For example, font-size: 12pt.

Absolute units are used for elements that need to have a specific size, such as buttons,
images, and logos.
 CSS Dimension
Relative Units
Relative units are the measurements that change with the screen size or other
elements on the page. There are following types of relative units:
Ems (em): Relative to the parent element's font size. For example, font-size: 1em scales with the
parent's font size. If the parent has a font size of 16px, then font-size:1em for a child equals 16px.
Rems (rem): Relative to the root element's font size i.e. size set to HTML element. For example,
margin: 2rem adjusts based on the root font size.
Viewport widths (vw): Relative to the viewport width. For example, width: 50vw adapts to 50% of
the viewport's width.
Viewport heights (vh): Relative to the viewport height. For example, height: 100vh takes up the entire
viewport (screen) height.
Percentages (%): Relative to the containing element. For example, padding: 5% scales based on the
parent container's size.
Relative units are preferred when we need flexible sizing and responsive design across various devices.
 CSS Dimension
For example,
body {
height: 80vh;
}

This sets the height of the body element to 80% of the total height of the
device's screen (viewport).
 CSS Float
• The CSS float property is used to specify how an element floats within a parent
element.
• The element can float to the right, left, or none within the container. For example,
div.box2 {
float: right;
background-color: greenyellow;
}
Here, the float property moves the second div element to the right side of the document.
 CSS Float
CSS float syntax
The syntax of the float property is as follows,
float: none | left | right | initial | inherit;
Here,
• none: element doesn't float (default value)
• left: element floats on the left side of its containing block
• right: element floats on the right side of its containing block
• initial: the value is set to the default value
• inherit: inherits floating property from its parent element
 CSS Float
Note: The float property is different from the position property.
The float property is mainly used for text wrapping around elements. The
position property is used to position the element with precise control within
the document.
 CSS Float
Example: CSS float none Value
<body>
<div class="parent">
<img src="https://www.seekpng.com/png/detail/109-1093815_doraemon-png-
png-images-doraemon-png.png" alt="A flying Doremon image“ />
<p>
Doraemon is a beloved cartoon character adored by kids all over the world.
He is a robotic cat from the future who travels back in time to help a young boy
named Nobita. With his magical gadgets and clever solutions, Doraemon always
manages to turn Nobita's troubles into exciting adventures.
</p>
</div>
</body>
 CSS Float
img {
/* default value */
float: none;
width: 100px;
height: 120px;
}
div.parent {
border: 2px solid black;
}

In the above example, we have used the none (default value) of the float property. This value does
nothing to the existing layout.
 CSS Float
Example: CSS float right Value
Let's see an example of the float property with the right value,
<body>
<div class="parent">
<img
src=https://www.seekpng.com/png/detail/109-1093815_doraemon-png-png-
images-doraemon-png.png alt="A flying Doremon image"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over the world. He is a
robotic cat from the future who travels back in time to help a young boy named Nobita. With
his magical gadgets and clever solutions, Doraemon always manages to turn Nobita's
troubles into exciting adventures.
</p>
</div>
</body>
 CSS Float
div.parent {
border: 2px solid black;
}
img {
/* pushes the image to the right of its container/parent */
float: right;
width: 100px;
height: 110px;
}
 CSS Float
Example: CSS float left Value
Let's see an example of the float property with the right value,
<body>
<div class="parent">
<img
src=https://www.seekpng.com/png/detail/109-1093815_doraemon-png-png-
images-doraemon-png.png alt="A flying Doremon image"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over the world. He is a
robotic cat from the future who travels back in time to help a young boy named Nobita. With
his magical gadgets and clever solutions, Doraemon always manages to turn Nobita's
troubles into exciting adventures.
</p>
</div>
</body>
 CSS Float
div.parent {
border: 2px solid black;
}
img {
/* pushes the image to the right of its container/parent */
float: left;
width: 100px;
height: 120px;
}
 CSS Float
Note:
The CSS clear property is used to control the behavior of elements that are adjacent
to floated elements. It allows to turn off the wrapping of the text and helps to
maintain the normal flow in the document.
 CSS Float
CSS Float with Inline Elements
Let's see an example of the float property with the right value,
<body>
<p>
<span
>Doraemon is a beloved cartoon character adored by kids all over
the world.
</span>
Doraemon is a robotic cat from the future who travels back in time to
help a young boy named Nobita. With his magical gadgets and clever
solutions, Doraemon always manages to turn Nobita's troubles into
exciting adventures.
</p>
</body>
 CSS Float
span {
/* pushes the span element to the right of its container */
float: right;
width: 190px;
border: 1px solid black;
background-color: greenyellow;
margin-left: 12px;
}
p{
padding: 8px;
border: 2px solid black;
}
float: right moves the inline element span to the right of the parent
 CSS Float
Note: Important points with inline float
• The floated inline text elements should always be assigned a width value.
Otherwise, they will expand to fit their content, which may not be an issue for
smaller content but can become problematic for larger content.
• Images have their inherent width and height, so adding width and height is not
mandatory.
• The floated inline elements behave as block elements. We can add width, height,
margin, and padding on all sides to a floated inline element.
• The margin in the floated element does not collapse. In the normal flow, the
adjacent top and bottom margins collapse and take the value of the larger margin.
 CSS Float
CSS float with the Block Elements
Let's see an example of the float property with the right value,
<body>
<div class="parent">
<p class="float">
Doraemon is a beloved cartoon character adored by kids all over the world.
Doraemon is a robotic cat from the future who travels back in time to help a young boy
named Nobita.
</p>
<p>
With his magical gadgets and clever solutions, Doraemon always manages to turn
Nobita's troubles into exciting adventures. Whether it's rescuing friends, solving problems, or
teaching important life lessons, Doraemon's kind heart and unwavering friendship make him
a true hero. </p>
</div>
</body>
 CSS Float
p.float {
/* pushes the p element to the left of its container */
float: left;
/* width is necessary */
width: 300px;
border: 2px solid black;
background-color: greenyellow;
}
/* styles the div element with parent class */
div.parent {
padding: 4px;
border: 4px solid black;
background-color: yellow;
}
Here, the float: right declaration moves the block element p to the left of the parent div element.
 CSS Float
Important points to remember when floating block elements:
• The block-level element should be assigned a width value when using the float
property. Otherwise, the default width value is auto, which causes it to fill the entire
width of the parent element.
• Therefore, the effect of using the float property becomes invisible.
• The floating block element does not float higher than its original reference in the
document.
 CSS Align
CSS text-align property is used to horizontally align the text in an element. For
example,

h1 {
text-align: center;
}
 CSS Align
Syntax of Text-Align
The syntax of the text-align property is as follows,

text-align: left | right | center | justify | initial | inherit;

Here,
• left: aligns the text to the left (default value)
• right: aligns the text to the right
• center: aligns the text to the center
• justify: the text is justified
• initial: sets the value to the default
• inherits: inherits the value from the parent element
 CSS Align
Example of the Text-Align Property

<body>
<p class="left">This text is aligned in the left.</p>
<p class="center">This text is aligned in the center.</p>
<p class="right">This text is aligned in the right.</p>
<p class="justified">This text is justified.</p>
</body>
 CSS Align
/* aligns the text to left */
p.left {
text-align: left;
}
/* aligns the text in the center */
p.center {
text-align: center;
}
/* aligns the text to the right */
p.right {
text-align: right;
}
/* justifies the text */
p.justified {
text-align: justified;
}
 CSS Align
Text-Align With the Inline Elements
The text-align property does not work directly with inline elements. One way to apply
text-align to an inline element is by targeting the parent block-level element. For
example,
<body>
<span class="outside">This inline element is outside.</span>
<p>
<span class="inside">
This inline element is inside <p> element.
</span>
</p>
</body>
 CSS Align
/* does not work */
span {
text-align: right;
}

/* aligns the inner span element to the right*/

p{
text-align: right;
}
 CSS Align
Similarly, we can also apply text-align to inline-element by setting the display
property of inline elements to block. For example,

<body>
<span class="first">This is inline element.</span><br />
<span class="second" >This inline elements display property is set to
block.</span >
</body>
 CSS Align
/* does not work */
span.first {
text-align: center;
background-color: lightgreen;
}
/* works after setting display to block */
span.second {
display: block;
text-align: right;
background-color: lightgreen;
}
 CSS Pseudo-Class
CSS Pseudo-Classes Selectors
CSS pseudo-classes selectors select the HTML elements based on their state or
position. For example,

button:hover {
background-color: red;
color:black;
}

Here, hover pseudo-class changes the styles of button while placing the mouse over
it.
 CSS Pseudo-Class
Syntax of Pseudo Class Selector
The syntax of a pseudo-class selector is as follows:

element:pseudo-class {
/* CSS styles */
}

Here,
element: specifies the HTML element
pseudo-class: specifies the specific state of the element that we want to target
Pseudo-class keywords are added to the selectors and preceded by a colon (:).
 CSS Pseudo-Class
Types of Pseudo-Classes
There are the following types of pseudo-classes in CSS:

Structural pseudo-class: Selects elements based on their position in document such

as :first-child, :last-child, etc.

Link pseudo-class: Selects the links based on their state such as :link, :visited, etc.

UI pseudo-class: Selects the form elements based on their state such as :enabled,
:disabled, etc.
 CSS Pseudo-Class
Structural Pseudo-Classes
Structural pseudo-class selects elements based on their position in the document.
There are following structural pseudo-classes.
CSS first-child Pseudo-Class
The first-child pseudo-class selector styles the first child of its parent element. For
example,
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
 CSS Pseudo-Class
div p:first-child {
color: red;
}

Here, the div p:first-child selector selects the first paragraph element that is a direct
child of the div element and changes its color to red.
 CSS Pseudo-Class
CSS last-child Pseudo-Class
The last-child pseudo-class selector styles the last child of its parent element. For
example,

<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
 CSS Pseudo-Class
div p:last-child {
color: red;
}

Here, the div p:last-child selector selects the last paragraph element that is a direct
child of the div element and changes its color to red.
 CSS Pseudo-Class
CSS first-of-type Pseudo-Class
The first-of-type pseudo-class selector styles the first element of a particular type within the
parent. For example,
<body>
<h2>Section one</h2>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
<h2>Section two</h2>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
 CSS Pseudo-Class
p:first-of-type {
color: red;
}

Here, the first-of-type pseudo-class selects the first p element within the parent
elements and changes the text color to red.
 CSS Pseudo-Class
CSS not Pseudo-Class
The not pseudo-class selector styles the elements that do not match the user defined
selector. For example,
<body>
<div>
<p>This is the first paragraph.</p>
<p class="special-paragraph">This is a special paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
 CSS Pseudo-Class
p:not(.special-paragraph) {
color: red;
}

select all p elements that are not of the class special-paragraph. This means that the
first and third paragraphs will be red, but not the second paragraph.
 CSS Pseudo-Class
CSS empty Pseudo-Class
The empty pseudo-class selector styles every element that has no children. For
example,
<body>
<!--empty div-->
<div></div>

<!--div having child elements-->

<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</body>
 CSS Pseudo-Class
div:empty {
width: 100px;
height: 20px;
background-color: red;
}

Here, the empty pseudo-class selects and styles only the empty div element.
 CSS Pseudo-Class
Link Pseudo-Classes
Link pseudo-classes select links based on their state. There are following link pseudo-
classes.

CSS link Pseudo-Class

The link pseudo-class selector styles all the unvisited links. For example,

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>
 CSS Pseudo-Class
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
background-color: greenyellow;
}

Here, the link pseudo-class selects and styles the link prior to it is clicked or visited.
As soon as we click on the link, the color changes to purple. This is the default
behavior of the link.
 CSS Pseudo-Class
CSS visited Pseudo-Class
The link pseudo-class selector styles all the unvisited links. For example,

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>
 CSS Pseudo-Class
/* styles the default state */
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
background-color: greenyellow;
}

/* styles the visited state */

a:visited { In the above example, when the user clicks on
the link, the color changes to red.
color: red;
}
 CSS Pseudo-Class
CSS focus Pseudo-Class
The focus pseudo-class selector styles the element that is focused by the user. For
example,

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>
 CSS Pseudo-Class
/* styles the focused state */
a:focus {
background-color: skyblue;
}

In the above example, the a:focus selector styles link during focus with a skyblue
background color.
 CSS Pseudo-Class
CSS hover Pseudo-Class
The hover pseudo-class selector styles the elements when the mouse is placed over it.
For example,

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>
 CSS Pseudo-Class
/* styles the link state */
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
}
/* styles the visited state */
a:visited {
color: purple;
}
/* styles the hover state */ In the above example, the a:hover selector adds
a:hover { a background color to link while hovering. The
background-color: greenyellow; hover pseudo-class can be used with any
} element, not only with the links.
 CSS Pseudo-Class
CSS active Pseudo-Class
The active pseudo-class selector styles the elements when the user clicks on it. For
example,

<body>
<p>Find additional information from <a href="#">here</a> </p>
</body>
 CSS Pseudo-Class
/* styles the link state */ /* styles the active state */
a:active {
a:link {
color: red;
text-decoration: none; }
color: blue;
font-weight: bold; /* styles the hover state */
background-color: greenyellow; a:hover {
text-decoration: underline;
}
}
/* styles the visited state */
In the above example, the a:active selector styles
a:visited {
link when it is active with red color. The order of
color: purple; providing link pseudo-classes is important. The
correct sequence is link, visited, hover, and active
} to ensure that styles are applied correctly.
 CSS Pseudo-Class
UI Pseudo-Classes
A UI pseudo-class selects elements based on their state or interaction with the user.

CSS enabled Pseudo-Class

The enabled pseudo-class selects and styles any enabled element.
An element is enabled if it can be selected, clicked on, typed into, etc., or accepts
focus.

<body>
<input type="text" placeholder="Enter your username" />
<button>Submit</button>
</body>
 CSS Pseudo-Class
input:enabled {
border: 2px solid blue;
}

Here, the enabled pseudo-class selects the input element and adds a blue solid border of
2px.
 CSS Pseudo-Class
CSS disabled Pseudo-Class
The disabled pseudo-class selects and styles elements that are disabled, i.e., the form
elements form elements like input fields or buttons that the user cannot interact with.

<body>
<input type="text" placeholder="Username..." />
<button disabled>Submit</button>
</body>
 CSS Pseudo-Class
button:disabled {
cursor: not-allowed;
}

Here, the cursor property sets the cursor to a not-allowed when the user hovers over the
disabled button.
To use the disabled pseudoclass selector, we need to add the disabled keyword to the
HTML element.
 CSS Navigation Bars
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
Here, we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
 CSS Navigation Bars
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Now let's remove the bullets and the margins and padding from the list.
list-style-type: none; - Removes the bullets. A navigation bar does not need list
markers
Set margin: 0; and padding: 0; to remove browser default settings
 CSS Navigation Bars
To build a vertical navigation bar, we can style the <a> elements inside the list:

li a {
display: block;
width: 60px;
}

display: block; - Displaying the links as block elements makes the whole link
area clickable (not just the text), and it allows us to specify the width (and
padding, margin, height, etc. if you want)

width: 60px; - Block elements take up the full width available by default. We
want to specify a 60 pixels width
 CSS Navigation Bars
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list
items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline,
in addition to the "standard" code:

li {
display: inline;
}

display: inline; - By default, <li> elements are block elements. Here, we remove the
line breaks before and after each list item, to display them on one line.
 CSS Navigation Bars
Floating List Items
Another way of creating a horizontal navigation bar is to float the <li> elements, and
specify a layout for the navigation links:

li {
float: left;
}

a{
display: block;
padding: 8px;
background-color: #dddddd;
}
 CSS Navigation Bars
float: left; - Use float to get block elements to float next to each other

display: block; - Allows us to specify padding (and height, width,

margins, etc. if you want)

padding: 8px; - Specify some padding between each <a> element, to

make them look good

background-color: #dddddd; - Add a gray background-color to each <a>

element
 CSS Image Sprites
Image Sprites
CSS image sprites are a single image that combines multiple images, used to reduce page
loading time and bandwidth consumption.

Why Use Image Sprites?

Image sprites are used for two main reasons:
Faster Page Loading: By using a single image, page loading time is significantly reduced.
Reduced Bandwidth: Less data is consumed, resulting in faster loading and improved user
experience.

Image sprites are generally used for designing a graphic social media bar or a navigation bar
to make it more attractive and efficient at the same time.

It is just a method in HTML and CSS to implement a more efficient way of putting images
and designing web pages.
 CSS Image Sprites
Making the Image Sprite
• We made this sprite image by combining 10
separate images in a single image
(mySprite.png).

• You can create your own sprite using any

image editing tool you like.

Display an Icon from Image Sprite

• Finally, utilizing CSS, we can display just

the part of an image sprite we need.

• First of all, we will create the class .sprite

that will load our sprite image.

• This is to avoid repetition, because all items

share the same background-image.
 CSS Image Sprites
.sprite {
background: url("images/mySprite.png") no-repeat;
}

Now, we must define a class for each item we want to display. For example, to
display Internet Explorer icon form the image sprite the CSS code would be.

.ie {
width: 50px; /* Icon width */
height: 50px; /* Icon height */
display: inline-block; /* Display icon as inline block */
background-position: 0 -200px; /* Icon background position in sprite */
}
 CSS Image Sprites
• The first value is the horizontal position, and second is the vertical position of background.

• As the upper-left corner of Internet Explorer icon touches the left edge so its horizontal distance
from the starting point i.e. top-left corner of the image sprite is 0, and since it is placed on the 5th
position so its vertical distance from the starting point of image sprite is 4 X 50px = 200px,
because height of each icon is 50px.

• To show the Internet Explorer icon we have to move its upper-left corner to the starting point i.e.
top-left corner of image sprite (mySprite.png).

• Also, since this icon is placed at the vertical distance of 200px, we will need to shift the whole
background-image (mySprite.png) vertically up by 200px, which requires us to apply the value as
a negative number that is -200px, because the negative value makes it go vertically up whereas a
positive value would move it down.

• However, it doesn't require a horizontal offset, since there are no pixels before the upper-left
corner of the Internet Explorer icon.
 CSS Attribute Selectors
• An attribute selector selects the HTML elements that has a specific attribute or
attribute with a specified value.

• The CSS attribute selectors provides an easy and powerful way to apply the
styles on HTML elements based on the presence of a particular attribute or
attribute value.

• You can create an attribute selector by putting the attribute—optionally with a

value—in a pair of square brackets. You can also place an element type selector
before it.
 CSS Attribute Selectors
CSS [attribute] Selector
This is the simplest form of an attribute selector that applies the style rules to an
element if a given attribute exists.
For example, we can style all the elements that have a title attribute by using the
following style rules:

[title] {
color: blue;
}

The selector [title] in the above example matches all elements that has a title
attribute.
 CSS Attribute Selectors
• You can also restrict this selection to a particular HTML element by placing the
attribute selector after an element type selector, like this:

abbr[title] {
color: red;
}

• The selector abbr[title] matches only <abbr> elements that has a title attribute, so
it matches the abbreviation, but not the anchor elements having title attribute.
 CSS Attribute Selectors
CSS [attribute="value"] Selector
We can use the = operator to make an attribute selector match any element whose
attribute value is exactly equal to the given value:

input[type="submit"] {
border: 1px solid green;
}

The selector in the above example matches all <input> element that has a type
attribute with a value equal to submit.
 CSS Attribute Selectors
CSS [attribute~="value"] Selector

You can use the ~= operator to make an attribute selector matches any element whose
attribute value is a list of space-separated values (like class="alert warning"), one of
which is exactly equal to the specified value:

[class~="warning"] {
color: #fff;
background: red;
}

This selector matches any HTML element with a class attribute that contains space-
separated values, one of which is warning.
For example, it matches the elements having the class values warning, alert warning etc.
 CSS Attribute Selectors
CSS [attribute|="value"] Selector

You can use the |= operator to make an attribute selector matches any element whose
attribute has a hyphen-separated list of values beginning with the specified value:

[lang|=en] {
color: #fff;
background: blue;
}

The selector in the above example matches all elements that has a lang attribute containing
a value start with en, whether or not that value is followed by a hyphen and more
characters.

In other words, it matches the elements with lang attribute that has the values en, en-US,
en-GB, and so on but not US-en, GB-en.
 CSS Attribute Selectors
CSS [attribute^="value"] Selector

You can use the ^= operator to make an attribute selector matches any element whose
attribute value starts with a specified value. It does not have to be a whole word.

a[href^="http://"] {
background: url("external.png") 100% 50% no-repeat;
padding-right: 15px;
}

The selector in the example above will target all external links and add a small icon
indicating that they will open in a new tab or window.
 CSS Attribute Selectors
CSS [attribute$="value"] Selector

Similarly, you can use the $= operator to select all elements whose attribute value ends
with a specified value. It does not have to be a whole word.

a[href$=".pdf"] {
background: url("pdf.png") 0 50% no-repeat;
padding-left: 20px;
}

The selector in the example above select all <a> elements that links to a PDF document and
add a small PDF icon to provide hints to the user about the link.
 CSS Attribute Selectors
CSS [attribute*="value"] Selector

You can use the *= operator to make an attribute selector matches all elements whose
attribute value contains a specified value.

[class*="warning"] {
color: #fff;
background: red;
}

This selector in the example above matches all HTML elements with a class attribute that
values contains warning. For example, it matches the elements having class values warning,
alert warning, alert-warning or alert_warning etc.
 CSS Attribute Selectors
Styling Forms with Attribute Selectors

input[type="text"], input[type="password"] {
width: 150px;
display: block;
margin-bottom: 10px;
background: yellow;
}

input[type="submit"] {
padding: 2px 10px;
border: 1px solid #804040;
background: #ff8040;
}