Download presentation
Presentation is loading. Please wait.
1
CSS for Styling Text
2
Again….CSS Cascading Style Sheet
Write rules to apply styles to page content What can you style? Imagine the Possibilities: CSS Zen Garden Show students the CSS Zen Garden site. This site makes available an html page and a style sheet that graphic designers can use to submit their own styling of the page. As you select a design, ask students to notice how the content (text) of the page isn’t changing. Not changes are being made to the html file, only changes to the CSS used to apply styles to it. Have students note the extreme differences in style applications that have been provided as examples to this site.
3
Creating a CSS Rule Selector: what element to style?
Property: what portion of element tweak? Value: sets value for that property
4
Selector Selector can be any html tag
If selector is a tag, will apply style to all such tags on the page
5
Internal Style Sheet Define your styles in the actual html page
Only applies to that page (this is just 1 of 3 options – see others later)
6
Where does the CSS go? <head> section After the meta tags
Between two <style> tags Define as many style rules there as you need
7
How to set the values of certain properties
8
CSS Comments let you make notes to yourself about design
Color of the Text Property: color Value: Hex-color code, or one of the color constants (words for colors) that Brackets offers Example: Hex code CSS Comments let you make notes to yourself about design Color constant
9
Color Behind Text Property: background-color
Value: Hex-color code, or one of the color constants (words for colors) that Brackets offers Example:
10
Size of the Text Property: font-size
Value: number value in pixels (there are other units we’ll see later) Example:
11
Font Weight Property: font-weight Value: Example:
Number value: 100 (lightest) – 900 (boldest) bold | bolder | lighter | normal Example:
12
Font Choice Property: font-family Value: Example:
Generalized kind of font: cursive, fantasy, monospace, sans-serif, serif Specific font, like arial, times new roman, etc. Example: If font name is more than one word, surround it with quotes If a font is not installed on the user’s computer, then it can’t be displayed, and the browser will try to compensate To deal with this, good idea to provide a list of fallback fonts – it will try each one you list from left to right and keep trying if a font is not available Can mix specific fonts and generalized kinds of fonts Good idea to make generalized kind of font the last option on the list and the browser will find a comparable font on the user’s computer to use List can be as many fallback fonts as you want
13
Line Height Property: line-height
Value: number in pixels (other units possible we’ll see later) Example:
14
Alignment of Text Property: text-align
Value: center | justify | left | right Example:
Similar presentations
