1 / 48

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease. Lisa Bartle, Reference Librarian Cal. State University, San Bernardino LBartle@csusb.edu 909-537-7552 An Infopeople Workshop. Introductions. Participants Name Position What you hope to do with CSS.

drake
Download Presentation

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

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): Pixel-Level Control with HTML Ease Lisa Bartle, Reference Librarian Cal. State University, San Bernardino LBartle@csusb.edu 909-537-7552 An Infopeople Workshop

  2. Introductions • Participants • Name • Position • What you hope to do with CSS Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  3. Goals for This Class • Introduce CSS and 23 properties • Benefits of CSS over straight HTML • Introduce free CSS tools Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  4. CSS Zen Garden http://www.csszengarden.com/ One content, many layouts. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  5. What is CSS? • A text file used with an HTML file that defines rules for how the HTML will look • A kind of style sheet • A list of rules telling the HTML how to display • One of at least two style sheets that defines the presentation of the HTML content. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  6. HTML Alone vs CSS • HTML and CSS are not competitors so much as allies. • HTML for style is becoming defunct. • HTML is for content. • CSS is for style. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  7. CSS Benefits • Easy to learn • Better control of presentation to user • Easy updating of multiple pages • Increase in pages’ loading speeds • Better accessibility for disabled users Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  8. Thinking Inside the Box http://weblog.dion.nu/ Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  9. CSS Galleries CSS galleries are sites where CSS designs are displayed for admiration and imitation. • CCS Beauty (http://www.cssbeauty.com/gallery/) • CSS Drive (http://www.cssdrive.com/) • CSS Website (http://www.css-website.com) Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  10. CSS Rule Structure A CSS rule is made up of a selector and a declaration. selector { property: value; } A declaration is made up of a property and a value. Carriage returns and spaces are ignored. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  11. A Sample of Selectors Body{ property: value; } H1 { property: value; } H2 { property: value; } P { property: value; } A selector, here in red, is often an element of HTML. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  12. A Sample of Properties and Values Body { background: purple; } H1 { color: green ; } H2 { font-size: large; } P { color: #FF0000; }/*hexadecimal for red*/ P { font-family: Arial; } Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  13. Comments in CSS • Explain the purpose of the coding • Help others read the code • Help you when you’ve forgotten what it all means • Starts with /* and ends with */ /* Purple and yellow make a good look. */ /* Change header size. */ Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  14. Standard 17 CSS Colors • Navy • Olive • Orange • Purple • Red • Silver • Teal • White • Yellow • Aqua • Black • Blue • Fuchsia • Gray • Green • Lime • Maroon Also on your Quick Reference sheet! Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  15. Class Page Layout Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  16. Divs in HTML A div is a self-contained element that can hold whatever we put inside it. <div id="container">content <div id="title">content</div> <div id="main">content <div id="news">content</div> </div> <div id="menu">content</div> <div id="footer">content</div></div> Divs in HTML file match Divs in CSS file. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  17. Divs in CSS #container { property: value; } #title { property: value; } #menu { property: value; } #main { property: value; } #news { property: value; } #footer { property: value; } Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  18. Box Properties • Background-color • Width • Padding • Margin • Border-width • Border-color • Border-style Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  19. Background-Color The background-color property defines the color of an element’s background. #container { background-color: blue; } #title { background-color: white; } #menu { background-color: red; } #main { background-color: green; } #news { background-color: purple; } #footer { background-color: black; } Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  20. Relative Positioning Relative positioning is scaleable, so is preferred for Web presentation. Percent {width:25%;} or {height:25%;} Pixels {width:100px;} or {height:500px;} Em {width: .5em;} or {height: 3em;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  21. Grouping, Part 1 Group the same selector with different declarations together on one line. H1 {color: black;} H1 {font-weight: bold;} H1 {background: white;} H1 {color: black; font-weight: bold; background: white;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  22. Grouping, Part 2 Group different selectors with the same declarations on one line. H1 {color: yellow;} H2 {color: yellow;} H3 {color: yellow;} H1, H2, H3 {color: yellow;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  23. Width Width defines the width of an element. #container { background-color: blue; width:90%; } #menu { background-color: red; width: 15%; } #main { background-color: green; width: 85%; } #news { background-color: purple; width: 12%; } Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  24. Float: (left, right) Float makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating permits word wrapping. #menu { background-color: red; width: 15%; float: left;} #news { background-color: purple; width: 10%; float: right;} #main { background-color: green; width: 85%; float: right;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  25. Clear: (left, right, both) The clear property disallows floating elements to the right, left, or both right and left. A companion property to float. #footer { background-color: black; clear: both;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  26. Border Properties • Border-style • None • Solid • Double • Dotted • Dashed • Groove • Ridge • Inset • Outset • Border-color • Blue • #ff0000 • rgb(250,0,255) • Border-width • Thin • Medium • Thick Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  27. Borders, Examples You can define the entire border or only the top, bottom, left, or right. You can define the border using one declaration. Border-width: medium; Border-style: outset; Border-color: lime; Border-bottom-color: teal; Border-right-width: thin; Border-top-style: dashed; Border: thick outset silver; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  28. Margin, Border, Padding Standard image of margins, borders, and padding. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  29. Padding Padding is the space between the text/content and the border. You can use padding for all around the element or padding-right, padding-left, padding-top, and padding-bottom. Padding: 1em; Padding-left: 1em; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  30. Margin Margin is the space around an element. You can use margin for all around the element or you may use margin-left, margin-right, margin-top, and margin-bottom. Margin: 1em; Margin-right: 1em; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  31. Text Properties • Color • Letter-spacing • Word-spacing • Text-align • Font • Text-Transform • Text-Decoration Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  32. Letter-Spacing The letter-spacing property creates more white space between letters in words. H1 { color: red; } H1 { color: red; letter-spacing: 5px;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  33. Word-Spacing The word-spacing property creates more white space between words. H1 { color: #FF0000; letter-spacing: 5px;} H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  34. Text-Align The text-align property can center, justify, or align text to the right or left. H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px;} H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px; text-align: center;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  35. Font The font property defines the family, size, style, weight, and variants of fonts. Font-family: (“Times New Roman,” Courier, Arial, Helvetica, serif, sans-serif, fantasy, cursive, monospace) Font-size: (percentage, small medium, large, x-small, xx-small, x-large, xx-large) Font-style: (normal, italic) Font-weight: (normal, bold) {Font: italic bold serif;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  36. Text-Transform The text-transform property allows switching between uppercase, lowercase, and capitalized words without regard for how the words are typed in HTML. H3 { text-transform:capitalize;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  37. Text-Decoration The text-decoration property allows the text to be underlined, overlined, or line-throughed. h2 {text-decoration: line-through} h2 {text-decoration: underline} h2 {text-decoration: overline} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  38. Links The links property defines how inactive, hovered, active, and visited links appear to the user. a:link {color: silver;} a:visited {color: yellow;} a:active {color: green;} a:hover {color: orange; background: black; font-weight: bold; font-size: 150%;} You may use all the font properties for links, too, and the background property. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  39. Including Images • Properties for working with images include: • Background-image • Background-repeat • Background-position • Background-attachment Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  40. Background-Image The background-image property sets an image in the background of an element. main {background-image:url(mountainsandsky.jpg);} • Background images and colors are layered. • If not transparent, the last one listed is visible. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  41. Background-Repeat The background-repeat property sets an image in the background of an element and tiles, or repeats, it. Tiling is the default. main {background-image:url(fairytransparent.gif); background-repeat:no-repeat;} repeat • Possible Values • Repeat • Repeat-x (horizontal) • Repeat-y (vertical) • No-repeat no-repeat Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  42. Layering Background colors and images are layered like sheets of paper one on top of the other. Remove background colors and you will see your image. #container { width:90%;} /*background-color: blue; */ #title { Padding: 1em;} /*background-color: white; */ #menu { width: 15%; float: left; Padding: 1em; } /*background-color: red; */ Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  43. Image Positioning • Image positioning is accomplished using two properties: • Background-position • Background-attachment Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  44. Background-Position The background-position property positions the image using either combined keywords top, bottom, left, right, and center; length values; or percentage values. Background-position: right top; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  45. Background-Attachment The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll. Background-attachment: fixed; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  46. Cool Tools • CSS Galleries • Color Generators • Layout Templates • Font Comparison • CSS Web development tools See your “Resources for CSS” handout. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  47. Best Sites to Learn More • www.w3schools.com/css/ • www.glish.com/css/ • www.html.net/tutorials/css/ • www.w3schools.com/css/css_reference.asp Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

  48. Evaluation Time Please go to infopeople.org/wseval.html and complete the evaluation. Thank you! Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

More Related