1 / 25

Lecture 4: CSS

Lecture 4: CSS . Text Properties, Line Box, CSS . Text Properties. Properties related to the display of text. Text-align : left, right, center <p style=“text-align : right”> I like FSU!</p>. Font Families. A font family is a collection of related fonts.

irving
Download Presentation

Lecture 4: CSS

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

More Related