Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External style sheets can save a lot of work External style sheets are stored in CSS files Multiple style definitions will cascade into one Example: my homepage Another example: http://www.w3schools.com/css/demo_default.htm (.html)
Multiple Ways to Define Style External Style Sheet (.css files) Internal Style Sheet Inline Styles Examples: http://www.w3schools.com/html/html_styles.asp More: default style, CSS changed by JavaScript
Multiple Styles Cascade Into One What style will be used when there is more than one style? Browser default External style sheets are included Embedded styles (inside the <head> tag) override external styles Inline styles (inside an HTML element) override both embedded and external styles Styles modified with JavaScript override all other styles
CSS Style Rule p { font-size: x-large ; background-color: yellow } property names declarations selector string declaration block
Selector Strings Type selector: ID selector: Element type, such as body, p, hr, etc. See previous example Multiple element types using the same style are separated by comma h1, h2, h3, h4, h5, h6 {background-color:purple} ID selector: #p1, #s1 {background-color: blue} <p id=“p1”> … </p> <span id=“s1”>…</span> id values are case-sensitive
Sector Strings, Continue … Class selector: .myitalic {font-style: italic} .myred {color: red} <span class=“myitalic myred”> … </span> class values are case sensitive multiple classes can be applied, separated by space All but a few elements, such as html, head, and elements that appear as content of head, have the class attribute ID and class selectors can be prefixed by an element type name p.right {text-align: right} p#left {text-align: left} <p class=“right”> … </p> <p id=“left”> … </p>
Selector Strings, Continue … A selector within the content of certain element types ul span {color: green}: applies to a span element within a ul element ul ol li {letter-spacing: 1em}: applies to an li element within an ol element that is within a ul element CSS comments /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
How to Insert a Style Sheet? External style sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Internal style sheet <style type="text/css"> hr {color: sienna} p {margin-left: 20px} </style> Inline style <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
CSS Basics Background Text Font Border Outline Margin Padding List Table
CSS Advanced CSS dimension CSS classification CSS positioning CSS pseudo-class CSS pseudo-element CSS media types
Font Generic font families defined in HTML and CSS are: Serif Sans-serif Monospace Cursive Fantasy There are a lot other font families, but might not be well supported
How to Select a Font Family? Rules-of-Thumb Don’t use more than 3-4 fonts on any one page Don’t change the font in mid sentence unless you have a very good reason Sans-serif for online, serif for print Monospace for typewriter and code Script and fantasy for accents Sans-serif fonts are the basis of your site, for example: Arial, geneva, helvetica, lucida sans, trebuchet, verdana Verdana is a font family that was actually invented for use on the web
Selecting Font, Continue Use serif fonts for print If you have print friendly versions of your site, use serif fonts Examples: garamond, georgia, new york, times, times new roman Monospace for bode examples Use it to provide instructions, give examples, or imply typewritten text Examples: courier, courier new, lucida console, monaco Example: http://www.csupomona.edu/~ftang/www/courses/CS299-S09/examples/font.html
More Case Studies of CSS from CSS Tutorials @ http://webdesign.about.com/od/css/Cascading_Style_Sheets.htm
Case Study Understanding CSS “float” http://webdesign.about.com/od/advancedcss/a/aa010107.htm
Case Study Tableless layouts http://webdesign.about.com/od/css/a/aa102102a.htm There are many potential problems about using table for layout http://webdesign.about.com/od/layout/a/aa111102a.htm Frames can also be substituted by CSS http://webdesign.about.com/od/css/a/aa110402a.htm
Case Study Fixed width layouts vs. Liquid layouts Fixed width layouts: http://webdesign.about.com/od/layout/i/aa060506.htm Fixed width layouts: The width of the entire page is set with a specific numerical value Liquid layouts: The width of the entire page is flexible depending upon how wide the viewer’s browser is
Case Study How to build a 3-column layout: Steps: Draw your layout http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs.htm Steps: Draw your layout Create and style a Container element Use a Headline Tag for the Header To get 3 columns, start by building 2 columns Then add 2 columns inside the wide second column Add in the Footer Add in your personal style and content
Free Web Templates http://www.csszengarden.com http://webdesign.about.com/od/websitetemplates/a/bl_layouts.htm http://www.csszengarden.com