WRT235: Writing in Electronic Environments CSS 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 of an XHTML document within tags  Can only be used by that specific document  Inline  CSS embedded in an object using style attribute – e.g.  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

style.css  No need for tag  Rules written like embedded CSS  p {color: #ffffff}  p { color: #fffff; background: # }

CSS Class Selectors  Apply styles to objects of a class – think the nouns of your HTML document (,,, ) p { color: #ffffff: } All objects take this style p.different { background:blue; } All with 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:  IDs apply to unique objects  In HTML:

New Object Type:  Short for division  Used to contain objects  Can contain other objects  Purpose is to group related content  Example: headers  Example: footers  Can have id and style attributes

Example My Cool Website Home About Resume

Example  Notice how each tag contains an id.  Because all open tags have ids, you can style divs in your CSS

Activity  Download the HTML stub from the course Homepage  Create objects in the XHTML and contain objects  Be sure to use open and close tags  When closing tags use comments to indicate the end of a container – e.g.,  Be sure to give each an id attribute – e.g.,

Objects  objects function like tags  Difference:  tags target block elements  tags target in-line elements  Example of using the class.warning:.warning {color:red; font-weight:bold} This is very important step.

Notes on and  Semantically meaningless on their own  Should be used sparingly, especially the 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