1 / 18

Cascading Style Sheets (Formatting

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. Length Units. Length units are used in styles to define the unit of measure

dory
Download Presentation

Cascading Style Sheets (Formatting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets(Formatting

  2. 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

  3. Length Units • Length units are used in styles to define the unit of measure • cm – centimeter • mm – millimeter • pc – pica (1/6 inch) • px – point (1/72 inch) • in – inches • Percentage units as in 150% • See EmbeddedStyle.htm

  4. 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

  5. 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

  6. Styling (Text 3) • The white-space property controls whitespace normalization • How multiple spaces between other characters are normalized • The text-decoration property controls how text is adorned • underline, overline, line-through

  7. Styling (Text 4) • font-family • font-size • font-weight • bold, bolder, lighter, 100-900 • font-style • normal, italic, oblique • text-transform • lowercase, uppercase

  8. Styling (Text 5) • See TextStyles.htm in the example

  9. Styling (Borders 1) • This is the border surrounding the imaginary box • The border has a style, which must be set for the border to display • The border-style property has the following possible values • dotted, dashed, solid, double, groove, ridge, inset, outset • The visual effect depends on the border-width and border-color properties

  10. Styling (Borders 2) • Individual sides • border-top • …

  11. 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

  12. Styling (Borders 4)

  13. Styling (Transformations) • These are new to CSS3 • There are 2D and 3D transformations • translate • rotate • scale • skew • matrix http://www.w3schools.com/css/css3_2dtransforms.asp

  14. CSS (Box Model) • CSS views all XHTML elements as a rectangular box consisting of • A margin around the box • A border • Padding, which is the boundary from the content to the border of the box • The box’s content • It applies to all block elements

  15. Styling Lists (Unordered)

  16. Styling Lists (Ordered)

  17. Styling Lists (Example) • list-style-type denotes the style of the item number or bullet • list-style-image allows you to add a picture to an image • ul{list-style-image:url("/images/blueball.gif");list-style-type:square;} • See TextStyles.htm

  18. Whitespace Handling

More Related