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

[email protected]

909-537-7552An Infopeople Workshop

Introductions

•Participants–Name–Position–What you hope to do with CSS


Goals for This Class

1. Introduce CSS and 23 properties

2. Benefits of CSS over straight HTML

3. Introduce free CSS tools


CSS Zen Garden

http://www.csszengarden.com/

One content, many layouts.


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.


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.


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


Thinking Inside the Box

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

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.


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.

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.


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; }


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. */


Standard 17 CSS Colors

• Aqua• Black• Blue• Fuchsia• Gray• Green• Lime• Maroon

• Navy• Olive• Orange• Purple• Red• Silver• Teal• White• Yellow


Also on your Quick Reference sheet!

Class Page Layout


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.


Divs in HTML file match Divs in CSS file.

Divs in CSS

#container { property: value; }

#title { property: value; }

#menu { property: value; }

#main { property: value; }

#news { property: value; }

#footer { property: value; }


Box Properties

• Background-color

• Width

• Padding

• Margin

•Border-width

•Border-color

•Border-style


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.


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.


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.


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.


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.


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.


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.


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)


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.


Margin, Border, Padding

Standard image of margins, borders, and padding.


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;

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;

Text Properties

•Color

•Letter-spacing

•Word-spacing

•Text-align

•Font

•Text-Transform

•Text-Decoration


Letter-Spacing

H1 { color: red; }

H1 { color: red; letter-spacing: 5px;}

The letter-spacing property creates more white space between letters in words.


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.


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.


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.


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.



Text-Decoration

The text-decoration property allows the text to be underlined, overlined, or line-throughed.


h2 {text-decoration: line-through}

h2 {text-decoration: overline}

h2 {text-decoration: underline}

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


Including Images

Properties for working with images include:

•Background-image

•Background-repeat

•Background-position

•Background-attachment


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.


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


repeat

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; */


Image Positioning

Image positioning is accomplished using two properties:

•Background-position

•Background-attachment


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;


Background-Attachment

The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll.

Background-attachment: fixed;


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.

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


Evaluation Time

Please go to

infopeople.org/wseval.html

and complete the evaluation.

Thank you!


Date post:	19-Jan-2016
Category:	Documents
Upload:	drake
View:	30 times
Download:	6 times

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

Documents