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

Each character is drawn relative to a rectangular character cell (also known as the
character’s content area)

Cell Height
M Baseline Height

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

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

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.

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%
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
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.
Text Color
Color Name RGB Value
Black #000000
Gray #808080
Silver #c0c0c0
White #ffffff
Red #ff0000
Lime #00ff00
Blue #0000ff
Yellow #ffff00
Maroon #800000
Next Class
CSS Box Model

Content area, padding area, margin area, border.

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

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.

HTML Box Layout
<html>

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

<body>

<p>Welcome to the World </p>

</body>

</html>
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)
◦ %
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;
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
}
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

Next Class
Beyond the Normal Flow
◦ Relative Positioning
◦ Absolute Positioning
◦ Float Positioning

Style properties
◦ Lists
◦ Tables