Css Slides

7/29/2019 Css Slides

1/15

eXtensible

HyperText

MarkupLanguage:

CSS

INFO202

Lynda Hodgson

Summer 2010


2/15

Lets do it with Style Cascading Style Sheets are used to vary

color, font, size and other properties of

elements in your page(s)

CSS eliminates redundant coding Define the rules only once

CSS helps you keep all pages in your site

consistent Use the same rules on every page

Note to those with html experience: elements for bold, italics,

frames and other presentation stuff have been deprecated in favor

of CSS. They work, but should be avoided.


3/15

Anatomy of a Rule

H1{ font-family:Arial Black, font-style:italic, color:#FF0000}

Selector: element tag or part of the page to which the rule is applied

Properties: the aspect of the element being set

Property values: the real specifics of the aspect

enclosed in brackets

separated by commas

have values

Specified after the colon

Terms with spaces are enclose in quotes


4/15

So where do I put the rules?

Lets start with External Style Sheets

You can build one that works for ALL of your

companys pages!

Open a new Notepad file

Enter all the rules you need (yes, you can

have many of them in one Style Sheet)

Save as a .css file Add the extension to the filename

Remember to select all files!


5/15

Here is an example

Separate the rules for the same selector with a semicolon

Pepper liberally with comments to help you figure out what you weretrying to do later!

Color names

Safe fonts
http://www.w3schools.com/css/css_colornames.asphttp://en.wikipedia.org/wiki/Font_family_(HTML)http://en.wikipedia.org/wiki/Font_family_(HTML)http://www.w3schools.com/css/css_colornames.asp


6/15

Link the structure with the presentation

No comments about my artistic

design capabilities, please! If you

can do better, SHOW ME!

Name of your style sheet


7/15

Other Properties you should know

font-size

align

decorate text(underline, line through, overline)

indent boldness

style (italics)

All font properties at once Background image

For a complete list, refer to the W3C
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-sizehttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-alignhttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-decorationhttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-indenthttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-weighthttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-stylehttp://www.w3schools.com/css/pr_font_font.asphttp://www.w3schools.com/css/tryit.asp?filename=trycss_background-imagehttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/css/tryit.asp?filename=trycss_background-imagehttp://www.w3schools.com/css/pr_font_font.asphttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-stylehttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-weighthttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-indenthttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-decorationhttp://www.w3schools.com/css/tryit.asp?filename=trycss_text-alignhttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-sizehttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-sizehttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-size


8/15

Lets add an Internal/Embedded

Style

External CSS file

specify styles that are inheritedby all pages that use it

Internal/Embedded Styles

Are coded in the of the page

Apply onlyto the page that contains the embedded style

Will override any style property specified in an external

file

Should be limited onlyto page-specific formatting!

If multiple pages will use it, put it in an external CSS to eliminate

redundant code


9/15

How do I set it up?

Set up the

style tags Add the rule(s)
http://www.htmlhelp.com/reference/css/quick-tutorial.htmlhttp://www.htmlhelp.com/reference/css/quick-tutorial.html


10/15

Fancier stuff

Using style classes

When you have one type of tag but want to

use multiple different styles.

Can be used with external or embedded

styles
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weighthttp://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight


11/15

Inline Styles

USE SPARINGLY IF AT ALL

For occasional short text that is unique in

the overall web site and unlikely to be

used elsewhere

Specify the style right in the tag!

This is a short text
Style is an attribute of the tag
Rules are used like attribute values


12/15

What about changing a word?

Set up a style that spans something

other than the usual elements.

Span is a special type of element

This sentence contains a

big word
Span tags
Rule
http://www.w3schools.com/tags/tag_span.asphttp://www.w3schools.com/tags/tag_span.asphttp://www.w3schools.com/tags/tag_span.asphttp://www.w3schools.com/tags/tag_span.asp


13/15

Altogether now...

Embedded/Internal

Style sheet

Inline Style

Inline using the tag


14/15

What about yourinheritance?Browser

Defaults

External

Embedded

In-line

Elements

on all

pages

Elements on a

single page

Single

element

Scope Precedence

Overrides all

other styles

Overrides

external styles

Used if

there are

no

overrides


15/15

Your turn

You now have the tools to enhance your

pages.

Time to get to work!

Css Slides

Documents

Transcript of Css Slides