Cascading Style Sheet (CSS) презентация

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 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
}
selector string
property names
declarations
declaration block

Selector Strings
Type 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}
…
…
id values are case-sensitive

Sector Strings, Continue …
Class selector:
.myitalic {font-style: italic}
.myred {color: red} …
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}
…
…

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 href="mystyle.css" />
Internal style sheet
<br>hr {color: sienna} <br>p {margin-left: 20px}<br>
Inline style
This is a paragraph

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
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:
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