WRT235: Writing in Electronic Environments Basic CSS

Agenda  Introduce DOM  Introduce basic CSS  Inline styles  Style sheets  Start Module 4

DOM: Document Object Model  Model for parsing HTML  Initiated in the browser  Creates relationships between objects (parent-child nodes)  Enables you to manipulate objects  CSS – styles, colors, transitions, positioning  Javascript – read, change, or remove objects in the HTML

DOM: Document Object Model Document Root Element: Element: Text: “My title” Element: Element: Text:”My header”

CSS: Cascading Style Sheets  Allows us to add style to our HTML markup  Reusable  One rule for many objects  One CSS file for many pages  Cascade effect  Changes flow down to many different objects  Change all documents by changing rules  Saves time and makes revision easier

CSS: Cascading Style Sheets  CSS requires the DOM to work  CSS uses the hierarchical parent-child node and styles objects according to these relationships  Style specific objects based on names or attributes

CSS: Getting started  Prepare an HTML document in your text editor using our default structure  Add the following objects to your file:  2 headers ( )  4 paragraphs ( ) with loren ipsum text  A list with 4 items  3 non-functional links ( link 1 )  Save and test in browser

CSS: 3 Types of Styles  Inline styles  Inline embedded  External

CSS: 3 Inline styles  In your XHTML file, add the following attribute to one of your paragraphs:  Save and test in browser  Generally, we don’t ever like to use inline styles  Why do you think that is?

CSS: 3 Inline Embedded Styles  In your html file or Thimble view add the following rules to the section of your document. p {color:green; font-size:20px:}  Save and test in browser  We also don’t like to use this method. Why?

CSS: Anatomy  The basic anatomy of a CSS rule can be found in the embedded inline style method: p {color: green } selectorpropertyvalue {declaration block }

CSS: Anatomy The basic anatomy of a CSS rule can be found in the embedded inline style method:  Selector – indicates what object the style rule applies to  Declaration – a markup block that specific what will happen to the selector  Property – indicates what aspect of the selector will be styled  Value – determines what the property will be

CSS Property: color  Refers to the font color of the  Can take human readable values  red, green, blue, black  Ex. color:green;  Can take hex values  #FF0000, #00FF00, #0000FF, #  More precise for monitor rendering  Can take rgba values  rgba(255,0,0,1)

CSS Property: color activity  Go back to your HTML file and practice changing the embedded style color with human readable, hex, and rgba values.  When using the rgba value, change the a to any number < 1. See what happens to the font color

CSS Property: border  Return to your HTML file  In the section, ad the following: h1 {border:2px solid red}  See what happens

CSS Property: border Border can take 3 values after the colon  Thickness  Examples: thin, thick, 2px, 5px  Style  solid, dashed, dotted  Color  Same types of values for the color property

CSS Property: font-size Font-size can take various values  Pixels  20px, 30px  em  1em, 2em  Text values  Small, medium, large, xx-small

CSS: External The most desirable type of CSS is an external stylesheet that is linked to the XHTML document:  Enables separation of form and content  1 style sheet to control the appearance of multiple webpage  Need only change the link to the.css file to change the style of a webpage

CSS: External  Open a new file in your text editor  Copy and paste the styles you have used for your embedded inline styles  Delete the tags; you no longer need it here  You can retain the rules format used earlier  Personally, I prefer to space out my CSS rules p { color:red }  Save the file in the same location as your open XHTML doc as test.css

CSS: External cont.  In the section of your working HTML document, include the following relative link with the appropriate file names:  Save and reload the XHTML page in your browser