Text Properties CSS Box Model

S. Prabhavathi AP/IT

CSS Font Properties

CSS Text Properties: Font Family

•  A font family is a collection of related fonts (typically differ in size, weight, etc.)

•  a font is a mapping from a character (Unicode Standard code point) to a visual representation of the character (a glyph).

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

CSS Text Properties: Font Family

•  Example: Generic Font family: Are CSS keywords & must not be quoted. •  serif(times new roman), sans-serif(arial), cursive(comic

sans MS), fantasy(alba), monospace(courier new).

1st choice 2nd choice generic

CSS Text Properties: Length specification

•  Many properties, such as font-size, have a value that is a CSS length

•  All CSS length values except 0 need unit

identifiers.

CSS Text Properties: Length specification

Relative Units

abso

lute

Uni

ts

CSS Text Properties: Length specification

•  Combination of the font family and the font-size property determines the actual height of character cells. Computed value of font-size is em height

•  (em) "emphemeral unit" which is relative to the current font size. Example: body {font-size:16px}

p {font-size:0.75em} the text size in a paragraph will be 0.75×16px, or 12px.

(2em means 2 times the size of the current font)

CSS Font Properties

•  Other ways to specify value for font-size: – Percentage (of parent font-size)

– Absolute size keyword: xx-small, x-small,

small, medium (CSS initial value), large, x-large, xx-large

•  User agent specific; should differ by ~ 20% – Relative size keyword: smaller, larger

•  Relative to parent element’s font

CSS Font Properties

CSS Text Properties: Line Boxes

•  An imaginary box called line box contains one line of text.

•  The line-height CSS property sets the height of a line box. •  It's commonly used to set the distance between lines of

text. •  line-height: normal •  line-height: 2.5 •  line-height: 3em •  line-height: 150% •  line-height: 32px; •  line-height: initial •  line-height: inherit

CSS Text Properties: Line Boxes

•  font shortcut property:

{ font: italic bold 12pt "Helvetica",sans-serif }

{ font-style: italic; font-variant: normal; font-weight: bold; font-size: 12pt; line-height: normal; font-family: "Helvetica",sans-serif }

Initial values used if no value specified in font property list

{ font: bold oblique small-caps 12pt/2 "Times New Roman",serif } specifying line-height

any order size and family required, order-dependent To specify a value for line-height, immediately follow the font size value by a slash (/) and the line-height value.

CSS Text Formatting

Text Formatting h1 { text-decoration: overline;} h2 { text-decoration: line-through;} h3 { text-decoration: underline;} h4 { text-decoration: underline overline; } _____________________________________________ h1 { letter-spacing: 3px;} h2 { letter-spacing: 2px;} h3 { letter-spacing: -1px;}

CSS Text Color: color

•  Text color specified by color property •  Two primary ways of specifying colors:

– Color name: some standard names are black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia, maroon, green, navy, olive, teal, purple - full list at http://www.w3.org/TR/SVG11/types.html#ColorKeywords

–  red/green/blue (RGB) values

CSS Text Color: color

The specific color model used involves specifying an integer between 0 and 255, inclusive, for each of the intensities of red, green, and blue

CSS Text Color: color

Text Properties

Summary •  CSS properties related to the display of text. •  Selection of font and how to modify text

properties and its color. •  Determine the spacing between lines of text •  Text alignment

CSS Box Model

Basic Concepts and Properties

•  In CSS, each element of an HTML or XML document, if it is rendered by the browser visually, occupies a rectangular area—a box—on the screen.

•  Every box consists conceptually of a nested collection of rectangular subareas.

CSS Box Model

•  Every rendered element occupies a box:

(or inner edge)

(or outer edge)

CSS Box Model

Box Model <head> <link rel="stylesheet" type="text/css" href="span-box-style.css" /> </head> <body> <p> The <span>first span</span> and <span>second span</span>. </p> </body> OUTPUT

Box Model Shorthand Properties

CSS Box Model

border-width: 20px,15px;

margin: 10px,20px, 40px;

Shorthand declaration

Border - Shorthand Property

•  The border property is a shorthand property for the following individual border properties:

»  border-width »  border-style (required) »  border-color

•  p { border: 5px solid red; }

•  Output

Border - Shorthand Property •  If multiple declarations apply to a property,

the last declaration overrides earlier specifications

Left border is 30px wide, inset style, and red

Backgrounds colors and images

•  background-color –  Specifies background color for content, padding, and

border areas –  Margin area is always transparent –  Not inherited; initial value transparent –  background-color: lightgrey;

•  background-image –  Specifies (using url() function) image that will be tiled

over an element –  Tiling simply means that if an image is too small to

cover the element, either from left to right or from top to bottom or both, then the image is repeated as needed.

Backgrounds

<body style="background-image:url('CucumberFlowerPot.png')">

background-color and background-image are not inherited

Summary We have seen number of CSS properties that relate to the boxes that a browser renders corresponding to the elements in an HTML document.

Thank You