Cascading Style Sheets Cyndi Hageman

Applying a Style Sheet  In-line style – used within the HTML tag  Embedded Style Sheet – located in the HTML document in the tags  Imported – external.css file imported by {url(“styles.css”)} in the style tags  Linked – external.css in a link tag

Order of Precedence  In-line styles  Embedded styles  Imported style sheet  Linked style sheet

Class  Used to create a style that can be applied to many different HTML elements.sectionhdr{color:blue;font-size: 14pt}

ID  Used to set the style for specific id of an element on a page. ID’s are unique and cannot be repeated on a page. They can be reused on different pages so the style sheet will apply throughout a web site. #divhdr{background-color:green; text- align:center}

Comments  You can add HTML comment tags to ensure older browsers that do not understand will not get confused  You can put comments in a style sheet by placing your comm/ent inside /* */ /*Use this style for all section headers*/

Inheritance  Child elements inherit the styles of the parent elements if those styles are not set for the child element.  Child elements are contained within other elements  Parent elements contain other tags – such as the

Deprecated Elements  HTML elements that are no longer used and are replaced by styles.

Modularity  The ability of a single document to incorporate style information originating from multiple sources and serving multiple purposes  Author – sets styles through.css files, in-line styles or embedded styles  User – can set their own stylesheet by clicking Tools/Options/Accessibility and checking Format documents using my style sheet  Browser – each browser is set differently and can be affected by display settings, resolutions and monitor dimensions

Units of measurement  Pixels - px  Point – pt  Inches – in, centimeters – cm, millimeters – mm  em – calculated based on the default size. If default is 14px then 1.5em is 14*1.5  Xxsmall, small, large, xxlarge  Percentages - %

Margins  margins: 5px margins: 10px 5px 2px 1px (top, right, bottom, left)  margin-top, margin-bottom, margin-left, margin-right

Negative Margins  Used to offset an element from it’s parent element  For example, the negative setting for a will move it back from it’s original position body {margin-left:5%} h1 {margin-left:-3%}

Padding  Sets the space between the element content and the margin  You can set the padding universally h1 {padding:5px}  You can set each side individually h1 {padding-left:5px; padding-right:10px; padding-top:2px; padding-bottom:3px}

Font Families  Used to set which fonts will be used for an element  Generic font families are a catch all and should be included as a back-up Serif – some version of Times New Roman Sans-serif - some version of arial or Helvetica Monospace – some version of Courier Cursive – browser determined – avoid Fantasy – browser determined - avoid

Font Families (cont.)  You can list specific fonts body {font-family: Arial, Helvetica, sans}

Font Color  You can set the color by using the color style h1 {color:navy}  You can set the color value different ways Word – red, blue, orange, green, aqua Rgb – color: rgb(255,255,204) Hexadecimal – color: #FFFFFF

Background color  Background-color: blue

Monospace fonts  Font in which all the characters are the same width  Courier or Courier New

Font-Size  Sets the font size of an element body{font-size:10pt}  Can use any absolute measurement to set your default. You can use a calculated measurement to make enhance an element

Font-Weight  Default is normal  Used to make things bold span{font-weight:bold}

Font Style  Default is none  Used to make things italic span{font-style:itlaic}

Text Decoration  Used to apply an underline or overline a{text-decoration:none} a:hover {text-decoration:underline}

Letter Spacing  Allows you to set the spacing between letters h1 {letter-spacing: 0.5em}

Word Spacing  Sets the amount of space between words in an element h1 {word-spacing: 0.5em}

Text Indent  Indents the first line of an element p {text-indent: 5px}

Text Alignment  Used to align the content with the element td{text-align:center}  Can align center, left, right or justify

Text Transform  Transform all the text in an element to upper or lower case h1 {text-transform: uppercase}

Background Image  Sets the background image for an element.flower{background-image: url(“flower.jpg”)}  Background images are defaulted to repeat. If you want to change this you need to set the background-repeat style Repeat the x axis – background-repeat: repeat-x Repeat the y axis – background-repeat:repeat-y No repeat – background-repeat: no repeat

Lists  List-style-position: outside or inside Outside – default – blocks the text Inside – wraps the text around the bullet  List-style-image: url(“mybullet.gig”)  List-style-type None – no marker Disc – solid circle Circle – empty circle Square – solid square Decimal – 1,2,3,etc Lower roman – i,ii,iii, iv, etc Upper roman – I,II, III, IV, etc

Lists (cont.)  Bullet separation – space between the bullets can be set using the padding style ul li {padding: 1.5%}  Nested lists – can define each level of nested lists in your style sheet ul{list-style-type: circle} ul ul{list-style-type:square} ul ul ul{list-style-type:disc}

Definition Lists  Used to create a glossary of FAQ  data list  data term 

Border Style  You can set the border-style Double Dotted Dashed Groove Ridge Inset outset

Border Width  You can set the border by your usual units of measurement  You can also use keywords Thick Thin medium

Border color  You can set border-color using the same types of color definitions as you set the font color

Positioning  Absolute – sets the position on the page within its containment block.  Relative – sets the position on the page relative to it’s containment block. Used to overlay objects  Set the top, bottom, left or right position with these values {position:absolute; top:10px; left:30px}

Tables  Cellpadding – can be set by usinig the padding style for the or  Cellspacing – can be set by setting border- collapse:collapse then setting the border-width and border-spacing  Vertical alignment of text can be set to a Top, bottom, center  Horizontal alignment of text can be set using the text-align for a

Display  Displays an element  No whitespace is reserved  Set to none, the element does not display  Set to “” the element will display

Visibility  Can make something visible or not  Whitespace is reserved on the page for that element  To hide an element set the visibility: hidden  To show the element set the visibility: visible