Lecture 4: CSS

1. Lecture 4: CSS Text Properties, Line Box, CSS

2. Text Properties • Properties related to the display of text. • Text-align : left, right, center • <p style=“text-align : right”> I like FSU!</p>

3. Font Families • A font family is a collection of related fonts. • Each character is drawn relative to a rectangular character cell (also known as the character’s content area) M Cell Height Baseline Height Baseline

4. Font Families • The fonts within a font family differ from one another in attributes such as boldness and font-size. • <p style=“font-family: Times New Roman” > • A List of font families: • Serif • Monospace • Times New Roman • Arial

5. Font Families • Note: there is no guarantee that a font family that you would like to display in an HTML document will be available on a browser. • Font-family: “Edwardian Script ITC”, Arial, Times New Roman.

6. Length Specifications • Font size is one of the key features used to distinguish between individual fonts within a font family. • Font-size property is used to specify the size of a font. • In CSS, a length value is represented by a number followed by one of the unit identifiers • Font-size: 12pt • Font-size: 15px

7. Length Unit • pt – point: 1/72 inch • pc – pica: 12 points • px – pixel: typically 1/96 inch • % - how much percent of the size of the parent element.

8. Font Properties • Font-size: specify the size of the character cells in a font within a font family. • E.g., font-size: 12 pt • Font-size: 85% • <div id=“d1” style=“font-size: 12pt”> <div id=“d2” style=“font-size: 200%”> What is the size of “d2” in terms of pt?

9. Font Properties • Font-weight: bold or normal (default value). • font-variant: small-caps. All lowercase letters are converted to uppercase. However, the converted uppercase letters appears in a smaller font size. • Font-style: normal, italic, oblique.

10. Line Boxes • We can imagine that a <p> element as being rendered as a rectangular box composed of a stack of imaginary boxes called Line Box. • The height of line boxes is typically the height of a character cell. • You can override the default value with line-height • Line-height: 20pt • Line-height: 150%

11. Line Boxes • If the height of a line box is greater than the character cell height, then the character cells are vertically centered within the line box. G Line Height

12. CSS Text Properties • text-decoration: underline, overline, line-through. • letter-spacing: additional space to be included between adjacent letters in words. Negative value indicates space to be removed. • word-spacing: additional space to be included between adjacent words. Negative value indicates space to be removed. • text-indent: Specify for block elements and table cells to indent text within first line box • text-align: left, right, center, justified.

13. Text Color

14. Next Class • CSS Box Model • Content area, padding area, margin area, border.

15. CSS Box Model • In CSS, every element of an HTML occupies a rectangular area – a box – on the screen. Every box consists of a nested collection of rectangular subareas.

16. CSS Box Model • Span{ margin-left: 10px; border-left-width: 10px; border-left-color: red; border-left-style: solid; padding-left: 5px; border-right-width: 5px; border-right-style: solid; }

17. Box Model Properties • padding-{top, bottom, right, left} • border-{top, bottom, right, left}-width • border-{top, bottom, right, left}-color • border-{top, bottom, right, left}-style • none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset • margin-{top, bottom, right, left} • auto – the browser will compute a value • length

18. Box Model Properties • Background-color property specifies the color underlying the content, padding, and border areas of an element’s box. • Margin area of the box is not covered by background-color.

19. Normal Flow Box Layout • If you have many elements (boxes), how does the browser arrange them? • If one HTML element is part of the content of a second HTML element, then the box corresponding to the first element will be contained within the content area of the box for the second element. • This is called normal flow processing.

20. HTML Box Layout <html> <head> <title>Hello World </title> </head> <body> <p>Welcome to the World </p> </body> </html>

21. Normal Flow Box Layout • Width: each block element has a width property that defines the width of the content area of the element’s block box. • The default value is auto: the box will be stretched so that its left and right outer edges align with the left and right content edges of its parent box. • The value of width could be: • absolute length (pt, px, pc) • %

22. Normal Flow Box Layout • Is the child element will be placed in the middle of the parent element if the child element’s width is 50%? • In order to center the child element, you must specify: margin-left: auto; margin-right: auto;

23. Normal Flow Box Layout • Height: the height of a box is determined by its content. It is sufficient to contain all the contents with an element box. • The initial value of height is 0. • You can override a value of height for an given element. e.g., p{ height: 300px }

24. Inline Box • A block box can contain inline element such as span. • The browser will generate inline boxes for inline elements. • If the top or bottom of an inline box extends beyond the corresponding edge of the line box, the line box height will automatically be expanded as needed. • Nested Inline Boxes

25. Next Class • Beyond the Normal Flow • Relative Positioning • Absolute Positioning • Float Positioning • Style properties • Lists • Tables