Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this


  1. 1. Developing Self AwarenessReview 1.  Grouping CSS selectors2.  Styling links states " (aka pseudo-class selectors) using CSS3.  Generic elements – " div and span4.  CSS Class selectors
  2. 2. Developing Self Awareness1.  Grouping CSS selectorsh1, h3, p { Heading 1 color: orange;" Heading 3 font-weight: bold;" paragraph}Create a css style that applies to a group ofitems by separating the items with commas
  3. 3. Developing Self Awareness 2.  Styling link statesa:link {color:red} /* links are red*/a:visited {color:blue} /* visited links are blue*/a:hover {color:purple} /* hovering turns them purple*/a:active {color:red} /* red when clicking*/"Note well – the pseudo-class selectors must be in "the above order.LVHA – LoVe before HAte
  4. 4. Developing Self Awareness3.  Generic Elements<div>Content here.</div> Divs are generic block-level elements.Applied to portions of content, they make thatcontent easier to style and manipulate. Until HTML5,divs were the workhorse of web layout.With HTML5, you’re encouraged to use elementslike <article>, <section> and <aside> before you use<div> to define an area.
  5. 5. 3.  Generic ElementsAwareness Developing Self (cont.)<span> some words </span> Spans are generic inline elements.A span element is typically wrapped around aportion of text in order to style that text differentlythan the rest of the paragraph, h1 or whatever.  
  6. 6. Developing Self Awareness4.  CSS Class SelectorsType selectors target every instance of an element.If you write p{color:green}, all your paragraph text willbe green.Type selectors select elements such as p, h1.They’re what we’ve styled beforeClass selectors can be used to select and "style any HTML element by applying the class "as an attribute. How?
  7. 7. Developing Self Awareness4.  CSS Class Selectors (cont.).redbold{" color: red;" CSS font-weight: bold;"}<p>Call me <span class=“redbold”> Ishmael.</span>Some years ago, never mind how long precisely…</p> HTMLCall me Ishmael. Some years ago, never mind how long Resultprecisely…
  8. 8. FANCY" 1.  Create a small bullet in Photoshop or Illustrator. BULLETS 2.  It should be a .jpeg, .png or "(bespoke bullets .gif image. for your " 3.  Customize your li CSS: <ul></ul>) li { " list-style-image: url(your_bullet.gif); " }
  9. 9. Email Note: this type of mail link can attract all the Link spammers of the whole entire world. One solution: skip the mailto link and write something (How to make a like this: “Hey, you can send me an email at afoley(at)madisoncollege(dot)edu.” link to an email Another solution is Enkoder, a tiny, little javascript utility address that that encrypts your email address: starts the email enkoder/ process) Click"<a href=“”> here</a>to send me an email!
  10. 10. Developing Self AwarenessCentering page content CSS!#wrapper {" width: 800px;" margin:0 auto;"} HTML!<body><div id=“wrapper”> <h1>I’m the headline</h1> <p>I’m the content of this one-paragraph web page. " The headline and I are the only content here!</p></div></body>