MODULE III
CSS- Cascading Style Sheet
CSS: Cascading style sheet is a text with .css extension and is used to define styles
and layouts of web pages written in HTML and Extensible Hyper Text Markup
Language (XHTML).
Syntax: It is divided into two different parts – Selector and Declaration
Declaration is a part that appears within the braces of the CSS rule followed by the selector.
Selector {
Property1: value;
Property2: value;
Property3: value;
•}
Selector: selects the element you want to CSS Selectors
target, selectors like tags, id’s, and Selector are used target elements and apply Css
classes will be used.
Different types of selectors are as follows
All forms this key - value pair 1. Universal selector
Keys : properties(attributes) like color, 2. Type selector
font-size, background, width, height, etc 3. Class Selector
4. Id Selector
• Value : values associated with these
5. Child Selector
properties
6. Descendent selector
Priority of Selectors
Id > Class>Element
Universal selector
It selects all the elements that are present in an HTML
document , it is used to apply the same the rule to all the
elements of an HTML or XHTML document and it is
represented by *{ ….. }
The TYPE Selector:
To set margin and padding to 0:
It matches all the elements specified in a list with
*{ the given value to determine the elements to which
CSS rules are to be applied.
Margin:0;
H1, h2, p {
Padding:0; Font-family: sans-serif
} }
Class Selector
It allows to apply CSS rule to the elements that carry a class attribute
whose value matches with the class attribute specified in the class
selector.
<h1 class=”intro”> heading 1 </h1>
.intro{ font-family:sans-serif}
[Link]{ font-family:sans-serif }
ID Selector The value of the id attribute is unique within a document;
therefore, the selector is applied only to the content of one element
<h1 id =”myheader”> hello world </h1>
#myheader{font-family: sans-serif}
• We selected id and then changed the font property
Child Selector
Descendant Combinator Selector
Combine two or more selectors like Descendant, it uses >
Combine two or more selectors
symbol as combinator
How we do it It only targets immediate child.
<div id="out"> How we do it
<div id="out">
<div class="in“>Hi </div>
<div class="in“>Hi </div>
</div>
</div>
We selected class inside id then changed the We selected class inside id then changed the color
color property i.e text color to red. Now property i.e text color to red. Now whatever is written
whatever is written (content) will have the (content) will have the text color as red
text color as red #out .in { color: red;}
#out > .in {color: red;}
}
Example for selectors:
.Y {
<!DOCTYPE html>
text-align: center;
<html>
color: red;
<head>
}
<style> </style>
h2{background-color:red; </head>
color:white; <body>
} <h1 class="Y">Red and center-aligned heading</h1>
#X{ <h2> example for class selector</h2>
text-align: center; <p id="X"> good morning</p>
color: red; </body>
</html>
Inserting CSS in an HTML document 1. INTETNAL STYLE SHEET
It is written within the HEAD element of the HTML
There three ways to apply CSS style to an HTML document
document This style is applied only to the documents in which it is
1. The internal style sheet defined and not referenced by any other web document
2. The external style sheet
SYNTAX:
<head><style type=text/css”> Selector { property:
3. The in-line style sheet
value;}
</style></head>
advantages of using internal style sheet are affects only the
page in which they are placed and allows the user to change
the style of the same HTML file.
It has disadvantages like increases the page load time
because the entire CSS file needs to be implemented first to
apply CSS.
Example:
<!DOCTYPE html>
<html><head><style>
body {background-color: pink;}
h1 {color: maroon; margin-left: 40px; }
</style></head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p>
• </body></html>
THE EXTERNAL STYLE SHEET
Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
An external style sheet can be written outside the HTML document, and must be saved with
a .css extension.
The external .css file should not contain any HTML tags.
SYNTAX: <LINK rel=”style sheet” type=”css” href=”[Link]”/>
Link refers to HTML link element, which is used to link a style sheet. This has three attributes-
rel, type, and href.
The rel attribute specifies what you are linking
The type specifies the MIME type(Multipurpose Internet Mail Extensions-format of the
document) for the browser,
• The href specifies the path of the .css file
EXAMPLE: HTML document with
reference to .css file
<!DOCTYPE html> Css file saved as [Link]
<html> body {
<head>
background-color: lightblue;
<link rel="stylesheet"
href="[Link]"> }
</head> <body> h1 { color: red;
margin-left: 20px;
<h1>This is a heading</h1>
}
<p>This is a paragraph.</p>
</body>
</html>
THE IN-LINE STYLE SHEET
It is used to apply a unique style for a single element.
Inline style properties are written in a single line separated by semicolons.
These properties are placed inside the Style attribute of the HTML element, on which we want to
apply the style.
SYNTAX:
•<p style=”background-color:#ccc; color:#fff; border: solid black 1px;”>
EXAMPLE:
<!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>
<p style="background-color:#cccc00; color:#0000ff; border:
solid black 1px;">good morning</P>
</body>
</html>
BACKGROUND OF A WEB PAGE
Background of a web page is the area on which the content of the web page, such as
text, tables, border, and image, is displayed.
CSS provides various properties to set the background of a web page as follows
1. background-color
2. background-image
3. background-size
4. background-property
1. Background color
It is used to set the color of the background area on which an element is displayed.
Background color property takes three values : Color name, Hexadecimal equivalent of the color
and RGB color value
The RGB format uses three elementary colors, Red, Green, Blue, to specify the color of an element.
CSS3 adds a new level ALPHA (A), the level of opacity to this RGB format, therefore a new color
specification is formed, which is RGBA
CSS3 introduces a new format of color specification, i.e. Hue Saturation Lightness(HSL)
New CSS3 color specifications are as follows:
• Opacity property, RGBA value format, and The HSL & HSLA values format
Opacity property: It is used to produce transparency effect in an HTML.
Opacity: [number between 0-1]; if opacity is 0.5, it means the element will be 50% transparent.
H1 {background: #036 opacity:0.5;}
RGBA value Format: it takes 4 arguments, in which first three are same as in the RGB format,
while the fourth argument is the alpha channel. This specifies the transparency or opacity level
of the specified color. It takes the number between 0 and 1 as a value.
H1{background-color: rgba (153,134,117,0.2);}
• HSL and HSLA Values Format: it takes 3 parameters Hue parameter specifies an angle of
the color around the circular wheel, for instance 0 0 (red), 600 (yellow),1200 (green),1800 (cyan)
Gradient property: it is a variation of colors, which are
arranged from lightest to darkest or vice-versa. CSS Linear Gradients
To create a linear gradient you must define at
CSS gradients let you display smooth transitions
least two color stops.
between two or more specified colors.
Color stops are the colors you want to render
It is used as an background for an entire web page or within smooth transitions among.
table cells or div elements. You can also set a starting point and a
direction (or an angle) along with the gradient
CSS defines three types of gradients:
effect.
Syntax
Linear Gradients (goes
background-image: linear-
down/up/left/right/diagonally)
gradient(direction, color-stop1, color-stop2, ...);
Radial Gradients (defined by their center)
<!DOCTYPE html>
<html>
<head>
<style>
#grad1{
height: 200px;
background-color: red;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grad1">
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
</div>
</body>
</html>
<!DOCTYPE html>
CSS Radial Gradients
<html>
<head>
A radial gradient is defined by
<style>
its center. #grad1 {
height: 150px;
To create a radial gradient you width: 200px;
background-color: red;
must also define at least two
background-image: radial-
color stops. gradient(red, yellow, green);
}
Syntax background-image: radial- </style>
</head>
gradient(shape size at position,
<body>
start-color, ..., last-color); <h1>Radial Gradient - Evenly Spaced Color
Stops</h1>
By default, shape is ellipse, size <div id="grad1"> </div>
is farthest-corner, and position </body>
</html>
is center.
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.
• CSS background-repeat: By default, the background-image property repeats an
image both horizontally and vertically.
• If the image above is repeated only horizontally background-repeat: repeat-x;
• To repeat an image vertically, set background-repeat: repeat-y;
• Showing the background image only once is also specified by the background-
repeat property:
• EXAMPLE: background-repeat: no-repeat;
• The background-position property is used to specify the position of the
background image.
<!DOCTYPE html>
Position values as follows If you only <html>
specify one keyword, the other value <head>
will be "center".
<style>
body {
left top
background-image:
left center url("[Link]");
left bottom background-repeat: repeat-x;
right top }
right center
h1,p { color:white; }
</style>
right bottom
</head>
center top <body>
center center <h1>Hello World!</h1>
center bottom <p>This page has an image as the
background!</p>
background-position: right top;
</body>
</html>
Lab Program 4: Create a HTML webpage with the following CSS
<!DOCTYPE html>
specifications:
<html> Set background color of the page as Blue, Text color as White, set different
<head> borders on each side, and an image floating to the right in a text.
<title>program 4</title>
<style>
body{
</style>
width:600px; </head>
background-color: blue;
color: white; <body>
}
img {
<p> <img src="C:\Users\USER\Desktop\
float: right;
[Link]" style="width:200px;height:90px;" >
}
p{ <br/>this is the example for css specifications
border-top-style: dotted;
border-right-style: solid;
such as <br/>background color , text color and
border-bottom-style: double; <br/>different borders for each side of the
border-left-style: dashed;
} paragraph <br/>
and an floating image to the right<br/><br/>
</p>
</body>
</html>
CSS FONTS
Syntax:
family-name: refers to the specific font family like Arial, Helvetica, etc
generic-family: refers to the broader category of font families with similar design
characteristics like serif, sans-serif, etc
initial: sets font-family to the default value
inherit: inherits font-family from the parent
font-family: it is used to specify the name of a font family to apply the specified font style on the text.
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.
Lab Program 5:
Design HTML webpage with following CSS specifications:
Show any two-font family through text, decorated the text through plain, underline, overline
and line through, display the head text with shadow in red color. (Structured Inquiry)
<!DOCTYPE html> Lab Program -5
<html>
<head>
<title>CSS Font</title>
<style>
h1{ text-shadow: 2px 12px 10px red;}
</style>
</head>
<body>
<h1> head with text shadow</h1>
<p style="font-family:cursive"> different font family</p>
<p style="font-family:monospace"> different font family</p>
<p style="text-decoration:none">working of defferent text decoration property</p>
<p style="text-decoration:underline">working of defferent text decoration property</p>
<p style="text-decoration:overline">working of defferent text decoration property</p>
<p style="text-decoration:line-through">working of defferent text decoration property</p>
</body>
</html>
All the different font names belong to one of the
generic font families. Absolute size:
font-size/line-height Sets the text to a specified size
The font-size property sets the size of the text. Does not allow a user to change the
We should not use font size adjustments to make text size in all browsers (bad for
paragraphs look like headings, or headings look accessibility reasons)
like paragraphs. Absolute size is useful when the
Always use the proper HTML tags, like <h1> - physical size of the output is known
<h6> for headings and <p> for paragraphs.
The font-size value can be an
1)absolute 2)relative size 3) percentage value
EXAMPLE:
<!doctype html>
<html>
<head> <style>
body {
font-size:medium
}
</style>
</head>
<body>
<h1>absolute value</h1>
<p style="font-size:xx-small"> xx-small</p>
<p style="font-size:x-small"> x-small</p>
<p style="font-size:small"> small</p>
<p style="font-size:large"> large</p>
<p style="font-size:x-large"> x-large</p>
<p style="font-size:xx-large"> xx-large</p>
</body>
</html>
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
<!doctype html>
<body>
<html>
<h1>relative value</h1>
<head>
<p style="font-size:larger"> larger than the base
<style>
font</p>
Body {
<p style="font-size:smaller"> smaller than the base
font-size:large font</p>
} </body>
</style> </html>
</head>
percentage value:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:180%
}
p{
font-size:150%
}
</style>
</head>
<body>
<h1>CSS font-size propery</h1>
<p>percentage value</p>
</body> </html>
font-style
The font-style property is mostly used to specify italic text.
This property has three values:
•normal - The text is shown normally
•italic - The text is shown in italics
•oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
font-variant
•The font-variant property specifies whether a text should be displayed in a small-caps
font.
•In a small-caps font, all lowercase letters are converted to uppercase letters. However,
the converted uppercase letters appears in a smaller font size than the original uppercase
letters in the text.
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
font-variant: normal;
}
[Link] {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p class="normal">good morning</p>
<p class="small">good</p>
</body>
</html>
font-weight
The font-weight property specifies the weight of a font:
<!DOCTYPE html>
<html>
<head> <body>
<style>
[Link] { <h1>The font-weight property</h1>
font-weight: normal;
} <p class="normal">This is a paragraph.</p>
[Link] {
font-weight: lighter; <p class="light">This is a paragraph.</p>
}
[Link] { <p class="thick">This is a paragraph.</p>
font-weight: bold;
} <p class="thicker">This is a paragraph.</p>
[Link] {
</body>
font-weight: 500;
} </html>
</style>
</head>
The font property
Instead of defining all the properties such as font style, font weight and font family separately, we
can specify the values of these properties in the font-property
P{ font: bold italic 30px verdana;}
Create a webpage to demonstrate font property (font family, font size, font style and font variant)
<!DOCTYPE html> p{
<html> font-family:"Lucida Console", "Courier New",
<head> monospace;
<style> font-size: 14px;
h1 { font-style: oblique;
font-family: Arial, Helvetica, sans-serif; }
font-size: 40px; </style>
font-style: normal; </head>
font-weight: 900; <body>
font-variant: small-caps; <h1>This is heading 1</h1>
} <h2>This is heading 2</h2>
h2 { <p>This is a paragraph.</p>
font-family: Arial, Helvetica, sans-serif; <p>This is another paragraph.</p>
font-size: 30px; </body>
font-style: italic; </html>
font-variant: small-caps;
}
Lab Program 6: Design and develop HTML program to display VIBGYOR.
<tr>
<!doctype html>
<td id="one"> Violet </td>
<html >
<td id="two"> indigo </td>
<head>
<td id="three">blue </td>
<title> VIBGYOR IMPLEMENTATION</title>
<td id="four">green</td>
<link rel="stylesheet" href="[Link]">
<td id="five">yellow </td>
</head>
<td id="six"> orange</td>
<body>
<td id="seven"> red </td>
<h1>VIBGYOR IMPLEMENTATION</h1>
</tr>
<table class='tab'>
</table>
</body>
</html>
CSS FILE
#two
{
h1 #five
background: #4B0082;
{ background-color:pink; {
font-family:sans-serif;
font-family:cursive; background: #FFFF00;
text-align: center;
text-align: center; font-family:"Times New Roman", Times, serif;
}
} text-align: center;
#three
td }
{
{ #six
background: #0000FF;
height:300px; {
font-family:fantasy;
width:150px; background: #FF7F00;
text-align: center;
border:6px solid white; font-family: Arial, Helvetica, sans-serif;
}
} text-align: center;
.tab #four }
{ #seven
border:6px dashed black; { {
} background: #FF0000;
#one background: #00FF00;
font-family: "Lucida Console", "Courier New",
{ monospace;
font-family:monospace;
background-color: #9400D3; text-align: center;
font-family:serif; }
text-align: center;
text-align: center;
} }
Lab program 6 OR
<!DOCTYPE html>
<html>
<head>
<title>VIBGYOR</title>
</head>
<body>
<div style="background-color: violet;"><p> violet</p></div>
<div style="background-color: indigo;"><p> indigo</p></div>
<div style="background-color: Blue;"><p> Blue</p></div>
<div style="background-color: green;"><p> Green</p></div>
<div style="background-color: yellow;"><p> yellow</p></div>
<div style="background-color:orange;"><p> orange</p></div>
<div style="background-color: red;"><p> red</p></div>
</body>
</html>