WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.

transcript

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>

<li><a href=“about.html”>About</a></li>

<li><a href=“resume.html”>Resume</a></li>

</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>  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

WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.

Documents