Cashcading stylesheets

Seminar
On
Cascading Style Sheets

 History of CSS
 Introduction of CSS
What is CSS?
 Why use CSS?
 CSS Syntax
 CSS Selectors.
 Why to Insert CSS?
 CSS Properties.

History
 CSS Was first proposed by Hakon Winum Lie on October 10,
1994. Lie was Working with Tim Berners-Lee at CERN.
CSS has various levels and profiles:
 Each level of CSS builds upon the last, typically adding new
features and typically denoted as CSS 1, CSS 2,css3.
Css1:-
 The first CSS specification to become an official W3C
Recommendation is CSS level 1.
 Published inDecember 17, 1996. Håkon Wium Lie and Bert Bos.
Css2:
 CSS level 2 specification was developed by the W3C and
published as a recommendation in May 1998. A superset of
CSS 1, CSS 2

Css2.1:-
 CSS level 2 revision 1, often referred to as "CSS 2.1", fixes
errors in CSS 2, removes poorly supported or not fully
interoperable features.
 CSS 2.1 went to Proposed Recommendation on 12 April
2011. After being reviewed by the W3C Advisory
Committee, it was finally published as a W3C
Recommendation on 7 June 2011
CSS3:-
 different modules have different stability and
statuses. As of June 2012, there are over fifty CSS
modules published from the CSS Working Group

Introduction
 CSS is a rule based language designed to be called
from an HTML,XHTML or XML document.
 CSS was created by w3(consortium).
 The purpose of Cascading Style Sheets is to allow web
authors to manipulate a web page’s appearance
without affecting it’s HTML structure.

What is CSS?
 CSS stands for Cascading Style Sheets.
 It is not a language. It is a part of design.
 CSS is a heart of HTML.
 CSS allows us to apply formatting and styling to the
HTML that builds our web pages.
 Style: CSS deals specifically with the presentation
domain of designing a web pages. like(color, font,
layout , Tables, Paragraphs and Headings )

Why use CSS?
 Allows for much richer documents appearances than
HTML
 Reduce workload by centralizing commands for visual
appearances instead of the HTML document.
 Use same style on multiple pages.
 Reduce page download size.

CSS Syntax:
 H1 { color : blue; font-size : 12px; }
property value property value
 Selector
 The HTML element you want to add style to.
(examples: p, h2, body, img, table)
Declaration:
 Property: what aspect you want to change
(examples: color, font-size, margin)
 Value: the exact setting for that aspect
(examples: red, italic, 14pt)
P { color : red; text-align : center; }

CSS comments:
 Comments are used to explain your code and may help
you when you edit the source code at a later date
/* this is a comment */
p{
text-align: center ;
/* this is paragraph */
}

CSS Selectors:
 Style for a HTML element, CSS allows you to specific your
own selectors called “Id” and “Class”.
 Id: this selector is used to specific a style for a single,
unique elements. is defined with a “#”.
 #p { font-size: 10px;
font-color: White; }
 Class: the class selector is used to specify a style for a group
of elements. And used to HTML class attribute. A class
selector is a name preceded by a period (.)
 .class {color: red}
.class { font-size: 10px;
font-color: White; }

Ways to Insert CSS:
Attaching a style sheets to a page by adding the code to
the <head>
1. External Style Sheet
2. Internal Style Sheets
3. Inline Style

1.External Style Sheets
 It is ideal when the style is applied to many pages.
 Styles are saved in a separate file, with the extension
.css
<head>
<link rel=“ style sheets”
type=“text/css”
href=“mystyle.css”/>
</head>

2.Internal Style Sheet
Define style tag inside head section
 Styles are defined within the <style> </style> tag, which is
placed in the header of the html file (i.e., within <head>
and </head>).
<head>
<style type=“text/css”>
h1 { color : red; }
p { margin-left : 20px; }
</style>
</shead>

3.Inline Style
 CSS is not attaching in the <header> but is used
directly within HTML tages.
Example
<p style="font-size: 10pt; color: red; font-weight: bold;
font-family: Arial, Helvetica, sans-serif">
This is a local style sheet declaration. </p>

CSS Properties
 Styling backgrounds
I. Background-color
II. Back ground-images
III. Background-repeat (v,h)
IV. Background-position c,r
 Text
I. Text color
II. Text alignment
III. Text decoration (underline, blink)
IV. Text transformation (lc,uc)

Font:
 font-family : A prioritized list of font family names
and/or generic family names for an element
p{ font-family:”times new roman” }
 font-size : Sets the size of a font
h1 { font-size : 40px; }
 font-style : Sets the style of the font
p.normal { font-style : normal; }
 font-weight : Sets the weight of a font.
p.normal { font-weight : bold; }

List Properties:
 list-style-image : Sets an image as the list-item marker
ex: url
 list-style-position : Places the list-item marker in the
list. ex: inside outside
 list-style-type : Sets the type of the list-item marker
ex: circle, square, decimal ,lower-roman, upper-
roman, lower-alpha, upper-alpha .

Conclusion:
 Cascading style sheets conclude it will give special
appearance and look and field good dynamic and
static web page. and ways to inserting to CSS By the
using of CSS properties, such as colors and fonts
weights.

References:
 www.studymafia.org
 www.wikipedia.com
 www.w3schools.com

Cashcading stylesheets

More Related Content

What's hot

Viewers also liked

Similar to Cashcading stylesheets

More from reddivarihareesh

Recently uploaded

Cashcading stylesheets