Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
description
Transcript of Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 1: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/1.jpg)
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Lisa Bartle, Reference Librarian
Cal. State University, San Bernardino
909-537-7552An Infopeople Workshop
![Page 2: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/2.jpg)
Introductions
•Participants–Name–Position–What you hope to do with CSS
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 3: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/3.jpg)
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
![Page 4: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/4.jpg)
CSS Zen Garden
http://www.csszengarden.com/
One content, many layouts.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 5: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/5.jpg)
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
![Page 6: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/6.jpg)
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
![Page 7: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/7.jpg)
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
![Page 8: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/8.jpg)
Thinking Inside the Box
http://weblog.dion.nu/Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 9: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/9.jpg)
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
![Page 10: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/10.jpg)
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 EaseCarriage returns and spaces are ignored.
![Page 11: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/11.jpg)
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
![Page 12: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/12.jpg)
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
![Page 13: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/13.jpg)
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
![Page 14: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/14.jpg)
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!
![Page 15: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/15.jpg)
Class Page Layout
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 16: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/16.jpg)
Divs in HTML<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>
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.
![Page 17: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/17.jpg)
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
![Page 18: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/18.jpg)
Box Properties
• Background-color
• Width
• Padding
• Margin
•Border-width
•Border-color
•Border-style
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 19: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/19.jpg)
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
![Page 20: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/20.jpg)
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
![Page 21: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/21.jpg)
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
![Page 22: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/22.jpg)
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
![Page 23: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/23.jpg)
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
![Page 24: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/24.jpg)
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
![Page 25: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/25.jpg)
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
![Page 26: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/26.jpg)
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
![Page 27: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/27.jpg)
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
![Page 28: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/28.jpg)
Margin, Border, Padding
Standard image of margins, borders, and padding.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 29: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/29.jpg)
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;
![Page 30: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/30.jpg)
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;
![Page 31: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/31.jpg)
Text Properties
•Color
•Letter-spacing
•Word-spacing
•Text-align
•Font
•Text-Transform
•Text-Decoration
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 32: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/32.jpg)
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
![Page 33: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/33.jpg)
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
![Page 34: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/34.jpg)
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
![Page 35: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/35.jpg)
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
![Page 36: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/36.jpg)
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
![Page 37: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/37.jpg)
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
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}
![Page 38: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/38.jpg)
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
![Page 39: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/39.jpg)
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
![Page 40: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/40.jpg)
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
![Page 41: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/41.jpg)
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
![Page 42: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/42.jpg)
LayeringBackground 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
![Page 43: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/43.jpg)
Image Positioning
Image positioning is accomplished using two properties:
•Background-position
•Background-attachment
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
![Page 44: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/44.jpg)
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
![Page 45: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/45.jpg)
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
![Page 46: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/46.jpg)
Cool Tools
•CSS Galleries •Color Generators
•Layout Templates
•Font Comparison
•CSS Web development tools
Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseSee your “Resources for CSS” handout.
![Page 47: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/47.jpg)
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
![Page 48: Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease](https://reader035.fdocuments.in/reader035/viewer/2022081520/56814e56550346895dbbec33/html5/thumbnails/48.jpg)
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