Cascading Style Sheet (CSS)
31,536 views
15 slides
Jun 08, 2015
Slide 1 of 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
About This Presentation
Presentation gives a brief description about CSS and its types with examples of each.
Slide Content
Cascading Style Sheet (CSS)
OUTLINES What is CSS? Syntax Comments Example Types of CSS External style sheet Internal style sheet Inline style sheet
W HAT IS C SS ? CSS stands for C ascading S tyle S heets Markup language used in the web document for presentation purpose. Various elements like text, font and color are used in CSS for presentation. Can be used to bring styles in the web documents. By combining with HTML document, flexibility of content is achieved.
S YNTAX A CSS rule has two main parts: a Selector and one or more Declarations: The selector is the HTML element you want to style. Each declaration consists of a property and a value. The property is the style for the attribute you want to change. Each property has a value.
C OMMENTS A CSS comment begins with " /* ", and ends with " */ ", like this: /*This is a comment*/ Eg : p { text-align: center; /*This text is center align*/ color: black; font-family: arial ; }
E XAMPLE CSS declarations always end with a semicolon, and declaration groups are surrounded by curly brackets: p {color: red; text-align: center;} To make the CSS more readable, you can put one declaration on each line, like this: p { color: red; text-align: center; }
<html> <head> <style type=“text/ css ”> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS</p> </body> </html>
T YPES OF CSS There are 3 types of cascading style sheet: External style sheet. Internal style sheet. Inline style.
E XTERNAL S TYLE S HEET Ideal when applied to Many Pages. <head> <link rel =“ stylesheet ” type=“text/ css ” href ="mystyle.css"/> </head> An external style sheet can be written in any text editor. Your style sheet should be saved with a . css extension. Eg : hr {color: sienna;} p {margin-left:20px;} body {background-image: url ("images/back40.gif");}
I NTERNAL S TYLE S HEET It should be used when a Single Document has a unique style. You can define internal styles in the head section of an HTML page, by using the <style> tag, like this: Eg : <head> <style type="text/ css "> hr {color: sienna;} p {margin-left:20px;} body {background-image: url ("images/back40.gif");} </style> </head>
I NLINE S TYLE S HEET An inline style loses many of the advantages of a style sheet. To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. E.g. <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
T HANK Y OU
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 31,536
- Slides 15
- Favorites 23
- Age 3830 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
29 views