What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are
to be displayed on screen or in other
media .
CSS saves a lot of work.it can control
the layout of multiple web pages all at
once( i.e. with the help of External style
sheets).
Why CSS?
HTML was never designed to contain tags
for formatting a web page.
HTML was created to describe the content
of a web page like:
<h1> this is a heading</h1>
When tags like <font> and color attributes
were added to the HTML 3.2 specification ,
it started a nightmare for web developers.
Why CSS?
Development of large websites, where
fonts and color were added to every single
page, became a long and expensive
process.
To solve this problem CSS was created by
World Wide Web Consortium (W3C).
CSS is used to defines styles for your web
pages, including the design and layout.
CSS syntax
A CSS rule-set consists of a selector and a declaration
block.
The selector points to the HTML element you want to
style.
The declaration block contains one or more declaration
separated by semicolon.
Each declaration includes a CSS property name and a
value ,separated by a colon.
A CSS declaration always ends with a semicolon and
declaration blocks are surrounded by curly braces.
CSS comments
/* This is a single-line comment */
text-align: center;
/* This is
a multi-line
comment */
CSS color:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
CSS Selectors
CSS selectors are used to select HTML elements based
on their element name, id, class and attribute.
The Element Selector:
The element selector selects elements based on the
element name.
P{
Text-align :center;
Color: red;
}
CSS Selectors
The id Selector:
The id selector uses the id attribute of an HTML element
to select a specific element.
The id of an element should be unique within a page,
so the id selector is used to select one unique
element.
To select an element with a specific id , write a
hash(#) character followed by the id of the
element.
#Para1{
Text-align :center;
Color: red;
}
CSS Selectors
The Class Selector:
The Class Selector selects elements with a specific class
attribute.
To select elements with a specific class , write a period (.
) character followed by the name of the class.
.center{
Text-align :center;
Color: red;
}
CSS Selectors
The specific Class Selector:
You can also specify that only specific HTML elements
should be affected by a class.
P.center{
Text-align :center;
Color: red;
}
CSS Selectors
The Grouping Selectors:
If you have elements with the same style definitions,
then you can group selectors.
To group selectors, separate each selector with a
comma.
h1,p1,p2{
Text-align :center;
Color: red;
}
Three ways to insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
1.External style sheet
Make a file and rename it with .css and no
w link to html page by adding the below
code in head portion
<link rel="stylesheet" type="text/css href="mys
tyle.css">
Three ways to insert CSS
Internal style sheet
An internal style sheet may be used if one single page h
as a unique style.
Internal styles are defined within the <style> element, ins
ide the <head> section of an HTML page.
<style type=“text/css”>
h1 {
color: blue
margin-left: 20px;
}
</style>
Three ways to insert CSS
Inline style
An inline style may be used to apply a unique sty
le for a single element.
To use inline styles , add the style attribute to th
e relevant element.
<p style="color:red;margin-left:20px;">paragraph</
p>
