css(cascading stylesheet)
TRANSCRIPT
![Page 1: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/1.jpg)
CASCADING
STYLESHEET
![Page 2: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/2.jpg)
What is CSS?• Cascading Style Sheets(CSS) is a text-based
system used to specify formats.• Cascading Style Sheets(CSS) is a stylesheet
language used for describing the look and formatting of a document written in a markup language.
For example:-For instance, if a CSS stylesheet specifies that level 1 heading(<H1> tags) are to appear in green, then they will appear ingreen rather than the standard black.
![Page 3: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/3.jpg)
Advantages of CSS –• Consistency• Bandwidth Reduction• Browser Compatibility• Appearance• Search Engine Optimization
![Page 4: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/4.jpg)
STYLESHEET• Stylesheet is the collection of formatting
styles(colour, size, position and other features) which can be applied to a webpage.
• It enforces standards and uniformity throughout a website and provide numerous attributes to create dynamic efforts.
• Stylesheet consist of Stylerules.
![Page 5: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/5.jpg)
STYLESRULES• Stylerules are set of HTML text specifying the
formatting elements.• Stylerules can be applied to selected content
of the webpage.• Stylerules can be splited in two parts-i. Selectorii. Declaration
![Page 6: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/6.jpg)
SELECTOR• Selector is the first part of the stylerule.• A selector is an HTML tag at which style will be
applied.
![Page 7: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/7.jpg)
DECLARATION• Declaration is enclosed within { }.• Declaration has two sections seperated by
colon(:).• The section before colon is property and the
section after colon is value. {Property:Value}
So, the syntax of stylerule-Selector{Declaration}
![Page 8: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/8.jpg)
3 Ways for using Stylesheets-1) Inline Stylesheet2) Embedded/Internal Stylesheet3) External Stylesheet
a) Linking to External Stylesheetb) Importing to External Stylesheet
![Page 9: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/9.jpg)
INLINE STYLESHEET
• Here, the stylesheet is included within the HTML document.
• It is implemented by using style attributes with the HTML tag.
Syntax-<HTML tag Style=“Property:Value”>For example:-<H1 style=“color:red”>WELCOME<H1>
![Page 10: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/10.jpg)
Program for Inline Stylesheet-The stylerule is applied to H1 tag by specifying it in the STYLEattribute.
<HTML><BODY><H1 STYLE=“COLOR:GREEN”>This is a styleapplied to H1 element</H1><H1>This is the default display of H1element</H1></BODY></HTML>
![Page 11: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/11.jpg)
OUTPUT
![Page 12: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/12.jpg)
Drawbacks of Inline Stylesheet-
• For each element we have to implement style seperately, if we want to style in more than one element.
• We have to do the changes as many time as we want at each stages.
![Page 13: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/13.jpg)
EMBEDDED/INTERNAL STYLESHEET
• It can be grouped using style tag instead of applying it individually in the inline style.
Syntax-<style> HTML tag {Property:Value}For example:-H1,H3,P{color:red}
![Page 14: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/14.jpg)
Program for Inline Stylesheet-<HTML><HEAD><STYLE>H1{COLOR:GREEN}H1{FONT-FAMILY:ARIAL BLACK}H2{COLOR:RED}H2{FONT-FAMILY:ARIAL NARROW}</STYLE></HEAD><BODY><H1>This is the H1 element</H1><H2>This is the H2 element</H2><H3>This is the H3 element with its default style</H3></BODY></HTML>
![Page 15: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/15.jpg)
OUTPUT
![Page 16: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/16.jpg)
Drawback of Embedded Stylesheet-
• Can not be used for more than one page styling.
![Page 17: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/17.jpg)
Linking to the External Stylesheet
• There may be instances that all the pages in a website have similar settings. This can be done by putting all the stylerules in a stylesheet and then linking it with HTML document.
Syntax-<link rel=“stylesheet” type=“text/css”
href=“externalstylesheet”>
![Page 18: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/18.jpg)
Program for Linking to external Stylesheet-
First we create .css file which has the following code-
BODY {COLOR:BLUE; FACE:COMIC}H2 {COLOR:GREEN}B {COLOR:RED}
![Page 19: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/19.jpg)
The program is –
<HTML><HEAD><LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE.CSS"></HEAD><H2>This is the H2 element</H2><BODY>This is the body section<P><B>This example shows the linking to an externalstylesheet</B></P></BODY></HTML>
![Page 20: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/20.jpg)
OUTPUT
![Page 21: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/21.jpg)
IMPORTING TO AN EXTERNAL STYLESHEET• Importing a stylesheet pulls a stylerule into the
document for use.• Once imported, changes made to stylesheet
will not be reflected in the webpage into which it has been imported.
Syntax-<style>@import=“stylesheetname.css”;</style>
![Page 22: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/22.jpg)
Program for Importing to external Stylesheet-
<HTML><HEAD><STYLE>@IMPORT"STYLE.CSS";</STYLE></HEAD><H2>This is the H2 element</H2><BODY>This is the body section<P><B>This example shows the Importing to an externalstylesheet</B></P></BODY></HTML>
![Page 23: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/23.jpg)
OUTPUT
![Page 24: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/24.jpg)
SELECTOR TYPES1) Simple selector
a) HTML selectorb) Class selectorc) Id selectord) Universal selector
2) Contextual /Descendant selector
![Page 25: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/25.jpg)
HTML SELECTOR• It uses the name of the HTML element
without blank.
Syntax-<style>HTML tag{Property:Value}</style}
![Page 26: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/26.jpg)
CLASS SELECTOR• It gives the user the ability to apply styles to
specific path of a document and not neccesarily to the whole document.
Syntax-<style>.class_selector_name{Property:Value}</style>
![Page 27: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/27.jpg)
CLASS_SELECTOR_NAME• Class_selector_name can be any
valid string.• It always proceed with a dot(.)
symbol.• It can be applied to any of the
element by using class attribute.
![Page 28: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/28.jpg)
ID SELECTOR• It allows the application to style to one
specific element.
Syntax-<style>#specific_id_name{Property:Value}</style>
![Page 29: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/29.jpg)
SPECIFIC_ID_NAME• Specific_id_name can be any valid
string.• It always proceed with a hash(#)
symbol.• It can be applied to any of the
element by using id attribute.
![Page 30: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/30.jpg)
UNIVERSAL SELECTOR
• These are denoted by *.• It is use to apply the style to all the elements
in HTML document.
Syntax-<style>*{Property:Value}</style>
![Page 31: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/31.jpg)
CONTEXTUAL/DESCEDANT SELECTOR
• Selectors can also specify that the style should only apply to the elements in a certain position of the HTML document.
• It is done by listing the elements hierarchy in the selector , with only whitespace seperating the element names.
![Page 32: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/32.jpg)
<SPAN> TAG• If we want to apply special font property to
less than a whole paragraph of text, then we use <SPAN> tag.
• It is often useful to have a word or phrase in a line appear in different color or size.
Syntax-<span> ________ <span>
![Page 33: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/33.jpg)
Example<HTML><HEAD><STYLE>.SPANNED{SIZE:40;
FACE:ARIAL NARROW; COLOR:RED}
</STYLE></HEAD><BODY>This is the example of <SPAN
CLASS="SPANNED"> SPAN</SPAN> tag
</HTML>
![Page 34: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/34.jpg)
<DIV> TAG• It is more convenient to apply a section of
document rather than each paragraphevery time. It is done by <DIV> tag.
• It’s primary use is to specify presentation details for a section or a division of a document.
Syntax-<div>______</div>
![Page 35: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/35.jpg)
Example<HTML><HEAD><STYLE>.SPANNING{COLOR:GREEN}</STYLE></HEAD><BODY><DIV CLASS="SPANNING"><P>This is the example of DIV
tag</DIV></BODY></HTML>
![Page 36: CSS(Cascading Stylesheet)](https://reader036.vdocuments.net/reader036/viewer/2022070302/58f351f91a28abb8218b458f/html5/thumbnails/36.jpg)
THANKYOU