Cascading Style Sheet (CSS)
CS 2001 Internet Technologies
Part - B
Samantha Mathara Arachchi
E-mail:ssp@ucsc.cmb.ac.lk
1
SSP
Cascading Style Sheet (CSS)
Recommended by W3C The Characteristics of CSS
The layout of the page can be flexibly
It can specify the font name and size precisely It can specify margin and indent It can specify the position of the text and image
The page and web layout can be managed collectively
The changes can be done easily
To validate your style sheet
http://jigsaw.w3.org/csshttp://jigsaw.w3.org/css -validator/validator validator/validator-uri.html
Implementation of CSS
Methods of Implementation
Following are the 4 methods of implementing the css.
Inline Style sheet (Specify style directly by using the style attributes) Embedded style sheet (Define style in advance to STYLE element, then apply Linking style sheet (By using LINK elements link the external file where style has been defined Import style sheet (By using STYLE element, specify the external file (define style) to be imported
Case by case example
When you want to specify style only at this position Specify style directly with [Inline style sheet]
When you want to specify the common style only on this page Define and apply style with [Embedded style sheet]
When you want to specify the common style on all the pages
Define and apply style in external file [Linking/Import]
Inline Style Sheet
Specify style directly by using STYLE attributes toward each element.
<BODY> <Tag STYLE=property:value> - </Tag> </BODY> <BODY> <H1 STYLE=color: red>Red heading 1 </H1> <P STYLLE=color: blue; FONT-size:20px> Blue Paragraph</P> Separator </BODY> Use for each element within the BODY At STYLE attribute, attribute, specify the style to use Multiple styles can be defined, separated with semisemi-colon. colon. The are where the style is applied is different depending on the element
Embedded Style Sheet
Define the style within the HEAD, then apply the style in the BODY, style is defined with the form of [Rule]
<HEAD> <STYLE TYPE=TEXT/CSS> Selector {Property:value} </STYLE> <HEAD> <HEAD> <STYLE TYPE=TEXT/CSS> H1{color:red; font-size:20px} </STYLE> </HEAD> <BODY> <H1>Heading</H1> </BODY>
6
Selector: Tie up the HTML element and style defined by definition part Property: Specify the property toward the specified element in selector Value: Specify the applied value to the style
Definition
Applied
Linking Style Sheet
Link the style and the external file which defines the style within the HEAD.
File Extension is .CSS
<HEAD> <LINK REL=stylesheet TYPE=text/css HREF=url> </HEAD> <HEAD> <TITLE>title</TITLE> <LINK REL=stylesheet TYPE=text/css HREF=style.css> </HEAD> <BODY> <H1>Heading</H1> </BODY>
7
Style file defining style
Linking Style Sheet
In REL attribute, specify the relationship with the file linked. In TYPE attribute, specify the MIME type of style file In HREF attribute, specify the style file location and name. (file extension is .css) Both absolute path and relative path can be specified for the style file name Define only the [rules] in style file Applied in BODY part
Import Style Sheet
Import the external file where the style has been defined in HEAD part.
<HEAD> <STYLE TYPE=TEXT/CSS> @import url (file name or URL); </STYLE> </HEAD>
The Priority among 4 Implementation Methods
When multiple styles are specified in the document, the following priority order shall be applied.
Style sheet by external files (Linking/Import) Embedded Style sheet Inline Style sheet
Define the general style of the Web by [Style sheet by external files] Define the style of whole page by [Embedded style sheet] Define individual style by [Inline style sheet]
10
The Selector
If a element is used in selector, then all style are applied in that element. Styles can be specified in details using the following 5 methods.
Element Selector
Always specify common style toward the element
Class Selector
Create and define optional name to the specify style, then apply it.
ID Selector
Create and define the optional name towards the specify style, and apply it at one place in a document
Group Selector
Apply the common style to multiple elements
Context Selector
Apply style only specified part where multiple elements are all specified.
11
1. Element Selector
The common style can be applied to an element at all time In Selector, specify the element name to apply the style
<HEAD> <STYLE TYPE=text/css> Element {Property:Value}
<HEAD> <STYLE TYPE=text/css> H1{color:red} H2{color:blue} </STYLE> </HEAD> <BODY> <H1>Heading 1</H1> <H2>Item 1</H2> <H1>Heading 2</H1> <H2>Item 2</H2> </BODY>
</HEAD>
</STYLE>
Definition
Applied
12
1. Class Selector
In TYPE attribute, specify the MIME type of the style definition part. Class name starts with a period (.) In Selector, specify the name created for the define style When applying the CLASS, remove the period (.)
<HEAD> <STYLE TYPE=text/css> .Class name {Property:Value}
<HEAD>
<STYLE TYPE=text/css> </HEAD> .red{color:#FF0000} Define .blue{color:#0000FF} </STYLE> </HEAD> <BODY> <H1 CLASS=red>Heading 1</H1> Applied <H2 CLASS=blue> >Item 1</H2> <H1>Heading 2</H1> < P CLASS=red> Paragraph </P> </BODY>
</STYLE>
Do not Apply Applied
13
1. ID Selector
Define and name a specific style, and apply it by specifying the name. However it cannot be called twice but some browsers can use it like the class selector for more than twice (using function)
<HEAD> <STYLE TYPE=text/css> #ID {Property:Value} </STYLE>
<HEAD>
<STYLE TYPE=text/css> Define #id123{color:red} </STYLE> When ID is specified, the sharp </HEAD> will be removed <BODY> Applied <H1 ID=id123>Heading 1</H1> <P>Content 1</P> </BODY>
14
</HEAD>
1. Grouped Selector
By grouping multiple elements, separated with comma (,) (,), , common style can be applied.
<HEAD> <STYLE TYPE=text/css> Element 1, Element 2,. {Property:Value} </STYLE> </HEAD>
<HEAD> <STYLE TYPE=text/css> H1,H2,H3 {font:24px; color:blue} </STYLE> </HEAD> <BODY> <H1>Heading 1</H1> <H2>Heading 1</H2> <H3>Heading 1</H3> </BODY> Define
Applied
15
1. Context Selector
A specific style can be applied only when multiple elements are specified simultaneously. In Selector, list the elements separated with blank
<HEAD> <STYLE TYPE=text/css> Element 1 Element 2 . {Property:Value} </STYLE> </HEAD>
<HEAD> <STYLE TYPE=text/css> H1 I {color: red} </STYLE> </HEAD> <BODY> <H1>Heading 1 <I> 1</I> </H1> </BODY> Define
Applied
16
SPAN Element and DIV Element
When the style sheet is applied only to the part of the document, it is convenient to use the following elements.
SPAN element specifies the range of inline level. DIV element does the range of block level
Inside DIV element can be applied SPAN element
Inline
<SPAN STYLE =color:red> Inline level is red </SPAN> <SPAN CLASS =red> Inline level is red </SPAN> Block
<DIV STYLE =color:blue> Block level is blue </DIV> <DIV CLASS =blue> Block level is blue </DIV>
<H1 style=color:red> Hello I am Samantha </H1> <H1 style=color:red> Hello I am <SPAN style=color:blue>Samantha</SPAN></H1> <H1 style=color:red> Hello I am <DIV style= color:blue>Samantha</DIV></H1>
17
References
http://www.w3schools.com/css/css_examp les.asp
18
Adding Multimedia Features to WWW
How to embed a Music file
<HTML> <HEAD> <TITLE>EMBEDED</TITLE> </HEAD> <BODY> <EMBED SRC="MUSIC.MID" WIDTH="144" HEIGHT="60" PLAY="TRUE" LOOP="TRUE" QUALITY="HIGH"> </BODY> </HTML>
19
Adding Multimedia Features to WWW
How to embed a Movie file
<HTML> <HEAD> <TITLE>EMBEDED</TITLE> </HEAD> <BODY> <EMBED SRC="SRILANKA.AVI" WIDTH="300" HEIGHT="350" PLAY="TRUE" LOOP="TRUE" QUALITY="HIGH"> </BODY> </HTML>
20
