Css ppt

PRESENTATION SUMMARY
-> What is CSS ?
-> CSS and HTML
-> The Box Model.
-> Style Sheet Implementation.
-> CSS Rule Structure.
-> HTML and DIV’s.
-> Common CSS properties.

WHAT IS CSS ?
Css stands for cascading style sheet.
It is not a language. It is a pat of
design. CSS is a heart of HTML.
Typical CSS file is a text file with an
extension “.CSS” and contain a
series of commands.

HTML WITHOUT CSS:-
“Html without CSS is like a piece of candy without
a pretty wrapper.”
Without CSS, HTML elements typically flow from
top to bottom of the page and position
themselves to the left by default .
With CSS help, we can create containers or DIV’s
to better organize content and make a Web page
visually appealing.

CSS AND HTML:-
(a)HTML and CSS work together to
produce beautiful and functional Web
sites.
(b) HTML= Structure
(c) CSS= Style

THE BOX MODEL:-
CSS works on the box model. A typical
Web page consists of many boxes joined
together from top to bottom . These boxes
can be stacked nested, and float.

ATTACHING A STYLE SHEET:-
Attach a style sheet to a page by adding the code to the
<head>
Section of the HTML page. There are 3 ways to attach CSS
to a page:
1.External style sheet:- Best used to control styling
on multiple pages.
<link href=“css/style.css” type=“text/css”
rel=“stylesheet”/>

2.Internal style sheet:-Best used to control
styling in the page.
<style type=“type=“text/css”>
H1 { color : red }
</style>
3.Inline Style Sheet:- CSS is not attached in the
<header> but is used directly within HTML tages.
<p style=“color : red”> Some Text </p>

CSS RULE STRUCTURE:-
A CSS RULE is made up of a selector and a declaration. A
declaration consists of property and value.
Selector { property : value ; }
Declaration

SELECTOR:-
A selector, here in green, is often an element of
HTML.
body { property : value; }
h1 { property : value; }
em { property : value; }
p { property : value; }

PROPERTIES AND VALUES:-
body { background ; purple; }
h1 { color : green; }
h2 { font-size: large ; }
p { color : #FFF ; }
Properties and Values tell an HTML elements how to display.
body
{
background : purple ;
color : green ;
}

COMMENT IN CSS:-
. Explain the purpose of the coding.
. Help others read and understand the code.
. Server as a reminder to you for what it all
means.
. Starts with /* and ends with */.

TYPICAL WEB PAGE (HTML)
Typical HTML Web page is made up of containers(boxes)
or DIV’s. Each DIV is assigned an ID or a class.
<div id =“ container”>
<div id=“ header”> Insert Tittle </div>
<div id=“ main”> content
<div id=“ menu ”> content </div>
</div>
<div id=“ footer ”> content </div>
</div>

TYPICAL WEB PAGE (CSS)
The CSS file users t he same DIV / I D / C LASS
names as the HTML and uses them to style
the elements.
# container { property : value ; }
# menu { property : value ; }
# main { property : value ; }
# footer { property : value ; }

IDS AND CLASSES:-
. IDs (#) are unique and can only be used once on
the page.
. Classes ( . ) can be used as many times needed.
HTML codes:-
<h1 id =“ main heading”> Names</h1>
<p class =“name”>xyz</p>
CSS codes:-
#main heading { color : green}
.name { color :red}

CSS BOX PROPERTIES:-
. Background-color
. Width
. Padding
. Margin
. Border-width
. Border color
. Border-style
. Background-image

BACKGROUND COLOR:-
The background-color property specifies
the background color of an element.
Example
body {
background-color: light blue;
}

BACKGROUND IMAGE
The background-image property specifies an image
to use as the background of an element.
By default, the image is repeated so it covers the
entire element.
Example:-
body {
background-image: url("paper.gif");
}

CSS BORDER STYLE:-
The border-style property specifies what kind of border to
display.
The following values are allowed:
-dotted - Defines a dotted border
-dashed - Defines a dashed border
-solid - Defines a solid border
-double - Defines a double border
-none - Defines no border
-hidden - Defines a hidden border

CSS BORDER COLOR:-
The border-color property is used to set the color of the
four borders.
The color can be set by:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
Example
p.one {
border-style: solid;
border-color: red;
}

CSS HEIGHT AND WIDTH:-
The height and width properties are used to set the
height and width of an element.
The height and width can be set to auto (this is
default. Means that the browser calculates the
height and width), or be specified in length
values, like px, cm, etc., or in percent (%) of the
containing block.
Example:-
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}

CSS MARGIN:-
The CSS margin properties set the size of the white
space OUTSIDE the border.
CSS has properties for specifying the margin for each side
of an element:
-margin-top
-margin-right
-margin-bottom
-margin-left

CSS PADDING:-
The CSS padding properties define the white space between the
element content and the element border.
The padding clears an area around the content (inside the
border) of an element.
CSS has properties for specifying the padding for each side of an element:
-padding-top
-padding-right
-padding-bottom
-padding-left

CSS FONTS:-
The CSS font properties define the font family, boldness,
size, and the style of a text.
(a) CSS Font Families:-
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look
(like "Serif" or "Monospace")
font family - a specific font family (like "Times New
Roman" or "Arial")

(b) Font Family:-
The font family of a text is set with the font-
family property.
Example
p {
font-family: "Times New Roman", Times, serif;
}

(c) Font Style:-
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
Example:-
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}

(d) Font Size:-
The font-size property sets the size of the text.
Always use the proper HTML tags, like <h1> -
<h6> for headings and <p> for paragraphs.

ADVANTAGES OF CSS:-
-Easier to maintain and update.
-Greater consistency in design.
-More formatting options.
-Lightweight code.
-Faster download times.
-Search engine optimization benefits.
-Ease of presenting different styles to different
viewers.
-Greater accessibility.

Css ppt

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Css ppt (20)

Recently uploaded (20)

Css ppt