Unit 6

Cascading Style Sheet

(CSS)
 Introduction
 CSS stands for Cascading Style Sheets.

 It is a style sheet language used to add styles to HTML documents displayed in browsers. CSS

enhances the user experience by making web pages more attractive and user-friendly.

 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 (Cascading Style Sheets) is used to style and layout web pages — for example, to

alter the font, color, size, and spacing of your content, split it into multiple columns, or add

animations and other decorative features.

 Introduction
In web page designing, style sheets introduce a major breakthrough. They
allow web page designers to improve and change the appearance of their
web pages very efficiently.

In earlier days, web page designers used to write presentation information
within the web pages. This mechanism increased the complexity of web pages
significantly. Moreover, changing the presentation on demand required
considerable overhead. Style sheets solve these problems easily.

A style sheet is a document that contains style information about one or

more documents written in markup languages. It enables us to control
rendering of styles such as fonts, color, typeface, size, spacing, margins, and
other aspects of document style. A style sheet is composed of a set of style
rules written in a specified format, This set of style rules instructs
browsers on how to present a document on the screen.
 Introduction
Cascading Style Sheet (CSS) is a style sheet language that
specifies how to incorporate style information in a style sheet,
The term "cascading" indicates that several style sheets can
be blended to present a document on the browser's screen,
The later style sheets have greater precedence than earlier ones.
Not all style sheet languages support cascading.
 Different Ways to Use CSS
 There are three primary ways to use CSS:
1. External CSS
External CSS creates a separate CSS file and links it to the HTML document. This
method promotes consistency across multiple web pages by sharing the same style
rules. Any changes to the external CSS file automatically update the styling for all
linked pages, streamlining website maintenance.
2. Internal CSS
Internal CSS is embedded within the HTML document using the `<style>` tag. This
method is useful when you want unique styles for a single page. However, it does
not offer the same level of reusability as external CSS, making it suitable for smaller
projects or specific page customizations.
3. Inline CSS
Inline CSS is applied directly to individual HTML elements using the `style`
attribute. It allows you to override external or internal styles for specific elements.
While handy for making quick adjustments, inline CSS should be used sparingly, as it
can make the HTML code less maintainable and harder to update consistently.
 Advantages of CSS
• Saves time: It allows you to define a style for each HTML element. You
can apply this style to as many web pages as you want.
• Easy maintenance: You can easily update document formatting and
maintain consistency in multiple documents.
• Faster page loading: It allows multiple pages to share formatting that
reduces file transfer size, which helps pages load faster.
• Platform Independence: It offers platform independence and also
supports the latest browsers.
• Multiple device compatibility: It allows you to optimize content for more
than one type of device. You can present an HTML document in different
viewing styles for different devices like computers, cell phones, and
printers.
• Superior styles to HTML: It has more presentation capabilities than
HTML. It allows you to enhance the look of your HTML pages better than
using HTML presentational elements and attributes.
 Advantages of CSS
• The primary intention of CSS is to separate document presentation
from document content written in markup languages. So,
document writers can concentrate on developing the document
content using markup languages such as HTML. (or XHTML), and
XML without bothering about the visual presentation of these
documents.
• On the other hand, style sheet writers can think about the visual
presentation of these documents without bothering about the
document content. This mechanism allows us to give a different
look to the same document, without significant effort The only
thing we have to do is to use a separate style sheet for different
presentations.
• The same style sheet can also be applied on different documents. This
way, CSS reduces development time significantly [Figure 5.1).
 Advantages of CSS

• Most of the browsers cache external style sheets, So, once a

style sheet is cached, there is no delay in document presentation,
The size of a document using external style sheet is comparatively
smaller and hence, download time is also smaller, This speeds up
overall response time
• CSS provides many more style attributes for defining the look
and feel of web pages, than plain HTML
 CSS Syntax
 The CSS syntax comprises a set of rules. The rule set has 3 parts, a
selector, a property, and a value, as shown below:

h1 {
color:blue; font-size:12px;
}

• h1 is the selector
• color and font size are properties
• blue and 12px are value.
 The part of syntax that contains the properties and values is known
as Declaration Block.
 Inline CSS
 Inline CSS is a method of styling where CSS properties are directly applied
to HTML elements within the body section using the style attribute.

<h1 style="color: green;">Hello World!!</h1>

 Internal CSS
Internal CSS is used when a single HTML document must be styled uniquely.
The CSS rule set is embedded within the HTML file in the head section
using the <style> tag.
 External CSS
 External CSS involves creating a separate CSS file that contains only
style properties. This file is linked to the HTML document using the
<link> tag.

/* This will be separate file, for example style.css */

