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