CASCADING STYLE SHEET
CSS is the language we use to style a Web page.
What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
● CSS saves a lot of work. It can control the layout of multiple web pages all at once
● External stylesheets are stored in CSS files
CSS SYNTAX
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces
COMMENTS
CSS comments are not displayed in the browser, but they can help document your source code.
Comments are used to explain the code, and may help when you edit the source code at a later
date.
/* This is a single-line comment */
p {
color: red;
}
STYLE SHEET INSERTION
There are three ways of inserting a style sheet:
● External CSS
● Internal CSS
● Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one
file!
Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
Eg:
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
TEXT STYLING
BOLD/ITALIC:
The font-style property specifies the font style for a text.
The font-weight property sets how thick or thin characters in text should be displayed.
p{
font-style: normal;
h2 {
font-style: italic;
h3{
font-weight: bold;
DECORATION
The text-decoration property specifies the decoration added to text, and is a shorthand property
for:
1) text-decoration-line (required)
2) text-decoration-color
3) text-decoration-style
4) text-decoration-thickness
1) text-decoration-line
The text-decoration-line property sets the kind of text decoration to use (like
underline, overline, line-through).
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
2) text-decoration-color Property
The text-decoration-color property specifies the color of the text-decoration
(underlines, overlines, linethroughs).
p {
text-decoration: underline;
text-decoration-color: red;
}
3) text-decoration-style
The text-decoration-style property sets the style of the text decoration (like
solid, wavy, dotted, dashed, double).
.a {
text-decoration-line: underline;
text-decoration-style: solid;
}
.b {
text-decoration-line: underline;
text-decoration-style: wavy;
}
.c {
text-decoration-line: underline;
text-decoration-style: double;
}
.d {
text-decoration-line: overline underline;
text-decoration-style: wavy;
}
CSS FONT FAMILY
Generic Font Families
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
In CSS, we use the font-family property to specify the font of a text.
p1 {
font-family: "Times New Roman";
}
.p2 {
font-family: Arial;
}
.p3 {
font-family: "Lucida Console";
}
FONT-SIZE:
The font-size property sets the size of a font.
.a {
font-size: 15px;
}
.b {
font-size: large;
}
.c {
font-size: 150%;
}
LETTER SPACE:
The letter-spacing property increases or decreases the space between characters in a text
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: 2px;
}
LINE SPACE
The line-height property specifies the height of a line.
The standard line height in most browsers is about 110% to 120%.
div.a {
line-height: normal;
div.c {
line-height: 380%;
}
div.d {
line-height: 50%;
TEXT TRANSFORMATION
The text-transform property controls the capitalization of text.
.a {
text-transform: uppercase;
.b {
text-transform: lowercase;
.c {
text-transform: capitalize;
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Fore Color
The color property is used to set the color of the text. The color is specified by:
● a color name - like "red"
● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
TEXT WRAPPING
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
<style>
div {
width: 150px;
border: 1px solid red;
div.a {
word-wrap: normal;
div.b {
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="a">The HyperText Markup Language or HTML is thestandardmarkuplanguagefor
documentsdesignedtobedisplayedin a web browser. It can be assisted by technologies such as
Cascading Style Sheets and scripting languages such as JavaScrip.</div>
<h2>word-wrap: break-word:</h2>
<div class="b"> The HyperText Markup Language or HTML is thestandardmarkuplanguagefor
documentsdesignedtobedisplayedin a web browser. It can be assisted by technologies such as
Cascading Style Sheets and scripting languages such as JavaScrip.</div>
</body>
CSS COLORS
CSS Color Values
In CSS, colors can also be specified using
● RGB values
● HEX values
● RGBA values
● RGB Value
An RGB color value represents RED, GREEN, and BLUE light sources
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
● RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
● HEX Value
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB
(blue) hexadecimal integers specify the components of the color.
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others
are set to the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
IMAGES IN CSS
CSS Styling Images
There are many ways to set style in images which are listed below:
● Thumbnail images
● Rounded images
● Transparent Image
● Center an Image
We will discuss all the ways for styling the image sequentially & will also understand them
through the examples.
Thumbnail images: The border property is used to create thumbnail images.
Example: This example illustrates the use of the Styling image property for creating the
thumbnail images.
img {
border: 1px solid black;
ROUNDED IMAGES
Border-radius Property: The border-radius property is used to set the radius of border-image.
img {
border-radius: 25px;
Transparent Image: The opacity property is used to set the image transparent. The opacity
value lies between 0.0 to 1.0.
img {
opacity: 0.5;
}
Center an Image: The images can be centered to box by using display and margin property
img {
display: block;
margin: auto;
}
