1. Text Properties, Line Box, CSS

2. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!

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 Baseline Height

4. Font Families The fonts within a font family differ from one another in attributes such as boldness and font-size. 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% 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 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. Line Height G

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 Color NameRGB Value Black #000000 Gray #808080 Silver #c0c0c0 White #ffffff Red #ff0000 Lime #00ff00 Blue #0000ff Yellow #ffff00 Maroon #800000

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 Hello World Welcome to the World

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