Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
Cyndi Hageman
2
Applying a Style Sheet In-line style – used within the HTML tag
Embedded Style Sheet – located in the HTML document in the <style></style> tags Imported – external .css file imported by {url(“styles.css”)} in the style tags Linked – external .css in a link tag <link rel=“stylesheet” type=“text/css” href=“styles.css”>
3
Order of Precedence In-line styles Embedded styles
Imported style sheet Linked style sheet
4
Class Used to create a style that can be applied to many different HTML elements .sectionhdr {color:blue;font-size: 14pt}
5
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}
6
Comments You can add HTML comment tags to ensure older browsers that do not understand <style> will not get confused <style> <!— put style info here --> </style> You can put comments in a style sheet by placing your comm/ent inside /* */ /*Use this style for all section headers*/
7
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 <body></body>
8
Deprecated Elements HTML elements that are no longer used and are replaced by styles.
9
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
10
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 - %
11
Margins margins: 5px margins: 10px 5px 2px 1px (top, right, bottom, left) margin-top, margin-bottom, margin-left, margin-right
12
Negative Margins Used to offset an element from it’s parent element
For example, the negative setting for a <h1> will move it back from it’s original position body {margin-left:5%} h {margin-left:-3%}
13
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}
14
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
15
Font Families (cont.) You can list specific fonts body {font-family: Arial, Helvetica, sans}
16
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
17
Background color Background-color: blue
18
Monospace fonts Font in which all the characters are the same width
Courier or Courier New
19
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
20
Font-Weight Default is normal
Used to make things bold span {font-weight:bold}
21
Font Style Default is none
Used to make things italic span {font-style:italic}
22
Text Decoration Used to apply an underline or overline a {text-decoration:none} a:hover {text-decoration:underline}
23
Letter Spacing Allows you to set the spacing between letters h1 {letter-spacing: 0.5em}
24
Word Spacing Sets the amount of space between words in an element h1 {word-spacing: 0.5em}
25
Text Indent Indents the first line of an element p {text-indent: 5px}
26
Text Alignment Used to align the content with the element td {text-align:center} Can align center, left, right or justify
27
Text Transform Transform all the text in an element to upper or lower case h1 {text-transform: uppercase}
28
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
29
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
30
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}
31
Border Style You can set the border-style Double Dotted Dashed Groove
Ridge Inset outset
32
Border Width You can set the border by your usual units of measurement
You can also use keywords Thick Thin medium
33
Border color You can set border-color using the same types of color definitions as you set the font color
34
Positioning Absolute – sets the position on the page within its containment block. Relative – sets the position on the page relative to it’s original position on the document. Can be used to overlay objects. Set the top, bottom, left or right position with these values {position:absolute; top:10px; left:30px}
35
Float and Clear Float – floats the object on the page. Values are left or right. Float is used with images to float them left or right in relation to the content around them. Float can be used for other objects such as div’s or lists – this is quite advanced and requires a much deeper understanding of css. Clear – clears the float. Values are left, right or both. {position:absolute; top:10px; left:30px}
36
Positioning and Float Tutorials
37
Tables Cellpadding – can be set by using the padding style for the <th> or <td> 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 <td> by using vertical-align: Top, bottom, middle, baseline Horizontal alignment of text can be set for the <td> by using text-align: left, right, center, justify
38
Display Displays an element No whitespace is reserved
Set to none, the element does not display Set to “” the element will display
39
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
Similar presentations
