Cascading style sheets

 “Cascading Style Sheets (CSS) is a style sheet language used for

describing the presentation of a document written in a markup
language such as HTML.”
 CSS consists of set of rules that determines how the content of
elements within our document should be formatted.
 Collection of CSS rules is called as “Stylesheet”
 It is the language for describing the presentation of Web pages,
including colors, layout, and fonts, thus making our web pages more
presentable to the users.
Advantages of CSS:
 Reduced Complexity and Repetition .
 Multiple style sheets can be included in a single page.
 Reduced Document Size.
 write CSS once and then reuse the same sheet in multiple HTML pages.
CSS RULES:
Syntax:
Selector {
property1 : value ;
property2 : value;
……
}
CSS rule is made up of 2 parts:
• Selector
• Declaration
Selector :Element/ set of elements to which declaration must be applied to
Declaration:: The declaration, which sets out how the elements referred to in the
selector should be styled
The declaration is also split into two parts, separated by a colon:
(i). Property:which is the property of the selected element(s) that we want to affect
(ii). Value:A value , which is a specification for this property;
 The selector points to the HTML element we 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.
h1 selector
{
font-family :arial;
color : blue;
Declaration
text-align : center;
}
CSS SELECTORS:
CSS selectors are used to determine which HTML element, or set of elements, to apply
the CSS declarations/rules to.
Basic CSS selectors:
 Element name/type Selector
 Class Selector
 Id Selector
 Grouping Selector
 Universal Selector
 Pseudo Class Selector
Element name/type Selector
Selects HTML elements based on the element name and applies CSS rules.
Syntax:
element-name {
property1 : value;
property2 : value;
……
}
Example:

Here, all <p> elements on the page will be center-aligned, with a red
text color:
p{
text-align: center;
color: red;
}
Class Selector/ Stylesheet ‘Class’:
Selects HTML elements with a specific class attribute.
Allows us to define multiple styles for the same type of HTML element.

.
It is used with a period character ‘ ’ followed by the class name.
Syntax 1:
selector.classname{
property1 :valuel;
property2 : value;
….
}
Example:
<p> elements with class="center" will be red and center-aligned:
CSS Rule:
p.center {
text-align: center;
color: red;
}
Id Selector:
Uses the id attribute of an HTML element to select a specific element.
There should be only one element with a given ID in a document.
Syntax:
#idname{
property1 :valuel;
property2 : value;
…..
}
Example:
The CSS rule below will be applied to the HTML element with id="para1":
CSS rule: #para1 {
text-align: center;
color: red;
}
HTML Code:<p id="para1"> This Paragraph is Red in color </p>
Grouping Selector:
Used when we want to apply same styles to multiple elements.
The grouping selector selects all the HTML elements with the same style definitions.
To group selectors, each selector is separated by a space.
Syntax:

Selector 1, Selector 2,…..

{
property1 :valuel;
property2 : value;
….
}
Example:
h1, h2, p {
text-align: center;
color: red;
}
Universal Selector:
The universal selector is an asterisk (*)
Selects all the HTML elements on the page.
Used:
When we want a rule to be applied to all elements present in a web page.
To specify default values that will apply to the whole of the document (such as a font -
family and font - size )
Syntax:
*{
property1 : value;property2 : value;
……
}
Example:
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
Pseudo-class Selector:
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax:
selector:pseudo-class {
property: value;
}
Example 1:
When user moves his mouse over the div element its background color will be set to
blue.
div:hover {
background-color: blue;
}
o Some pseudo-classes:

 :link - adds style to an unvisited link

 :visited – adds style to a visited link

 :active – adds style to an active link

 :hover – add style to an element when we mouse over it

 :focus – adds style to an element when it has focus

 :first-child – adds style to the first child of an element

 :last-child – adds style to the last child of an element

 :nth-child(N) – adds style to an nth child of an element. N can be a number

or keyword(even/odd)
 When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.
 There are three ways of inserting a style sheet:
 Inline style sheet
 Internal/Embedded style sheet
 External style sheet
 INLINE STYLE SHEET:
 Inline styles are placed directly inside a specific HTML element in the
code.
 The style is applied at the occurrence of the HTML element by using
“style” attribute in the relevant tag.
 The style attribute can contain any number of CSS Properties.
 Inline styles cannot be reused at all
Syntax:
<element style="property1:value;property2:value;… ">
--- </element>
Example:
<html>
<body>
<h1>This is Inline Text</h1>
<div style="color:red;font-size:40pt;text-align:center">This is Inline style
sheet</div>
</body>
</html>
INTERNAL STYLE SHEET:

An internal style sheet may be used if one single page has a

unique style.
Internal styles are defined within the <style> element, inside the
<head> section of an HTML page.
All the desired selectors along with the properties and values are
included in the header section between <style> and </style> tags.
 You can reuse from any location within page.
 Styles are not accessible to other pages.
 Syntax:
<style>
selector{
attribute:value;}</style>
<html>
<head>
<style>
body {
background-color:red;
}
h1 {
color: yellow;
font-family: Times New Roman;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
EXTERNAL STYLE SHEET:
 External Style Sheets are useful when we need to apply
particular style to more than one web page.
 We can define styles in a separate stye sheet with
extension .css file
 The name of the external .css file has to be mentioned on our
web pages. Then the styles defined in the .css file will be
applied to all those web pages.
 <link> tag is used to link the external style sheet to a web
page.
 Using external style sheet wil increase the number of requests
for page that increases page load time.
Example:
effects.css:
h1 {
color:red;
background-color:cyan;
text-decoration:overline;
}
p{
color:yellow;
background-color:green;
}
Ext.html:
<html>
<head>
<link rel="stylesheet" href=“effects.css">
</head>
<body>
<h1>This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>