<style>
h1 {
color: green;
}
</style>

<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
1) ADDING CSS

There are four ways to specify style information in a

document:

External

Embedded

Imported

Inline
 External Style Sheets
 In this case, style information is written in a separate, file and is
referenced from an HTML document An external style sheet is useful
when the same style is applied on different documents.
 For example, the designer of a website may keep one style sheet file
for entire website. This helps to update and maintain the look and feel
of the entire website from a single file, without significant effort It was
mentioned that external style sheets are cached by most of the
browsers. So, browsers have to download only documents. This
implies faster response.

If the document is an HTML document, the external style sheet is

specified using the HTML

<link> tag. Following is an example:

<link rel="stylesheet" type="text/css" href="mystyle.css"/>

 External Style Sheets
 This tag specifies that the style information to be used to display this
document is stored in a file named mystyle.css. It is inserted in the
head section of an HTML document.

According to W3C specification, external style sheets can be of three

types: persistent, alternate, and preferred.
 A persistent style sheet is one that is always applied. Document
authors may also specify a set of alternate style sheets, one of which
is selected by the user depending on their choice. Authors may also
specify one of the alternate style sheets as the preferred style sheet
which is applied when no style sheet is selected, Several alternate
style sheets may be grouped under a single title. All styles in a group
must be applied when a user selects an alternate style sheet by its
title. Note that current browsers do not support alternate style sheets.
 External Style Sheets
 The attribute rel specifies the type of style sheet used. Its value is
"stylesheet for persistent and preferred style sheets and alternate
stylesheet for alternate style sheets. The optional attribute title is
used to name a style sheet, Persistent style sheet is specified by the
absence of the title attribute whereas preferred and alternate style
sheets are specified by the presence of the title attribute. Following is
an example of the preferred style sheet.

<link rel="stylesheet" type="text/css" href="mystyle.css" title="large"/>

The following example shows an alternate style sheet:

<link rel="alternate stylesheet" type="text/css" href="mystyle.css"

title="large"/>
 Imported Style Sheets
Another way of importing a style sheet is to use import statement. It works in much the same
way as linking. It allows importing a style sheet from another style sheet. The import statemem
is used within the style tag in an HTML document as follows:

<style>

@import urirstylei.com

<style

This code segment imports all style rules written in the CSS file style.cas. The style elemen may
include other internal style rules, but the import statement must be the first rule within a style
tag. Even a comment before the import statement can cause it to fail. The style sheet may be
mentioned as a string as follows:

cetylee
 #import "stylel.css":

</style>

This import statement will be interpreted as if it had url (...) around it.

Internal rules override the conflicting rules in the imported style sheets. For
example, the following style rule makes all paragraphs green even if a
stylel.css file contains a rule picolor: red

<style>

@import urli stylel.css")

picolor: green:)

<style>
 #import "stylel.css":

</style>

This import statement will be interpreted as if it had url (...) around it.

Internal rules override the conflicting rules in the imported style sheets. For
example, the following style rule makes all paragraphs green even if a
stylel.css file contains a rule picolor: red

<style>

@import urli stylel.css")

picolor: green:)

<style>
selector
 CSS Selectors are used to select the HTML elements you want to style on a
web page. They allow you to target specific elements or groups of elements
to apply styles like colors, fonts, margins, and more.
 Types of Selectors
• Universal Selectors
• Element Selectors
• Class Selectors •Adjacent Sibling Selectors
• Id Selectors •General Sibling Selectors

• Attribute Selectors
• Group Selectors
• Pseudo-element Selectors
• Pseudo-class Selectors
• Descendant Selectors
• Child Selectors
CSS Universal Selector

Universal selector, denoted by an asterisk mark (*), is a special selector that
matches all elements in an HTML document. These are generally used to
add a same length margin and padding to all the elements in document.
 Syntax
*{
margin: 0;
padding: 0;
}

As per the above syntax, the universal selector is used to apply a margin and
padding of 0 to all HTML elements.
CSS
 Element Selector
A element selector targets an HTML element, such as <h1>, <p>, etc. This
is used when we want to apply similar style to all the <p> tags or <h1> tags
in the document.

 Syntax
/* Sets text color of all p tags to green */
p{
color: green;
}
/* Add underline to all h1 tags in document */
h1 {
text-decoration-line: underline;
}
 The class selector selects HTML elements with a specific class attribute. It
CSS Class Selector
is used with a period character . (full stop symbol) followed by the class
name.
 Syntax
