Css

Today
CSS 4/10 Monday (#322)

Tutorial 7: Case 1 (4th edition) Read the book and handouts carefully Due by 4/12 (Wed.)
A project planning document by 4/12
The Breakdown
All web pages can be broken down into bucketized content areas These areas can updated by changing the code on every page, - or By using cascading style sheets!
Advantages of Style Sheets

Saves time Easy to change Keep consistency Give you more control over layout Use styles with JavaScript => DHTML Make it easy to create a common format for all the Web pages
Applying a single style sheet to multiple documents
Basic Structure of a Style

Each definition contains:
A property A colon A value A semicolon to separate two or more values Can include one or more values
h1 {font-size:12pt; color:red}
Style Precedence
1. External style sheet 2. Embedded styles 3. Inline styles
Three Style Types

Inline styles
Add styles to each tag within the HTML file Use it when you need to format just a single section in a web page
Example
<h1 style=color:red; font-family: sanssarif>IU</h1>
Three Style Types

Embedded or internal styles
A style is applied to the entire HTML file Use it when you need to modify all instances of particular element (e.g., h1) in a web page
Example
<style>
h1 {color:red; font-family:sans-serif}
</style>
Creating an Embedded Style

<head> <title>Embedded Example</title> <style> (default is text/css) Style declarations </style> </head> A style declaration: Selector {attribute1:value1; attribute2:value2; } Selector = an element in a document (e.g., a header or paragraph)
An Example of an embedded style (p. 353 Fig 7-2)

<head> <title>Getting Started</title> <style type=text/css> h1 {font-family: sans-serif; color: organge} </style> </head>
Three Style Types

External style sheets
An external style sheet is a text file containing the style definition (declaration) Use it when you need to control the style for an entire web site
Example
h1, h2, h3, h4, h5, h6 {color:red; fontfamily:sans-serif} Save this in a new document using a .css extension
Creating an External Style Sheet

Open a new blank document in Notepad Type style declarations
h1 {color:red; font-family:sans-serif;}
Do not include <style> tags Save the document as filename.css
Linking to Style Sheets 1

Open an HTML file Between <head> and </head> add
<link href=URL rel=relation_type type=link_type>
URL is the file.css Relation_type=stylesheet Link_type=text/css
Save this file and the .css file in the same web server directory
An example of an external style sheet with an original html file

<head> <title>Getting Started</title> <link href=scraps.css rel=stylesheet type=text/css /> </head> h1 {font-family: sansserif; color: orange} b {color: blue}
Text file of css named stylesheet html file
Style Sheet Strategies

Wherever possible, place your styles in external style sheets Take advantage of the power of CSS to have control over an entire Web site
Style Sheet Strategies

At the top level of your web site: define a default global.css style sheet Refine styles at sublevels with a section.css style sheet Try to avoid using styles in tags
Attribute Selectors
Create an attribute selector to select an element based on the elements attributes.
See figure 7-13 in your text for a list of attribute selectors
Using IDs and Classes

Use an id to distinguish something, like a paragraph, from the others in a document.
For example, to identify a paragraph as head, use the code:
<p id=head> </p>
Working With Ids

To create an ID for a specific tag, use the property:
<tag ID=id_name>
To apply a style to a specific ID, use:

#id_name {style attributes and values}
Classes
HTML and XHTML require each id be unique therefore an id value can only be used once in a document. You can mark a group of elements with a common identifier using the class attribute.
<element class=class> </element>
Applying a style to a class
Working With Classes

To create a class, enter the following in the HTML tag:
<tag CLASS=class_name> <h1 CLASS=FirstHeader>IU</h1> class_name is a name to identify this class of tags
To apply a style to a class of tags, use:

tag.class_name {style attributes} or .class_name {style attributes}
Working With Classes and Ids

The difference between the Class property and the ID property is that the value of the ID property must be unique:
you cant have more than one tag with the same ID value You can apply the same Class value to multiple document tags
Working With DIV

<DIV> tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists To create a container for block-level elements, use:
<DIV CLASS=class_name>
Block-level elements
</DIV> Class_name is the name of the class You can substitute the ID proper for the Class property (with ID, the syntax for CSS style,
#id_name {style attributes and values}
Working With <DIV> (p. 372)

DIV.Slogan {font-weigh:bold} style Maxwell: We teach
<DIV CLASS=Slogan>Maxwell Scientifics new Slogan is:<BR>We teach science</DIV>
Resulting text
HTML code
Working With <span>

With the <span> tag, you can use inline elements, e.g., <B>, <I> To create a container for inline elements, use:
<span CLASS=class_name>
inline elements
</span>
CSS for Page Layout

CSS manipulates the size and location of blocklevel elements Block-level elements in HTML:
Heading tags, e.g., <H1>, <H2> <p> <blockquote> and <address> tags List tags, e.g., <ul>, <ol>, <dl> <div> <body> <hr> <img>
CSS for Page Layout

Parts of the block-level elements:
Margin Border Padding
CSS for Page Layout (Carey, 7.49)
I appreciate the prompt delivery of the pack of star disks.
padding
margin
border
Controlling the Margins

To define the margins of an element, use:
margin:value where value = a length value (em is often used), a percentage (a margin proportional to the elements width, or auto
Controlling the Margins

To set margins on a side, use:
margin-top margin-right margin-bottom margin-left
E.g., LI {margin-left:2em; margin-right:2em; margin-top:1em; margin-bottom:1em}
Setting the Padding Size

To define padding, use:
padding: value where value = a length value or a percentage (a padding proportional to the elements width)
Setting the Padding Size

To set margins on a side, use:
padding-top padding-right padding-bottom padding-left
Formatting the Border

Border can be set in three ways:
border-width border-style border-color
Formatting the Border

To set the border, use:
border:width_value style color
To set borders on a side, use:

border-top border-bottom border-left border-right
Carey 7.52-7.53
Formatting Width & Height of Block-Level Boxes

To set the width of a block-level element, use:
width:value height:value where value can be a length value, a percentage, or auto
E.g., textarea {width:225px; height:100px}
Using the Float Attribute (p. 371-372)

To float (wrap) a block-level element, use:
float:margin Where margin = right, left, none
To prevent an element from wrapping, use:

Clear:margin Where margin=right, left, both, none
Using the Float Attribute

float:right width:50px
float:right width:50px clear:right
Formatting Hypertext Links

To remove the style of underlining hypertext, use:
A {text-decoration:none}
4 types of hyperlinks can be modified:

A:visited {styles for previously visited links} A:link {styles for links that have never visited} A:active {styles for links that are currently being clicked} A:hover {styles when the mouse cursor is hovering over the link}

Css

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css

Caricato da

Copyright:

Formati disponibili

Today

CSS 4/10 Monday (#322)

A project planning document by 4/12

Advantages of Style Sheets

Applying a single style sheet to multiple documents

Basic Structure of a Style

Three Style Types

Three Style Types

Creating an Embedded Style

An Example of an embedded style (p. 353 Fig 7-2)

Three Style Types

Creating an External Style Sheet

Do not include <style> tags Save the document as filename.css

Linking to Style Sheets 1

An example of an external style sheet with an original html file

Text file of css named stylesheet html file

Style Sheet Strategies

Style Sheet Strategies

Using IDs and Classes

Working With Ids

To apply a style to a specific ID, use:

Applying a style to a class

Working With Classes

To apply a style to a class of tags, use:

Working With Classes and Ids

Working With DIV

#id_name {style attributes and values}

Working With <DIV> (p. 372)

Working With <span>

CSS for Page Layout

CSS for Page Layout

CSS for Page Layout (Carey, 7.49)

I appreciate the prompt delivery of the pack of star disks.

Controlling the Margins

Controlling the Margins

E.g., LI {margin-left:2em; margin-right:2em; margin-top:1em; margin-bottom:1em}

Setting the Padding Size

Setting the Padding Size

Formatting the Border

Formatting the Border

To set borders on a side, use:

Formatting Width & Height of Block-Level Boxes

E.g., textarea {width:225px; height:100px}

Using the Float Attribute (p. 371-372)

To prevent an element from wrapping, use:

Using the Float Attribute

float:right width:50px clear:right

Formatting Hypertext Links

4 types of hyperlinks can be modified:

Potrebbero piacerti anche