Introduction to CSSIntroduction to CSSBrendan KnightBrendan Knight

What is CSSWhat is CSS

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice or even in Braile

CSS can enable multiple pages to share formatting

A user may choose from various style sheets provided by the designers or even provide their own

And your favourite ……CSS can produce frameless web pages

Where is CSSWhere is CSSAuthor styles can be specified as

1. Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute

2.Embedded style, blocks of CSS information inside the HTML itself

3.External style sheets, i.e., a separate CSS file referenced from the document

Putting it InlinePutting it Inline

Style attribute applied to a HTML tagStyle attribute applied to a HTML tagThis is rendered first priorityThis is rendered first priorityegeg

<P <P STYLE="color: red; font-family: STYLE="color: red; font-family: 'New Century Schoolbook', serif"'New Century Schoolbook', serif"> > This paragraph is styled in red with This paragraph is styled in red with the New Century Schoolbook font, if the New Century Schoolbook font, if available.</P>available.</P>

Embedded styleEmbedded style

The The STYLE element is placed in the STYLE element is placed in the document HEADdocument HEAD

egeg

<STYLE TYPE="text/css" <STYLE TYPE="text/css" MEDIA=screen><!-- BODY MEDIA=screen><!-- BODY { background: url(foo.gif) red; color: { background: url(foo.gif) red; color: black } P EM { background: yellow; black } P EM { background: yellow; color: black } .note { margin-left: color: black } .note { margin-left: 5em; margin-right: 5em }--></STYLE>5em; margin-right: 5em }--></STYLE>

EmbeddedEmbedded

• Second prioritySecond priority• Used when one page has a unique Used when one page has a unique

stylestyle• Cant be used for multiple pagesCant be used for multiple pages

External Style SheetsExternal Style Sheets

Details provided on a separate sheet with Details provided on a separate sheet with NO Tags NO Tags

In the form something.css fileIn the form something.css file Linked in the Head of a HTML page using Linked in the Head of a HTML page using

the <LINK> tagthe <LINK> tag Can be referenced by multiple pages Can be referenced by multiple pages 33rdrd priority in rendering priority in rendering

Part Example External Style Part Example External Style SheetsSheets

style.style.cssbody { background-color:whitesmoke ;font-family:Verdana, cssbody { background-color:whitesmoke ;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:purple;}a:hover { font-Arial, Helvetica, sans-serif;font-size:12px;color:purple;}a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;color:purple;background-family:Verdana, Arial, Helvetica, sans-serif;color:purple;background-color: white}h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font-color: white}h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:36px}h2 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:36px}h2 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:30px}h3 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:30px}h3 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px}#leftcontent { position: size:24px}#leftcontent { position: absolute;left:10px;top:77px;width:100px;background:lavender;border:0absolute;left:10px;top:77px;width:100px;background:lavender;border:0px solid darkblue;}#centercontent px solid darkblue;}#centercontent { top:77px;background:whitesmoke;margin-left:99px;margin-{ top:77px;background:whitesmoke;margin-left:99px;margin-right:119px;border:1px solid darkblue;voice-family: "\"}\"";voice-family: right:119px;border:1px solid darkblue;voice-family: "\"}\"";voice-family: inherit;margin-left:101px;margin-right:121px;}html>body inherit;margin-left:101px;margin-right:121px;}html>body #centercontent { margin-left:101px;margin-right:121px;}#rightcontent #centercontent { margin-left:101px;margin-right:121px;}#rightcontent { position: { position: absolute;right:10px;top:77px;width:120px;background:plum;border:0px absolute;right:10px;top:77px;width:120px;background:plum;border:0px solid darkblue;}#banner { background:lavender;height:50px;border-solid darkblue;}#banner { background:lavender;height:50px;border-top:0 solid darkblue;border-right:0 solid darkblue;border-left:0 solid top:0 solid darkblue;border-right:0 solid darkblue;border-left:0 solid darkblue;voice-family: "\"}darkblue;voice-family: "\"}

etcetc

CascadingCascading

The style sheet with the highest The style sheet with the highest priority controls the content display. priority controls the content display.

Declarations not set in the highest Declarations not set in the highest priority source are passed on by a priority source are passed on by a source of lower priority.source of lower priority.

Can go all the way to a style Can go all the way to a style specified by the user.specified by the user.

This process is called This process is called cascading.cascading.

Advantages of CSSAdvantages of CSS

Flexibility.Flexibility. Separation of content from presentationSeparation of content from presentation When CSS is used effectivelya global style When CSS is used effectivelya global style

sheet can be used to affect and style elements sheet can be used to affect and style elements site-wide. site-wide.

If the situation arises that the styling of the If the situation arises that the styling of the elements should need to be changed or elements should need to be changed or adjusted, these changes can be made by adjusted, these changes can be made by editing rules in the global style sheetediting rules in the global style sheet

Bandwidth,A style sheet is usually stored in the Bandwidth,A style sheet is usually stored in the browser cache, and can therefore be used on browser cache, and can therefore be used on multiple pages without being reloadedmultiple pages without being reloaded

Where nextWhere next

http://www.w3schools.com/css/Linking Style Sheets to HTMLLinking Style Sheets to HTMLCSS Structure and RulesCSS Structure and Ruleshttp://www.maketemplate.com/csste

mplate/cssout.php