1 / 12

Cascading Style Sheets

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

john-chaney
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets CSS

  2. 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 It can be applied to HTML, XML, XHTML and some other languages It may be linked separately or embedded in the <HEAD> section of your HTML

  3. 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.

  4. So CSS format looks like this:

  5. 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}

  6. 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% }

  7. 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%}

  8. 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

  9. 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}

  10. 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">

  11. 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

  12. 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}

More Related