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
Top Related