css(cascading stylesheet)
Post on 16-Apr-2017
102 Views
Preview:
TRANSCRIPT
CASCADING
STYLESHEET
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.
Advantages of CSS –• Consistency• Bandwidth Reduction• Browser Compatibility• Appearance• Search Engine Optimization
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.
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
SELECTOR• Selector is the first part of the stylerule.• A selector is an HTML tag at which style will be
applied.
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}
3 Ways for using Stylesheets-1) Inline Stylesheet2) Embedded/Internal Stylesheet3) External Stylesheet
a) Linking to External Stylesheetb) Importing to External Stylesheet
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>
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>
OUTPUT
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.
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}
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>
OUTPUT
Drawback of Embedded Stylesheet-
• Can not be used for more than one page styling.
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”>
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}
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>
OUTPUT
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>
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>
OUTPUT
SELECTOR TYPES1) Simple selector
a) HTML selectorb) Class selectorc) Id selectord) Universal selector
2) Contextual /Descendant selector
HTML SELECTOR• It uses the name of the HTML element
without blank.
Syntax-<style>HTML tag{Property:Value}</style}
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>
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.
ID SELECTOR• It allows the application to style to one
specific element.
Syntax-<style>#specific_id_name{Property:Value}</style>
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.
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>
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.
<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>
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>
<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>
Example<HTML><HEAD><STYLE>.SPANNING{COLOR:GREEN}</STYLE></HEAD><BODY><DIV CLASS="SPANNING"><P>This is the example of DIV
tag</DIV></BODY></HTML>
THANKYOU
top related