Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Lisa Bartle, Reference Librarian Cal. State University, San Bernardino

Similar presentations


Presentation on theme: "Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Lisa Bartle, Reference Librarian Cal. State University, San Bernardino"— 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 1.Introduce CSS and 23 properties 2.Benefits of CSS over straight HTML 3.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 CCS Beauty (http://www.cssbeauty.com/gallery/) CSS Drive (http://www.cssdrive.com/) CSS Website (http://www.css-website.com) CSS galleries are sites where CSS designs are displayed for admiration and imitation. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

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

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 Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Orange Purple Red Silver Teal White Yellow Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Also on your Quick Reference sheet!

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

16 Divs in HTML content content A div is a self- contained element that can hold whatever we put inside it. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Divs in HTML file match Divs in CSS file.

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

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

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

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

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

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

25 Clear: (left, right, both) #footer { background-color: black; clear: both;} The clear property disallows floating elements to the right, left, or both right and left. A companion property to float. 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-width Thin Medium Thick Border-color Blue #ff0000 rgb(250,0,255) Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

27 Borders, Examples 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; You can define the entire border or only the top, bottom, left, or right. You can define the border using one declaration. 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; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Padding-left: 1em;

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; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Margin-right: 1em;

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 H1 { color: red; } H1 { color: red; letter-spacing: 5px;} The letter-spacing property creates more white space between letters in words. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

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

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

35 Font 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;} The font property defines the family, size, style, weight, and variants of fonts. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

36 Text-Transform H3 { text-transform:capitalize;} The text-transform property allows switching between uppercase, lowercase, and capitalized words without regard for how the words are typed in HTML. 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. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease h2 {text-decoration: line-through} h2 {text-decoration: overline} h2 {text-decoration: underline}

38 You may use all the font properties for links, too, and the background property. 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%;} 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 main {background- image:url(mountainsandsky.jpg);} Background images and colors are layered. If not transparent, the last one listed is visible. The background-image property sets an image in the background of an element. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

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

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 Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease See your “Resources for CSS” handout.

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


Download ppt "Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Lisa Bartle, Reference Librarian Cal. State University, San Bernardino"

Similar presentations


Ads by Google