Understanding CSS: Length Units, Text Styling, Borders, Box Model, Whitespace Handling, Slides of Computer Programming

Download Understanding CSS: Length Units, Text Styling, Borders, Box Model, Whitespace Handling and more Slides Computer Programming in PDF only on Docsity!

Cascading Style Sheets

(Formatting)

Lecture Overview

 At this point, you have learned how and where to create styles  You have not learned much about the styles themselves  That’s the topic of this section

Styling (Text 1)

 HTML text can be formatted using the following:  The text-align property controls the alignment of text inside of the box  Valid values are center , justify , left , right  The line-height property defines the height of a line  Use to increase or decrease the spacing between lines

Styling (Text 2)

 The color property defines the color of the text  The text-indent property controls the indentation of text along the left margin of the box  The letter-spacing and word-spacing properties control the amount of whitespace between letters and words

Styling (Text 4)

 font-family  font-size  font-weight  bold , bolder , lighter , 100-  font-style  normal , italic , oblique  text-transform  lowercase , uppercase

Styling (Text 5)

 See TextStyles.htm in the example

Styling (Borders 2)

 Individual sides  border-top  …

Styling (Borders 3)

 The border-width property controls the thickness of the border  The border-color property controls the color of the border  It’s possible to control the individual border sides  border-top…  See borders.htm in the sample project

Styling Lists (Unordered)

Value Description none No marker disc Default. The marker is a filled circle circle The marker is a circle square The marker is a square

Styling Lists (Ordered)

armenian The marker is traditional Armeniannumbering Decimal The marker is a number decimal-leading-zero The marker is a number padded byinitial zeros (01, 02, 03, etc.) georgian The marker is traditional Georgiannumbering (an, ban, gan, etc.) lower-alpha The marker is lower-alpha (a, b, c, d, e,etc.) lower-greek The marker is lower-greek (alpha, beta,gamma, etc.) lower-latin The marker is lower-latin (a, b, c, d, e,etc.) lower-roman The marker is lower-roman (i, ii, iii, iv, v,etc.) upper-alpha The marker is upper-alpha (A, B, C, D, E,etc.) upper-latin The marker is upper-latin (A, B, C, D, E,etc.) upper-roman The marker is upper-roman (I, II, III,IV, V, etc.)

Whitespace Handling

Value Description normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered pre Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the

 tag in HTML pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks inherit Specifies that the value of the white-space property should be inherited from the parent element
 
Backgrounds
 
 background-color – the color of the background  background-image – the url of an image  background-repeat – repeat or don’t repeat the image to fill the background area  repeat , no-repeat , repeat-x , repeat-y  background-position
 
Tables (Example)
 
 See Tables.htm in the example