Name :- Arpit Mecwan
S. ID :- 2672077
Subject Code :- CP 795
Topic :- CSS – Cascading Style Sheets
CSS – Cascading Style Sheets
What is CSS?
CSS is Cascading Style Sheets
It is a specification controlled by the World
Wide Web Consortium
(W3C).
HTML controls the organization of a Web
page document
CSS controls the presentation and layout of
the Web page document elements
What is CSS? ...
CSS1- visual presentation of elements
CSSP - positioning of elements
CSS2 -visual and audio presentation of
elements. It includes attributes from CSS1
and CSS-P
What CSS can do?
With CSS you can separate form from
structure
Control layout (alignment, spacing,
margins, colors, floating elements etc)
Maintain and update many pages faster and
easier
CSS-Terminology
CSS is declared as rules:
- Eg: H1 {color: green}
- Means that all text surrounded by the
<H1></H1> tags should be displayed in green
color
A rule has two parts
- H1 {color:green}
SELECTOR { DECLARATION }
CSS – Terminology…
Declaration has two parts:
HI {color : green }
property : Value
•In general:
•Element(s) Property1:Value1 Property2 : Value2a , Value2b
{ ; }
Eg.: H1, B {color:olive; background:yellow; font-
family: arial, courier }
CSS-Adding styles to web
pages
Four ways
– Embed a style sheet within HTML
document
– Link to an external stylesheet from the
HTML document
– Add styles inline in the HTML document
– Importing style sheets
CSS-Embed a style sheet
All stylesheet information lies at the top of the
HTML code (in the head portion)
Eg:
<HTML>
<STYLE TYPE=“text/css”>
<!—
H1 {color: green; font-family: impact}
-- >
</STYLE>
<HEAD>
<BODY> . . .
Style applies to the whole document
Example 1
CSS-Link to an external stylesheet
An externally defined stylesheet is used as a style
template that can be applied to a number of pages
A text file (with ext .css) contains the stylesheet
rules to be applied to a page (or set of pages)
Eg. A file named ‘mystyles.css’
H1 {color: green; font-family: impact}
B {color: red; font-family: courier}
This file is linked to the HTML document (<LINK>)
In the web Page:
<HTML>
<LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>
<HEAD>
<BODY> . . .
Example 2
CSS-Add styles inline
Applying stylesheets rules to particular
HTML tags
Eg:
<B STYLE=“color: purple; background: yellow”>Adding Inline
styles</B>
The style applies to only that particular
<B> tag
Example 3
CSS – Importing Stylesheets
Style Sheets which are external to the HTML
document are imported (included) into the <style>
element within the <head> element of the current
document.
Similar to linking, but useful when you want to
override some style rules when you include it in
your own stylesheet.
<style type="text/css">
<!-- @import
url(http://www.cen.com//houseBasic.css);
ul ul { list-style-type: circle; } --> </style>
The imported sheets must appear before any
document-specific styles
CSS- Classes
Selectively apply a style to HTML elements
you can define different classes of style to the
same element, and apply the appropriate class of
style when required
HTML
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
Stylesheet
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
Example 4
CSS-Positioning …
CSS-P allows you to specify four types of
positioning of layer
– Horizontal and vertical position
– Clipping size of the visible element within the
positioned area
– Z-order
– Visibility of the positioned element
CSS- Positioning …
Horizontal and Vertical Control
– left and top, that are relative to the distance
from the left-most, top-most corner of the
document window
• Example 9 (Absolute Postioning) & Example 10
(Relative Positioning)
Clipping size of the element
– Height and width establish the area in which
the layer in positioned
CSS- Positioning …
Establishing a Z-Order
– Z-index is an integer; the higher its value, the closer it
is to the front in the Z-ordered plane
– Example 11
Controlling Visibility of Elements
– Make any element or group of elements invisible. This
enables selective display of different parts of a
document when used in combination with the
Document Object Model exposed to Script
Thank You !
