Lecture 4: CSS Text Properties, Line Box, CSS

Text PropertiesProperties related to the display of text.

Text-align : left, right, center

<p style=“text-align : right”> I like FSU!</p>

Font FamiliesA 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)

MCell Height

Baseline

Baseline Height

Font FamiliesThe 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:SerifMonospaceTimes New RomanArial

Font FamiliesNote: 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.

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 identifiersFont-size: 12ptFont-size: 15px

Length Unit pt – point: 1/72 inchpc – pica: 12 pointspx – pixel: typically 1/96 inch% - how much percent of the size of the parent element.

Font PropertiesFont-size: specify the size of the character cells in a font

within a font family.E.g., font-size: 12 ptFont-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?

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

Line BoxesWe 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-heightLine-height: 20ptLine-height: 150%

Line BoxesIf 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 HeightG

CSS Text Propertiestext-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.

Text ColorColor Name RGB Value

Black #000000

Gray #808080

Silver #c0c0c0

White #ffffff

Red #ff0000

Lime #00ff00

Blue #0000ff

Yellow #ffff00

Maroon #800000

Next ClassCSS Box Model

Content area, padding area, margin area, border.

CSS Box ModelIn 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.

CSS Box ModelSpan{

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;

}

Box Model Propertiespadding-{top, bottom, right, left}border-{top, bottom, right, left}-widthborder-{top, bottom, right, left}-colorborder-{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

Box Model PropertiesBackground-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.

Normal Flow Box LayoutIf 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.

HTML Box Layout<html>

</html>

<head>

</head><title>Hello World </title>

<body>

<p>Welcome to the World </p>

</body>

Normal Flow Box LayoutWidth: 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)%

Normal Flow Box LayoutIs 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;

Normal Flow Box LayoutHeight: 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

}

Inline BoxA 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

Next ClassBeyond the Normal Flow

Relative PositioningAbsolute PositioningFloat Positioning

Style propertiesListsTables