Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>
class selectors
The
class
and
id
attributes of XHTML elements can be used in conjunction with styles.
Example 10.5
Example 10.5 Source:
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div class="withstyle" >Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div> <div class="warn" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div>Lorem ipsum dolor sit amet, <span class="warn" >consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div id="legalese" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>
In
style
element (
<style type="text/css">
) within
head
element:
div { margin: 0.5em; padding: 0.5em; font-family: times; color: black; background-color: white; } div.withstyle { margin: 0.5em; padding: 0.5em; font-family: sans-serif; color: navy; background-color: olive; } .warn { color: red; background-color: yellow; font-weight: bold; } #legalese { font-size: 0.6em; color: #cccccc; }
Example 10.5 Rendered:
With Styles
Without Styles
Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>