text properties css box modelcss box model s. prabhavathi ap/it css font properties css text...
TRANSCRIPT
![Page 1: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/1.jpg)
Text Properties CSS Box Model
S. Prabhavathi AP/IT
![Page 2: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/2.jpg)
CSS Font Properties
![Page 3: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/3.jpg)
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)
![Page 4: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/4.jpg)
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
![Page 5: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/5.jpg)
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.
![Page 6: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/6.jpg)
CSS Text Properties: Length specification
Relative Units
abso
lute
Uni
ts
![Page 7: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/7.jpg)
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)
![Page 8: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/8.jpg)
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
![Page 9: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/9.jpg)
CSS Font Properties
![Page 10: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/10.jpg)
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
![Page 11: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/11.jpg)
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.
![Page 12: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/12.jpg)
CSS Text Formatting
![Page 13: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/13.jpg)
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;}
![Page 14: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/14.jpg)
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
![Page 15: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/15.jpg)
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
![Page 16: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/16.jpg)
CSS Text Color: color
![Page 17: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/17.jpg)
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
![Page 18: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/18.jpg)
CSS Box Model
![Page 19: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/19.jpg)
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.
![Page 20: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/20.jpg)
CSS Box Model
• Every rendered element occupies a box:
(or inner edge)
(or outer edge)
![Page 21: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/21.jpg)
CSS Box Model
![Page 22: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/22.jpg)
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
![Page 23: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/23.jpg)
Box Model Shorthand Properties
![Page 24: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/24.jpg)
CSS Box Model
border-width: 20px,15px;
margin: 10px,20px, 40px;
Shorthand declaration
![Page 25: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/25.jpg)
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
![Page 26: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/26.jpg)
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
![Page 27: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/27.jpg)
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.
![Page 28: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/28.jpg)
Backgrounds
<body style="background-image:url('CucumberFlowerPot.png')">
background-color and background-image are not inherited
![Page 29: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/29.jpg)
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.
![Page 30: Text Properties CSS Box ModelCSS 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](https://reader036.vdocuments.mx/reader036/viewer/2022071212/6025ae143414801237437ad4/html5/thumbnails/30.jpg)
Thank You