Today
• CSS
• 4/10 Monday (#322)
– Tutorial 7: Case 1 (4th edition)
– Read the book and handouts carefully
– Due by 4/12 (...
The Breakdown
• All web pages can be broken down into
bucketized content areas
• These areas can updated by changing
the c...
Advantages of Style Sheets
•
•
•
•
•
•

Saves time
Easy to change
Keep consistency
Give you more control over layout
Use s...
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 ...
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
si...
Three Style Types
• Embedded or internal styles
– A style is applied to the entire HTML file
– Use it when you need to mod...
Creating an Embedded Style
<head>
<title>Embedded Example</title>
<style> (default is “text/css”)
Style declarations
</sty...
An Example of an embedded style
(p. 353 Fig 7-2)
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-fa...
Three Style Types
• External style sheets
– An external style sheet is a text file containing
the style definition (declar...
Creating an External Style
Sheet
• Open a new blank document in
Notepad
• Type style declarations
– h1 {color:red; font-fa...
Linking to Style Sheets 1
• Open an HTML file
• Between <head> and </head> add
– <link href=URL rel=“relation_type”
type=“...
An example of an external style
sheet with an original html file
<head>
<title>Getting
Started</title>
<link href=“scraps....
Style Sheet Strategies
• Wherever possible, place your styles
in external style sheets
• Take advantage of the power of CS...
Style Sheet Strategies
• At the top level of your web site:
define a default global.css style sheet
• Refine styles at sub...
Attribute Selectors
• Create an attribute selector to select
an element based on the element’s
attributes.
– See figure 7-...
Using IDs and Classes
• Use an id to distinguish something,
like a paragraph, from the others in a
document.
– For example...
Working With Ids
• To create an ID for a specific tag, use the
property:
– <tag ID=id_name>

• To apply a style to a speci...
Classes
• HTML and XHTML require each id
be unique– therefore an id value can
only be used once in a document.
• You can m...
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=FirstH...
Working With Classes and Ids
• The difference between the Class
property and the ID property is that the
value of the ID p...
Working With DIV
• <DIV> tag is used for blocks of text, e.g.,
paragraphs, block quotes, headers, or lists
• To create a c...
Working With <DIV> (p. 372)
DIV.Slogan {font-weigh:bold}
style
Maxwell…:
“We
teach…
Resulting
<DIV CLASS=Slogan>Maxwell Sc...
Working With <span>
• With the <span> tag, you can use
inline elements, e.g., <B>, <I>
• To create a container for inline
...
CSS for Page Layout
• CSS manipulates the size and location of blocklevel elements
• Block-level elements in HTML:
–
–
–
–...
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...
Controlling the Margins
• To set margins on a side, use:
–
–
–
–

margin-top
margin-right
margin-bottom
margin-left

• E.g...
Setting the Padding Size
• To define padding, use:
– padding: value
– where value = a length value or a percentage
(a padd...
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:
–
–
–
–...
Formatting Width & Height of
Block-Level Boxes
• To set the width of a block-level element, use:
– width:value
– height:va...
Using the Float Attribute
(p. 371-372)
• To float (wrap) a block-level element, use:
– float:margin
– Where margin = right...
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 h...
Upcoming SlideShare
Loading in...5
×

Css

486

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Css"

  1. 1. 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
  2. 2. 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!
  3. 3. 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
  4. 4. Applying a single style sheet to multiple documents
  5. 5. 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}
  6. 6. Style Precedence 1. External style sheet 2. Embedded styles 3. Inline styles
  7. 7. 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>
  8. 8. 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>
  9. 9. 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)
  10. 10. 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>
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Attribute Selectors • Create an attribute selector to select an element based on the element’s attributes. – See figure 7-13 in your text for a list of attribute selectors
  18. 18. 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>
  19. 19. 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}
  20. 20. 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>
  21. 21. Applying a style to a class
  22. 22. 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}
  23. 23. 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 can’t have more than one tag with the same ID value – You can apply the same Class value to multiple document tags
  24. 24. 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}
  25. 25. Working With <DIV> (p. 372) DIV.Slogan {font-weigh:bold} style Maxwell…: “We teach… Resulting <DIV CLASS=Slogan>Maxwell Scientific’s new Slogan is:<BR>”We teach science”</DIV> HTML code text
  26. 26. 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>
  27. 27. 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>
  28. 28. CSS for Page Layout • Parts of the block-level elements: – Margin – Border – Padding
  29. 29. CSS for Page Layout (Carey, 7.49) I appreciate the prompt delivery of the pack of star disks. padding margin border
  30. 30. 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 element’s width, or auto
  31. 31. 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}
  32. 32. Setting the Padding Size • To define padding, use: – padding: value – where value = a length value or a percentage (a padding proportional to the element’s width)
  33. 33. Setting the Padding Size • To set margins on a side, use: – – – – padding-top padding-right padding-bottom padding-left
  34. 34. Formatting the Border • Border can be set in three ways: – border-width – border-style – border-color
  35. 35. 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
  36. 36. 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}
  37. 37. 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
  38. 38. Using the Float Attribute float:right width:50px float:right width:50px clear:right
  39. 39. 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}
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×