View
47
Download
4
Category
Preview:
DESCRIPTION
Cascading Style Sheets. CSS. What is CSS?. CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all associated web pages) Like HTML, it is a language It is primarily used for layouts, colors, and fonts - PowerPoint PPT Presentation
Citation preview
CSS
Cascading Style Sheets
What is CSS?
CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all associated web pages)
Like HTML, it is a languageIt is primarily used for layouts, colors, and
fontsIt can be applied to HTML, XML, XHTML and
some other languagesIt may be linked separately or embedded in
the <HEAD> section of your HTML
Why use CSS?
With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site.
Style sheets also offer much more flexibility in terms of the presentation effects that they provide.
A style sheet is made up of style rules that tell a browser how to present a document.
CSS is validated in HTML 4, and some elements are valid in HTML 3.2.
Browsers that don’t support CSS will ignore it.
So CSS format looks like this:
Grouping selectors is CSS
In order to decrease repetitious statements within style sheets, grouping of selectors is allowed.
For example, all of the headings in a document could be given identical declarations through the use of combined selectors:
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } h1,h2,p
{color:green;}
A:link, A:visited, A:active {text-decoration: blink}
Examples of CSS Selectors & Properties
Body background image & color BODY { background: url(foo.gif) red; color: black }
Large drop cap first letter P:first-letter { font-size: 300%; float: left }
Link: A:link { color: red }
Active link: A:active { color: blue; font-size: 125% }
Visited link: A:visited { color: green; font-size: 85% }
Font Properties & Values
Family-name (Ariel, Times New Roman, Helvetica)
Generic-family (serif, sans serif, fantasy, monospace) P { font-family: "New Century Schoolbook", serif }
Style (normal, italics, oblique) H1 { font-style: oblique}
Weight (bolder, lighter, 100, 300, 600, 800, etc.) H1 { font-weight: 800 }
Size (xx-small, large, x-large, larger, 12pt, 80%) LI { font-size: 90%}
BG and Color Properties & Values
Color (specifies color of element) H2 { color: #000080 }
Background-color (specifies color of background) BODY { background-color: white }
Background-image (assigns an image to background) BODY { background-image: url(/images/foo.gif)}
Background-repeat (repeat-x, repeat-y, no-repeat) BODY { background: white url(candybar.gif);
background-repeat: repeat-x } Repeats image horizontally
Text Properties & Values
Text-decoration (underline, overline, line-through, blink) A:link, A:visited, A:active {text-decoration: none}
Vertical-align (sub, super, top, middle, bottom, 50%) IMG.middle { vertical-align: middle}
Text-align (center, justify, left, right) H1 { text-align: center}
Text-indent (any number) P { text-indent: 5em}
How to place your style sheet
Style sheets are linked to from your HTML page
Sheets should be saved as “style.css”The link indicates the HREF and type of file.In your document’s <HEAD> section, insert
the CSS link:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
Single or Multiple line CSS
Some CSS is written using multiple lines:h1 {
float: left; width: 155px; height: 50px; }
How you write your CSS is entirely up to you, but multi-line CSS makes scanning for selectors, properties, and values much easier
It's good practice to place a semicolon after every declaration, including the last one so you can easily add properties
Here’s some fun CSS
Custom cursor { cursor: url(mycursor.cur) } Replace “mycursor.cur” with your file name (must be .cur or .ani
file) Downloadable .ani here: http://www.draac.com/cursors/index.html
Dotted underline A:hover { COLOR: #518293; border-bottom:1px dotted #FFFFFF;}
Change the browser’s scrollbar {scrollbar-face-color: #000000; scrollbar-shadow-color:
#BED8BF; scrollbar-highlight-color: #BED8BF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000; scrollbar-arrow-color: #BED8BF}
Recommended