Download - The Breakdown
![Page 1: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/1.jpg)
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!
![Page 2: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/2.jpg)
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
![Page 3: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/3.jpg)
Applying a single style sheet to multiple documents
![Page 4: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/4.jpg)
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}
![Page 5: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/5.jpg)
Style Precedence
1. External style sheet
2. Embedded styles
3. Inline styles
![Page 6: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/6.jpg)
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: sans-
sarif”>IU</h1>
![Page 7: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/7.jpg)
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>
![Page 8: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/8.jpg)
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)
![Page 9: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/9.jpg)
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>
![Page 10: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/10.jpg)
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; font-
family:sans-serif}– Save this in a new document using a .css
extension
![Page 11: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/11.jpg)
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
![Page 12: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/12.jpg)
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
![Page 13: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/13.jpg)
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: sans-serif; color: orange}
b {color: blue}
html file
Text file of css named “stylesheet”
![Page 14: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/14.jpg)
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
![Page 15: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/15.jpg)
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
![Page 16: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/16.jpg)
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
![Page 17: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/17.jpg)
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>
![Page 18: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/18.jpg)
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}
![Page 19: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/19.jpg)
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>
![Page 20: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/20.jpg)
Applying a style to a class
![Page 21: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/21.jpg)
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}
![Page 22: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/22.jpg)
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
![Page 23: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/23.jpg)
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}
![Page 24: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/24.jpg)
Working With <DIV> (p. 372)
DIV.Slogan {font-weigh:bold}
<DIV CLASS=Slogan>Maxwell Scientific’s new Slogan is:<BR>”We teach science”</DIV>
style
HTML code
Maxwell…:“We
teach…Resultingtext
![Page 25: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/25.jpg)
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>
![Page 26: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/26.jpg)
CSS for Page Layout
• CSS manipulates the size and location of block-level 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>
![Page 27: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/27.jpg)
CSS for Page Layout
• Parts of the block-level elements:– Margin– Border– Padding
![Page 28: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/28.jpg)
CSS for Page Layout (Carey, 7.49)
I appreciate the prompt delivery of the pack of star disks.
bordermarginpadding
![Page 29: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/29.jpg)
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
![Page 30: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/30.jpg)
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}
![Page 31: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/31.jpg)
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)
![Page 32: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/32.jpg)
Setting the Padding Size
• To set margins on a side, use:– padding-top– padding-right– padding-bottom– padding-left
![Page 33: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/33.jpg)
Formatting the Border
• Border can be set in three ways:– border-width– border-style– border-color
![Page 34: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/34.jpg)
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
![Page 35: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/35.jpg)
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}
![Page 36: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/36.jpg)
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
![Page 37: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/37.jpg)
Using the Float Attribute
float:rightwidth:50px
float:right width:50px clear:right
![Page 38: The Breakdown](https://reader030.vdocuments.us/reader030/viewer/2022013101/56814d0d550346895dba484c/html5/thumbnails/38.jpg)
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}