DEFINITION OF CSS  To make a global change, simply change

CSS stands for Cascading Style Sheets the style, and all elements in all the web
Styles - define how to display HTML elements. pages will be updated automatically.
Styles are normally stored in Style Sheets
SUPERIOR STYLES TO HTML
Definition:  CSS has a much wider array of
Cascading Style Sheets (CSS) attributes than HTML, so you can give a
 is a style sheet language used for far better look to your HTML page in
describing the look and formatting of a comparison to HTML attributes.
document written in a markup language
used in the web. MULTIPLE DEVICE COMPATIBILITY
 CSS is a simple design language  Style sheets allow content to be
intended to simplify the process of optimized for more than one type of
making web pages presentable. device.
 CSS handles the look and feel part of a  By using the same HTML document,
web page. Using CSS, you can control different versions of a website can be
the color of the text, the style of fonts, presented for handheld devices such as
the spacing between paragraphs, how PDAs and cell phones or for printing.
columns are sized and laid out, what
background images or colors are used, GLOBAL WEB STANDARDS
layout designs, variations in display for  Now HTML attributes are being
different devices and screen sizes as deprecated and it is being
well as a variety of other effects. recommended to use CSS.
 CSS specifications are maintained by the  So its a good idea to start using CSS in
World Wide Web Consortium (W3C) all the HTML pages to make them
compatible to future browsers.
CSS ADVANTAGES
CSS SAVES TIME CSS SYNTAX
 You can write CSS once and then reuse A style rule is made of 5 parts:
same sheet in multiple HTML pages. 1. Selector- A selector is an HTML tag at which a
 You can define a style for each HTML style will be applied. This could be any tag like
element and apply it to as many Web or <table> etc./ Customized variable
pages as you want. 2. Property - A property is a type of attribute of
 Styles are normally saved in HTML tag. Put simply, all the HTML attributes
external .css files. are converted into CSS properties. They could
 External style sheets enable you to be color, border etc.
change the appearance and layout of all 3. Value - Values are assigned to properties. For
the pages in a Web site, just by editing example, color property can have value either
one single file. red or #F1F1F1 etc.
4. Declaration - example is “ selector
PAGES LOAD FASTER { property: value } “
 If you are using CSS, you do not need to 5. Declaration Block – example is “ h1 { color:
write HTML tag attributes every time. #36C; fontweight: normal; letter-
Just write one CSS rule of a tag and spacing: .4em; } “
apply it to all the occurrences of that
tag.
 So less code means faster download
times.
EASY MAINTENANCE
 example below, all HTML elements with
class="center" will be center aligned:
TYPES OF SELECTORS *Do NOT start a Class name with a number!
UNIVERSAL SELECTORS
 rather than selecting elements of a .center {text-align:center;}
