1 / 20

WRT235: Writing in Electronic Environments

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)

azalia-walton
Download Presentation

WRT235: Writing in Electronic Environments

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WRT235: Writing in Electronic Environments Basic CSS

  2. Agenda • Introduce DOM • Introduce basic CSS • Inline styles • Style sheets • Start Module 4

  3. 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

  4. DOM: Document Object Model

  5. 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

  6. 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

  7. CSS: Getting started • Prepare an HTML document in your text editor using our default structure • Add the following objects to your file: • 2 headers (<h1>) • 4 paragraphs (<p>) with lorenipsum text • A list with 4 items • 3 non-functional links (<a href=“#”>link 1</a>) • Save and test in browser

  8. CSS: 3 Types of Styles • Inline styles • Inline embedded • External

  9. CSS: 3 Inline styles • In your XHTML file, add the following attribute to one of your paragraphs: <p style=“color:green”;> • Save and test in browser • Generally, we don’t ever like to use inline styles • Why do you think that is?

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

  11. CSS: Anatomy • The basic anatomy of a CSS rule can be found in the embedded inline style method: p {color: green} {declaration block} selector property value

  12. 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

  13. 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, #000000 • More precise for monitor rendering • Can take rgba values • rgba(255,0,0,1)

  14. 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

  15. CSS Property: border • Return to your HTML file • In the <style> section, ad the following: h1 {border:2px solid red} • See what happens

  16. 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

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

  18. 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

  19. 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 <style> 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

  20. CSS: External cont. • In the <head> section of your working HTML document, include the following relative link with the appropriate file names: <link rel="stylesheet" type="text/css" media="screen" href=”mod4.css”> • Save and reload the XHTML page in your browser

More Related