UNIT -III
CASCADING STYLE SHEET
CSS (Cascading Style Sheets) is used to style HTML documents. It controls the
appearance of elements such as text, colors, layout, and more. CSS rules are applied to
HTML elements to create visually appealing and user-friendly websites.
Where You Can Add CSS Rules
CSS rules can be added to your HTML documents in several ways:
1. Inline CSS: Applied directly to HTML elements using the style attribute.
html
<p style="color: blue;">This is a blue paragraph.</p>
2. Internal CSS: Included within the <style> tag in the <head> section of the
HTML document.
html
Copy code
<head>
<style>
p { color: red; }
</style>
</head>
3. External CSS: Placed in a separate .css file and linked to the HTML document
using the <link> tag.
html
<head>
<link rel="stylesheet" href="[Link]">
</head>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Properties
Controlling Text
color: Sets the color of the text.
p { color: green; }
font-family: Specifies the font type.
p { font-family: Arial, sans-serif; }
font-size: Adjusts the size of the text.
p { font-size: 16px; }
font-weight: Defines the thickness of the text.
p { font-weight: bold; }
text-align: Aligns text within its container.
p { text-align: center; }
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>
Text Formatting
text-transform: Controls capitalization.
p { text-transform: uppercase; }
line-height: Adjusts the spacing between lines of text.
p { line-height: 1.5; }
letter-spacing: Sets the spacing between characters.
p { letter-spacing: 2px; }
text-decoration: Adds decoration such as underline.
a { text-decoration: underline; }
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: justify:</h2>
<p class="c"> <!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at pulvinar felis blandit. </p>
<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at pulvinar felis blandit. </p>
</body>
</html>
.</p>
</body>
</html>
Text Pseudo-Classes
:hover: Applies styles when the user hovers over an element.
a:hover { color: red; }
:focus: Styles elements that are in focus (like input fields).
input:focus { border-color: blue; }
:active: Styles an element when it is activated (e.g., clicked).
a:active { color: green; }
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
[Link] {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><strong>Note:</strong> It is not recommended to underline text that is not a
link, as this often confuses
the reader.</p>
</body>
</html>
Selectors
Element Selector: Targets HTML elements by name.
div { color: black; }
!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Class Selector: Targets elements with a specific class.
.highlight { background-color: yellow; }
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
ID Selector: Targets an element with a specific ID.
css
#header { font-size: 24px; }
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body> </html>
Attribute Selector: Targets elements with a specific attribute.
[type="text"] { border: 1px solid gray; }
Descendant Selector: Targets elements that are descendants of a specified
element.
.container p { color: blue; }
Lengths
Absolute Units: Fixed values like px, cm, in, pt.
div { width: 100px; }
Relative Units: Based on other values like em, rem, %.
div { width: 50%; }
Introducing the Box Model
The CSS Box Model describes how the content of an element is structured and styled:
1. Content: The actual content of the element (e.g., text).
2. Padding: Space between the content and the border.
div { padding: 10px; }
3. Border: A border around the padding (optional).
div { border: 1px solid black; }
4. Margin: Space outside the border, separating the element from others.
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
This <div> element will have a total width of 350px and a total height of 80px:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
div { margin: 20px; }
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</div>
</body>
</html>
More Cascading Style Sheets
Links
:link: Styles links that haven’t been clicked.
a:link { color: blue; }
:visited: Styles links that have been clicked.
a:visited { color: purple; }
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
order to be effective.</p>
</body>
</html>
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Link Buttons
This example demonstrates a more advanced example where we combine several
CSS properties to display links as boxes/buttons:
Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Lists
list-style-type: Specifies the type of list item marker.
ul { list-style-type: square; }
list-style-position: Controls the position of the list markers.
ul { list-style-position: inside; }
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
ul.b {
list-style-type: square;
ol.c {
list-style-type: upper-roman;
ol.d {
list-style-type: lower-alpha;
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Position The List Item Markers
The list-style-position property specifies the position of the list-item markers
(bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list
item. The start of each line of a list item will be aligned vertically. This is default:
Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola
Tables
border-collapse: Collapses table borders.
table { border-collapse: collapse; }
text-align: Aligns text within table cells.
th, td { text-align: center; }
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:
Firstname Lastname
Peter Griffin
Lois Griffin
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Table Width and Height
The width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th>
elements to 70px:
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Outlines
outline: Draws an outline around an element.
input:focus { outline: 2px solid blue; }
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
The outline-style property specifies the style of the outline, and can have one of
the following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline
The outline-width property specifies the width of the outline, and can have one of
the following values:
thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)
The outline-color property is used to set the color of the outline.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that the outline is visible,
regardless of color background)
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual
outline properties:
outline-width
outline-style (required)
outline-color
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
[Link] {outline-style: dotted;}
[Link] {outline-style: dashed;}
[Link] {outline-style: solid;}
[Link] {outline-style: double;}
[Link] {outline-style: groove;}
[Link] {outline-style: ridge;}
[Link] {outline-style: inset;}
[Link] {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color
value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color
value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color
value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color
value.</p>
</body>
</html>
Focus and activate pseudo classes Generated Content:
Pseudo-Elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
::before and ::after: Add content before or after an element’s content.
.quote::before { content: "“"; }
.quote::after { content: "”"; }
he ::first-line pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-line pseudo-element:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Miscellaneous Properties
opacity: Sets the transparency level of an element.
div { opacity: 0.5; }
visibility: Controls whether an element is visible.
div { visibility: hidden; }
Additional Rules
overflow: Controls what happens if content overflows an element’s box.
div { overflow: auto; }
z-index: Controls the stacking order of positioned elements.
div { position: absolute; z-index: 10; }
Positioning and Layout
position: Specifies the positioning method (e.g., static, relative, absolute, fixed).
div { position: relative; top: 10px; left: 20px; }
display: Controls the display behavior (e.g., block, inline, flex, grid).
div { display: flex; }
float: Floats elements to the left or right.
img { float: left; }
Page Layout CSS
Flexbox: A layout model for designing complex layouts with ease.
css
.container { display: flex; }
Grid: A layout system for creating grid-based designs.
css
.container { display: grid; grid-template-columns: 1fr 1fr; }
CSS Layout - Horizontal &
Vertical Align
Center elements
horizontally and vertically
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of
its container.
The element will then take up the specified width, and the remaining space will be
split equally between the two margins:
This div element is centered.
Design Issues
Browser Compatibility: Ensure that styles work across different browsers.
Accessibility: Use CSS to enhance the accessibility of your content (e.g., high
contrast for readability).
Performance: Optimize CSS to avoid large, inefficient files that can slow down
page load times.
CSS is a versatile and powerful tool that, when mastered, allows you to create
visually compelling and well-structured web pages.
**************