Embed Size (px)
Citation preview
WRT235: Writing in Electronic EnvironmentsCSS Classes, IDs, divs
Agenda Review CSS Styles Discuss Separation of Form and Content Discuss Classes, IDs, and Targets
Three Methods of CSS External
CSS saved in a separate .css file – reusable Embedded
CSS in the <head> of an XHTML document within <style> tags Can only be used by that specific document
Inline CSS embedded in an object using style attribute – e.g. <p
style=“color:red”> Order of inheritance: External > Embedded > Inline – i.e.,
each subsequent style overrides the previous
External Style Sheets Reusable
1 .css file for many documents Change 1 file to change all pages in a site
Separate .css file Use text editor to create Save as style.css (note: .css files can be named anything)
Relative link to your stylesheet from <head> <link rel="stylesheet" type="text/css" media="screen" href=”test.css”>
style.css No need for <style> tag Rules written like embedded CSS
p {color: #ffffff} p {
color: #fffff;
background: #000000
}
CSS Class Selectors Apply styles to objects of a class – think the nouns of your
HTML document (<p>, <ul>, <header>,<footer>)
p { color: #ffffff:}
All <p> objects take this style
p.different { background:blue;}
All <p> with class “different”<p class=“different>
CSS ID Selectors Apply styles to objects with a unique ID
#pizza { color: #ffffff:}
Object with ID “pizza” gets this style
p#pizza { background:blue;}
Only paragraphs with ID pizza get this style
CSS Class & ID Selectors Classes can apply to multiple objects
In HTML: <p class=“different”> IDs apply to unique objects
In HTML: <p id=“pizza”>
New Object Type: <div> Short for division Used to contain objects
Can contain other <div> objects Purpose is to group related content
Example: headers Example: footers
Can have id and style attributes
<div> Example<div id=“header”>
<h1>My Cool Website</hi>
<ul id=“navigation”>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About</a></li>
<li><a href=“resume.html”>Resume</a></li>
</ul>
</div><!– end #header -->
<div> Example Notice how each <div> tag contains an id. Because all open <div> tags have ids, you can style divs in
your CSS
<div> Activity Download the HTML stub from the course Homepage Create <div> objects in the XHTML and contain objects
Be sure to use open and close tags When closing </div> tags use comments to indicate the end of a
container – e.g., </div> <!-- end header --> Be sure to give each <div> an id attribute – e.g., <div
id=“header>
<span> Objects <span> objects function like <div> tags Difference:
<div> tags target block elements <span> tags target in-line elements
Example of <span> using the class .warning:.warning {color:red; font-weight:bold}
<p>This is very <span class=“warning”>important</span> step.</p>
Notes on <div> and <span> Semantically meaningless on their own Should be used sparingly, especially the <span> tag
Why? A lot of effort to maintain across pages and pages of HTML
markup Better alternatives
CSS Box Model Every object has 5 properties that control size and
positioning on a page: margin padding border height width
Everything is box
CSS Box Model :: Margin Space outside the border
of an object Creates white space
between objects Value in pixels Control 4 sides or indvidual
sides Example rules:
margin: 20px; margin-right:10px;
CSS Box Model :: Border Edges surrounding object Between margin and
padding Can control value for each
edge or entire border Example rules:
border: 1px solid black border-left: 2px dashed
black;
CSS Box Model :: Width Size of an object from
padding-left edge to padding-right edge
Does not include values from padding, border, or margin
Example rules: width: 900px
CSS Box Model :: Height Size of an object from
padding-top edge to padding-bottom edge
Does not include values from padding, border, or margin
Example rules: height: 360px
CSS Box Model Question Given the following rules:
#quiz {
margin: 5px;
border: none;
padding: 10px;
width: 400px;
}
How wide is #quiz on the screen?
CSS Box Model Properties of objects control positioning and size Allows us to create layouts and move objects around to match
our designs