specific type, the universal selector <h1 class =”center”>Center-aligned
quite simply matches the name of any heading</h1>
element type − • { color: #000000; } <p class = “center”>Center-aligned paragraph.
 This rule renders the content of every </p<
element in our document in black.
p.center {text-align:left;}
DESCENDANT SELECTORS <p class=”left”> Center-aligned paragraph. </p>
 Suppose you want to apply a style rule
to a particular element only when it lies THE ID SELECTOR
inside a particular element.  You can define style rules based on the
 As given in the following example, style id attribute of the elements. All the
rule will apply to element only when it elements having that id will be
lies inside formatted according to the defined rule.
 tag. ul em { color: #000000; } #black { color: #000000; }
 This rule renders the content in black
CLASS SELECTORS for every element with id attribute set
 You can define style rules based on the to black in our document. You can make
class attribute of the elements. All the it a bit more particular. For example :
elements having that class will be −This rule renders the content in black for only
formatted according to the defined rule. <h1> elements with id attribute set to black.
.black { color: #000000; } h1#black { color: #000000; }
 This rule renders the content in black
for every element with class attribute The true power of id selectors is when they are
set to black in our document. You can used as the foundation for
make it a bit more particular. For descendant selectors, For example −
example − h1.black { color: #000000; } #black h2 { color: #000000; }
 This rule renders the content in black
for only elements with class attribute In this example all level 2 headings will be
set to black. You can apply more than displayed in black color when those headings
one class selectors to given element. will lie with in tags having id attribute set to
Consider the following example − black.
<p class = “center bold”>This paragraph will be
styled by the classes center and bold. </p> SAMPLE OF ID SELECTOR
 The id selector is used to specify a style
CLASS SELECTOR for a single, unique element.
 The class selector is used to specify a  The id selector uses the id attribute of
style for a group of elements. Unlike the the HTML element, and is
id selector, the class selector is most  defined with a "#".
often used on several elements.  The style rule below will be applied to
 This allows you to set a particular style the element with id="wrapper":
for many HTML elements with the same
class.
 The class selector uses the HTML class
attribute, and is defined with a "." In the
  Each declaration Block consists of
Multiple Style Rules
For example, to identify a
paragraph as “head”, use
the code:
<div id=“wrapper”>… </div>

THE CHILD SELECTORS

 You have seen the descendant
selectors. There is one more type of MULTIPLE STYLE RULES
selector, which is very similar to  You may need to define multiple style
descendants but have different rules for a single element.
functionality. Consider the following  You can define these rules to combine
example − multiple properties and corresponding
body > p { color: #000000; } values into a single block as defined in
 This rule will render all the paragraphs the following example –
in black if they are direct child of
<body> element. Other paragraphs put
inside other elements like <div> or <td>
would not have any effect of this rule.

THE ATTRIBUTE SELECTORS

 You can also apply styles to HTML
elements with particular attributes. Here all the property and value pairs are
 The style rule below will match all the separated by a semicolon (;). You can keep
input elements having a type attribute them in a single line or multiple lines. For better
with a value of text − readability, we keep them in separate lines.
input[type = "text"] { color: #000000; }
GROUPING SELECTORS
PROPERTY AND VALUE You can apply a style to many selectors if you
The property is the style attribute you want to like. Just separate the selectors with a comma,
change. Each property has a value: as given in the following example −

 Properties are separated from their

respective values by colons :
 Pairs are separated from each other by
semicolons ;

DECLARATION AND DECLARATION BLOCK

Definition: Each CSS line that includes property
and value
 Each declaration consists of a property
and a value
This define style rule will be applicable to h1, h2 EXAMPLE HTML CODE – INLINE STYLE SHEET
and h3 element as well. The order of the list is <!DOCTYPE html>
irrelevant. All the elements in the selector will <html>
have the corresponding declarations applied to <head> <title> This is my First CSS Code - Inline
them. Style </title>
</head>
WAYS OF INSERTING CSS <!--this part is the content of the HTML
There are three ways to associate/inserting document where the style is inserted inside the
styles with your HTML document. selectors or tags used -Inline style
1. INLINE STYLE sheet -->
2. INTERNAL STYLE <body style="background-color: tomato;">
3. EXTERNAL STYLE <!-- this style applies a tomato color to your
--Most commonly used methods are inline CSS HTML body background. -->
and External CSS. <h1 style="color: blue; margin-left: 40px;"> This
is a heading. </h1>
CSS RULES OVERRIDING <!-- this style applies a blue color to your
Here is the rule to override any Style Sheet Rule. heading1 <h1> tag. -->
1. Any inline style sheet takes highest priority. <p style="color: green; font-size: 20px;"> This is
So, it will override any rule defined in internal a paragraph. </p>
<style>...</style> tags or rules defined in any <!-- this style applies a green color to your
external style sheet file. paragraph <p> tag. -->
2. Any rule defined in internal style sheet </body>
<style>...</style> tags will override rules </html>
defined in any external style sheet file.
3. Any rule defined in external style sheet file WAYS OF INSERTING CSS- INTERNAL STYLE OR
takes the 2nd lowest priority, and rules defined EMBEDDED CSS - THE <STYLE> ELEMENT
in this file will be applied only when above two An Internal CSS is used to define a style for a
rules are not applicable. single HTML page. An internal CSS is defined in
4. The Lowest Priority is the Browser default, the <head> section of an HTML page, within a
without styles, whatever styles that the browser <style> element.. This tag is placed inside the
have, it will be applicable to the page design <head>...</head> tags. Rules defined using this
syntax will be applied to all the elements
available in the document. Attributes associated
WAYS OF INSERTING CSS- INLINE CSS - THE with <style> elements are
STYLE ATTRIBUTE

An Inline CSS is used to apply a unique style to a

single HTML element. An inline CSS
uses the style attribute of an HTML element.
Here is the generic syntax:
<element style = "...style rules....">
EXAMPLE HTML CODE – INTERNAL STYLE WAYS OF INSERTING CSS - EXTERNAL STYLE CSS
SHEET –
<!DOCTYPE html>  The <link> element can be used to
<html> include an external stylesheet file in
<head> your Html document.
<title> This is my First CSS Code - Internal Style  An external style sheet is a separate
</title> text file with .css extension.
<style type = "text/css" media = "all">  You define all the style rules within this
/* inside this Style Tag are the formatting design text file and then You can include this
of your file in any html document using <link>
HTML Body. */ element.
/* inside a Forward Slash + Asterisk is a multiple
line Here is the generic syntax of including external
comment css file:
and closed with asterisk + Forward Slash */ <head> <link href=“mycssstyle.css"
body{ rel="stylesheet"></head>
background-color: tomato;
/*this style applies a tomato color to your HTML Attributes associated with <style> elements are:
body background.*/
}
h1 { color: blue;
margin-left: 40px;
/*this style applies a blue color to your
heading1 <h1> tag.*/
}
p
{ color: green;
font-size: 20px;
/*this style applies a green color to your
paragraph <p> tag.*/
}
</style>
</head>
<!--this part is the content of the HTML
document where the
style will be applied -->
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 margin is transparent
EXAMPLE HTML CODE – EXTERNAL STYLE SHEET

THE BOX MODEL (CSS)

 All HTML elements can be considered as
boxes. In CSS, the term "box model" is WIDTH AND HEIGHT OF AN ELEMENT
used when talking about design and  In order to set the width and height of
layout. an element correctly in all browsers,
 The CSS box model is essentially a box you need to know how the box model
that wraps around every HTML works.
element.  When you set the width and height
 It consists of : margins, borders, properties of an element with CSS, you
padding, and the actual content. just set the width and height of the
 The box model allows us to add a content area. To calculate the full size
border around elements, and to define of an element, you must also add
space between elements. padding, borders and margins.

CONTENT - The content of the box, where text

and images appear
PADDING - Clears an area around the content.
The padding is transparent
BORDER - A border that goes around the
padding
and content
MARGIN - Clears an area outside the border.
The