Embed Size (px)
Citation preview
Cascading Style Sheets (CSS)
a style language that defines layout & appearance of HTML documents
CSS covers fonts, colours, margins, lines, height, width, background images and positioning
HTML is used to structure content CSS is used for formatting structured
content
What is CSS?
Consider this screenshot…
Why is CSS better?
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="95%"> <TR> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Name</FONT></TD> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Description</FONT></TD> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Part No</FONT></TD> </TR> <TR>
<TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">250A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Empty box</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932202</FONT></TD> </TR> <TR>
<TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">251A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">5 way backmount frame,
earth post and 4 x jumper rings</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932302</FONT></TD> </TR> <TR> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">250/7A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">7 way backmount frame
& earth post</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932206</FONT></TD> </TR>
</TABLE>
Here is the source code…
How much actual content?
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="95%"> <TR> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Name</FONT></TD> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Description</FONT></TD> <TD ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Part No</FONT></TD> </TR> <TR>
<TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">250A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">Empty box</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932202</FONT></TD> </TR> <TR>
<TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">251A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">5 way backmount frame,
earth post and 4 x jumper rings</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932302</FONT></TD> </TR> <TR> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">250/7A</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">7 way backmount frame
& earth post</FONT></TD> <TD VALIGN="top" ALIGN="center"><FONT SIZE="2" FACE="Verdana, Arial, Helvetica">9BC1932206</FONT></TD> </TR>
</TABLE>
Here is the source code…
Not a lot…
control layout of many documents from one single style sheet
more precise control of layout apply different layout to different media-
types (screen, print, etc)
Basically just a change of style sheethttp://plasfarmcaravanpark.co.uk/http://townandcountry-carpets.co.uk/
Benefits of CSS
Accessibility◦ Screen readers see content only◦ Allows use of user style sheets for
e.g. increasing font size
File Sizes are smaller
Downloaded once into the browser
Benefits of CSS
Inconsistent browser support
Larger initial time commitment
Not perfect & can be buggy but improving
Drawbacks of CSS
Using HTML to set a background colour<body bgcolor="#FF0000">
With CSS the same result can be achieved like this:
body {background-color: #FF0000;}
How to use CSS
body {background-color: #FF0000;}
Structure of CSS
When setting multiple properties, put them all inside one set of {} with a semi-colon at the end of each
body{ background: url("bg.gif"); background-color: #ffffff; background-repeat: repeat-x;
}
CSS Shorthand
You can even combine properties like this
body { background: url("bg.gif") #fff repeat-x;
}
BUT it makes the CSS harder to understand!
CSS Shorthand
Three possible methods
Inline styles◦ Style info embedded in HTML code
Internal style sheets◦ Style sheet held in <head> section of html page
External style sheets◦ CSS held in separate file with css extension
How to apply CSS
BEST!!
<html><head><style>
</style></head><body><p style="background: blue; color: white;">A new background and font color
with inline CSS</p>
<p style="background: url("http://www.tizag.com/cssT/yellow_rock.gif");">This is broken</p>
<p style="background: url(http://www.tizag.com/cssT/yellow_rock.gif);">This is working'</p></body></html>
In-line CSS
Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override styles that are defined in external or internal by using inline CSS
BUT
Results are little different to previous HTML formatting tags approach!
Use only when strictly necessary!
In-line CSS
Internal Style Sheets
Use when 1 page has a different style to others
An external style sheet is simply a text file with the extension .css
External (link to a style sheet)
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css"
href="screen.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html>
index.htm
body { background-color: #FF0000; }
You can continue to add to this page by increasing the styles
screen.css
![lamongankab.go.id fileHome Fonts Themes g:] Effects Themes A 38 Insert Margins Page Layout Formulas Data Review 2017 - JUL- SEPT Microsoft Excel Selection Align Pane](https://img.pdfslide.net/doc/110x75/5caf639f88c993575c8bea33/fonts-themes-g-effects-themes-a-38-insert-margins-page-layout-formulas-data-review.jpg)