<html>
<head>
<style>
.center {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
 CSS Class Selector
 The class selector selects HTML elements with a specific class attribute. It
is used with a period character . (full stop symbol) followed by the class
name.
 Syntax
<html>
<head>
<style>
.center {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
 CSS Id Selector
 The id selector selects the id attribute of an HTML element to select a
specific element. An id is always unique within the page so it is chosen
to select a single, unique element. It is written with the hash character
(#), followed by the id of the element.
 Syntax
#style-p {
color: green;
font-size: 25px;
}

#style-h1 {
text-decoration-line: underline;
color: red;
}
 Group Selector
 The grouping selector is used to select all the elements with the same style
definitions.
 Grouping selector is used to minimize the code. Commas are used to
separate each selector in grouping.
 Syntax As you can see, you need to define CSS properties
h1 { for all the elements. It can be grouped in following
ways:
text-align: center;
color: blue; } h1,h2,p {
text-align: center;
h2 { color: blue;
text-align: center; }
color: blue; }
p{
text-align: center;
color: blue; }
 CSS Attribute Selector
 attribute Selector allows you to select elements based on the presence,
value, or specific characteristics of their attributes. They are particularly
useful for dynamic or structured content where attributes play a key role,
such as in forms or data tables.
 Syntax
<html>
<head>
<style>
/* Styles all elements with a 'placeholder' attribute */
[placeholder] {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">
</body>
</html>
 A pseudo-element selector is used to style a specific part of an element
CSS Pseudo Element Selector
rather than the element itself.
<html>
 Syntax <head>
<style>
/* Define contents before paragraph */ /* Add and style contents before
paragraph */
p::before {
p::before
content: " "; { content: "Note: ";
font-weight: bold;
} color: red; }
/* Add and style contents after
paragraph */
/* Style first letter of paragraph */ p::after
{ content: " [Read more]";
p::first-letter { font-style: italic;
font-size: 2em; color: blue; }
</style>
} </head>
<body>
<h2>Pseudo-element selector</h2>
<p>This is a paragraph.</p>
</body> </html>
 It is used to style a special type of state of any element. For example- It is
CSS Pseudo Class Selector
used to style an element when a mouse cursor hovers over it. This is
commonly used for buttons and links to enhance interactivity.
 Syntax h1,
h2 {
<html>
color: green;
<head> text-align: center;
}
<title>CSS :hover Pseudo Class</title>
</style>
<style> </head>
.box { <body>
<h1>Geeks For Geeks</h1>
background-color: yellow; <h2>:hover Pseudo-class</h2>
width: 300px; <div class="box">
My color changes if you hover over me!
height: 200px; </div>
margin: auto; </body>
</html>
font-size: 40px;
text-align: center;
 The CSS descendant selector is utilized to match the descendant elements
CSS Descendant Selector
of a particular element. The word Descendant indicates nested anywhere in
the DOM Document Object Model tree.
 Syntax
<html> <head> <style>
div p {
background-color: lightblue;
font-weight: bold; }
</style> </head>
<body> <div>
<p> This is 1st paragraph in the div. </p>
<p> This is 2nd paragraph in the div. </p>
<div> This is second div in the first div
<p> This is the paragraph in second div. It will also be affected. </p>
</div> </div>
 CSS Child Selector
 The child selector in css is used to target all the direct child of a particular
element. This is denoted by '>' (Greater than) symbol.
 Syntax
<html><head><style>
div > p {
background-color: yellow;
}</style></head><body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a
specified element.</p>
<div><p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section> <p>Paragraph 4 in the div.</p></div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body></html>
Adjacent Sibling Selectors

div ~ p
{
background-color: yellow;
}
General Sibling Selectors
div + p
{
background-color: yellow;
}


Browser Compatibility
Not all browser supports the full CSS Specification.

1.Microsoft Internet Explorer version 8 supports CSS level 2 and some

internationalization features from level 3.
2.Google has a browser called chrome supports CSS2.
3. The Safari (version 3) web browser from Apple support CSS2 specification.
4. Mozilla has released version 3 of the Firefox web browser which supports CSS
level 2 and parts of level 3.
5. Opera has released version 9.50 of its browser for multiple platforms, including
cell phones. It support CSS level 2 and parts of level 3.
6. The Lobo browser (version 0.98) also supports CSS2.
7. The iCab is browser of the Mac OS. It supports CSS2 and help you to fix errors
in CSS or HTML files.
8. Oregan Network has released a browser for various embedded platforms,
called Oregan TV Browser: It supports CSS2, XHTML,XML etc.
9.The KDE(K Desktop Environment ) has released version 3.5 which supports
CSS2.
Imported style sheet

Syntax:
<style>
@ import url (“style1.css”);
</style>

<style>
@import “style1.css”;
</style>