SlideShare a Scribd company logo
Cascading Style Sheets UCC Spring 2010 Ryan Dinwiddie
Internal Style Sheets Embedded Affects individual document <html> <head>   ...   <style type =“text/css”> p {font-family: Arial, sans-serif;}   </style> </head> <body> ... <p> some text </p> </body> </html>
External Style Sheet Separate text file (.css) e.g. styles.css p { font-family: Arial, Sans-serif; }
External Style Sheets Linked styles Affect all documents that are linked to the style sheet <html> <head> ... <link href= “styles.css”  rel=“stylesheet” type=“text/css” /> </head> <body> ... <p> some text </p> </body> </html>
Internal Style Sheets You use an  internal style sheet  to create styles that apply to an entire document You create an internal style sheet within a  <style>  element placed within the document head The  <style>  element must include a type attribute, which is assigned a value of “text/css”
Internal Style Sheets Within the  <style>  element you create any style instructions for a specific element that are applied to all instances of that element contained in the body of the document The element to which specific style rules in a style sheet apply is called a  selector
Internal Style Sheets
Contextual Selectors A  contextual selector  allows you to specify formatting for an element, but only when it is contained within another element You create a contextual selector by including two or more selectors in a declaration within a  <style>  element separated by spaces
Class Selectors Another method of applying styles is to use  class   selectors , which allow you to create different groups of styles for the same element You create a class selector within a  <style>  element by appending a name for the class to a selector with a period
Class Selectors You then assign the class name to the standard  class  attribute of elements in the document that you want to format with the class’s style definitions
ID Selectors An  ID   selector  is similar to an inline style in that it allows you to create style declarations that are only applied to a single element in the document As with inline styles, you use an ID selector when you want to change the style of a single element on your Web page
ID Selectors The benefit to using ID selectors over inline styles is that they allow you to maintain all of your style declarations in a single location within the  <style>  element, as opposed to inline style declarations, which you must create within each element
External Style Sheets External style sheets  are separate text documents containing style declarations that are used by multiple documents on a Web site You should create an external style sheet whenever you need to use the same styles on multiple Web pages on the same site
External Style Sheets You create an external style sheet in a text editor, the same as when you create XHTML documents However, you should save the document with an extension of .css
External Style Sheets The most popular way of accessing the styles in an external style sheet is to use the empty  <link>  element to link a document to a style sheet You place the  <link>  element in the document head
External Style Sheets You include three attributes in the  <link>  element:  The  href  attribute that is assigned the Uniform Resource Locator (URL) of the style sheet The  rel  attribute that is assigned a value of “stylesheet” to specify that the referenced file is a style sheet The  type  attribute, which is assigned the same “text/css” value as the type attribute used in the  <style>  element
The  <div>  and  <span>  Elements The  <div>  element  formats a group of block-level and inline elements with styles, whereas the  <span>  element  formats a group of inline elements The only difference between these two elements is that the  <div>  element can contain block-level elements and also adds a line break after its closing tag
Cascading Order CSS uses an order of precedence to determine which styles to apply when a selector is formatted in different sources The least important style formatting is the browser’s default style settings
Cascading Order The cascading order of precedence for styles, starting with the least important to the most important, is as follows: Browser default External style sheets Internal style sheets Inline styles
Setting Color and Background Properties The  color   property  sets the text color of an element Background   properties  set the background color or image that appears behind an element
Foreground and Background Color The color you apply with the color element is referred to as the  foreground color Another type of color you can add to elements is  background color , which you create with the  background-color   property
Foreground and Background Color The foreground color that is applied to an element’s text appears on top of an element’s background color
Foreground and Background Color The W3C strongly recommends that whenever you use the  color  property, you also include the  background-color   property to ensure that the foreground color text is placed on a suitable background In order to set background properties for the Web page itself, you declare them for the  <body>  element
Background Images To set an image to appear as the document background, you use the  background-image  property and assign to it a URL using the format url ( url)
Background Images
The  background  Shorthand Property Several of the property categories include a special property called a  shorthand property  that allows you to set all of the properties in a category using one declaration
The  background  Shorthand Property The shorthand property for the background properties category is the  background  property Many of the properties for each category have unique values that are assigned to them
The  background  Shorthand Property The  background-attachment  property can be assigned the values “scroll” or “fixed”; neither of these values can be assigned to any other background property
Setting Text Properties You use text properties to specify the placement and appearance of text The difference between text properties and font properties is that text properties do not change the appearance of an element’s font Text properties adjust visual aspects such as word and letter spacing, text alignment, indentation, and so on
CSS1 Text Properties
Word and Letter Spacing Word spacing refers to the amount of space between words, whereas letter spacing refers to the amount of space between letters You set word spacing with the  word-spacing  property and letter spacing with the  letter-spacing  property
Text Decorations The  text-decoration  property modifies the appearance of text by adding the following “decorations” to the text:  none ,  underline ,  overline ,  line-through , and  blink
Text Decorations An underline value underlines the text, an overline value places a line over the text, and a line-through value places a line through the text, the same as the  <del>  element
Text Decorations One of the more common uses of the  text-decoration  property is to turn off the underline that appears beneath links for design purposes
Line Height By default, the line height in a document is set to single-space You use the  line-height  property to change the default line of an element from single-spacing to something else
Line Height The  line-height   property can accept a length unit or percentage unit value If you use a length unit, be sure to use a relative unit such as ems or a percentage unit
Indenting  The  text-indent  property indents the first line of a paragraph according to the value you specify You may be tempted to use an absolute measurement such as inches or centimeters with the  text-indent   property
Indenting  Be sure to use a relative length unit or a percentage unit in order to allow the indent to scale according to the element’s font
Text Alignment You have seen how to align text horizontally using the  text-align  property Although the examples you have seen have been with inline styles, you can also use the  text-align  property with selectors
Text Alignment The  vertical-align  property is a little more complicated in that it changes the vertical alignment of an element in relation to its parent element
Text Alignment One common use of the  vertical-align  property is to adjust the position of images, such as toolbar buttons, that are placed inside a line of text
Setting Font Properties
Font Name The  font-family  property is a critical font property because it sets the font that an element displays When you select a font for an element, be sure to use a font that you know is installed on a user’s computer
Font Name Your best bet is to assign a list of font names to the  font-family  property, separated by commas Generic font families represent the five major font families available in typography:  serif ,  sans   serif ,  cursive ,  fantasy , and  monospace
Font Size You have seen examples of how to specify font size using the font-size property  When specifying font size, be sure to use a relative length unit such as ems or a percentage unit
Font Size Alternately, you can use one of the following predefined values to set font size:  xx-small ,  x-small ,  small ,  medium ,  large ,  x-large ,  xx-large ,  smaller , or  larger
Font Size
Font Appearance In addition to the font family and the font size, you can change the appearance of a font using the  font-style ,  font-variant , and  font-weight  properties The  font-style  property allows you to make text italicized or oblique, which is a slanted font, similar to an italicized font
The font Shorthand Property Using the  font  shorthand property, you can set values for all of the font properties in a single declaration
The font Shorthand Property The values for the font property must be set in the following order: font-style  (optional) font-weight   (optional) font-variant  (optional) font-size  (required) line-height  (optional) font-family  (required)

More Related Content

What's hot

Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
vijayta
 
Css
CssCss
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
Webtech Learning
 
Html
HtmlHtml
CSS
CSSCSS
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
Unit 2.1
Unit 2.1Unit 2.1
CSS ppt
CSS pptCSS ppt
Css
CssCss
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
Divya Tiwari
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Erin M. Kidwell
 
Unit 2.1
Unit 2.1Unit 2.1
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
M Ashraful Islam Jewel
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Css3 Complete Reference
Css3 Complete ReferenceCss3 Complete Reference
Css3 Complete Reference
EPAM Systems
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 

What's hot (19)

Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Css
CssCss
Css
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Html
HtmlHtml
Html
 
CSS
CSSCSS
CSS
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css introduction
Css introductionCss introduction
Css introduction
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Css
CssCss
Css
 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css3 Complete Reference
Css3 Complete ReferenceCss3 Complete Reference
Css3 Complete Reference
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 

Viewers also liked

Lecture 1
Lecture 1Lecture 1
Lecture 1
uccwebcourses
 
Int Lecture 4
Int Lecture 4Int Lecture 4
Int Lecture 4
uccwebcourses
 
Int Lecture 3
Int Lecture 3Int Lecture 3
Int Lecture 3
uccwebcourses
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
uccwebcourses
 
Lecture 3
Lecture 3Lecture 3
Lecture 3
uccwebcourses
 
Black River Imaging
Black River ImagingBlack River Imaging
Black River Imaging
David Williams
 
Darren Lee Gallery
Darren Lee GalleryDarren Lee Gallery
Darren Lee Gallery
Darren Lee
 
Introduction to Apache Kafka
Introduction to Apache KafkaIntroduction to Apache Kafka
Introduction to Apache Kafka
Chifeng Chou
 
Lecture 4
Lecture 4Lecture 4
Lecture 4
uccwebcourses
 
Información contable
Información contableInformación contable
Información contable
Ministerio de Educación
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
uccwebcourses
 
Personalized Multi Channel Marketing
Personalized Multi Channel MarketingPersonalized Multi Channel Marketing
Personalized Multi Channel Marketing
David Williams
 
Masyarakat melayu
Masyarakat melayuMasyarakat melayu
Masyarakat melayu
Shahrom Hadi
 
Finish Before You Start
Finish Before You StartFinish Before You Start
Finish Before You Start
David Williams
 
Power point etika penggunaan internet
Power point etika penggunaan internetPower point etika penggunaan internet
Power point etika penggunaan internet
Shahrom Hadi
 
Autonomic Dysreflexia: Nursing Care
Autonomic Dysreflexia: Nursing CareAutonomic Dysreflexia: Nursing Care
Autonomic Dysreflexia: Nursing Care
dsukumaran
 

Viewers also liked (18)

Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Int Lecture 4
Int Lecture 4Int Lecture 4
Int Lecture 4
 
Int Lecture 3
Int Lecture 3Int Lecture 3
Int Lecture 3
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Lecture 3
Lecture 3Lecture 3
Lecture 3
 
Codex2
Codex2Codex2
Codex2
 
Black River Imaging
Black River ImagingBlack River Imaging
Black River Imaging
 
Darren Lee Gallery
Darren Lee GalleryDarren Lee Gallery
Darren Lee Gallery
 
Introduction to Apache Kafka
Introduction to Apache KafkaIntroduction to Apache Kafka
Introduction to Apache Kafka
 
Neumonia protocolo
Neumonia protocoloNeumonia protocolo
Neumonia protocolo
 
Lecture 4
Lecture 4Lecture 4
Lecture 4
 
Información contable
Información contableInformación contable
Información contable
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
Personalized Multi Channel Marketing
Personalized Multi Channel MarketingPersonalized Multi Channel Marketing
Personalized Multi Channel Marketing
 
Masyarakat melayu
Masyarakat melayuMasyarakat melayu
Masyarakat melayu
 
Finish Before You Start
Finish Before You StartFinish Before You Start
Finish Before You Start
 
Power point etika penggunaan internet
Power point etika penggunaan internetPower point etika penggunaan internet
Power point etika penggunaan internet
 
Autonomic Dysreflexia: Nursing Care
Autonomic Dysreflexia: Nursing CareAutonomic Dysreflexia: Nursing Care
Autonomic Dysreflexia: Nursing Care
 

Similar to Lecture 5

Introduction to css - a complete guide towards css
Introduction to css - a complete guide towards cssIntroduction to css - a complete guide towards css
Introduction to css - a complete guide towards css
DailyReminder1
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Seble Nigussie
 
Css basics
Css basicsCss basics
Css basics
mirza asif haider
 
Css layouts-continued
Css layouts-continuedCss layouts-continued
Css layouts-continued
huia
 
CSS
CSSCSS
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
ssuseraa1a80
 
Css
CssCss
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
CSS
CSSCSS
lecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxlecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptx
zheerhimdad
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
hinalsomani93
 
Css
CssCss
Css
CssCss
Css
CssCss
Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptx
clement swarnappa
 
Css
CssCss
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
Css1
Css1Css1
Css1
teach4uin
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Css
CssCss

Similar to Lecture 5 (20)

Introduction to css - a complete guide towards css
Introduction to css - a complete guide towards cssIntroduction to css - a complete guide towards css
Introduction to css - a complete guide towards css
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css basics
Css basicsCss basics
Css basics
 
Css layouts-continued
Css layouts-continuedCss layouts-continued
Css layouts-continued
 
CSS
CSSCSS
CSS
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
Css
CssCss
Css
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
CSS
CSSCSS
CSS
 
lecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxlecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptx
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptx
 
Css
CssCss
Css
 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
CSS - LinkedIn
 
Css1
Css1Css1
Css1
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Css
CssCss
Css
 

Lecture 5

  • 1. Cascading Style Sheets UCC Spring 2010 Ryan Dinwiddie
  • 2. Internal Style Sheets Embedded Affects individual document <html> <head> ... <style type =“text/css”> p {font-family: Arial, sans-serif;} </style> </head> <body> ... <p> some text </p> </body> </html>
  • 3. External Style Sheet Separate text file (.css) e.g. styles.css p { font-family: Arial, Sans-serif; }
  • 4. External Style Sheets Linked styles Affect all documents that are linked to the style sheet <html> <head> ... <link href= “styles.css” rel=“stylesheet” type=“text/css” /> </head> <body> ... <p> some text </p> </body> </html>
  • 5. Internal Style Sheets You use an internal style sheet to create styles that apply to an entire document You create an internal style sheet within a <style> element placed within the document head The <style> element must include a type attribute, which is assigned a value of “text/css”
  • 6. Internal Style Sheets Within the <style> element you create any style instructions for a specific element that are applied to all instances of that element contained in the body of the document The element to which specific style rules in a style sheet apply is called a selector
  • 8. Contextual Selectors A contextual selector allows you to specify formatting for an element, but only when it is contained within another element You create a contextual selector by including two or more selectors in a declaration within a <style> element separated by spaces
  • 9. Class Selectors Another method of applying styles is to use class selectors , which allow you to create different groups of styles for the same element You create a class selector within a <style> element by appending a name for the class to a selector with a period
  • 10. Class Selectors You then assign the class name to the standard class attribute of elements in the document that you want to format with the class’s style definitions
  • 11. ID Selectors An ID selector is similar to an inline style in that it allows you to create style declarations that are only applied to a single element in the document As with inline styles, you use an ID selector when you want to change the style of a single element on your Web page
  • 12. ID Selectors The benefit to using ID selectors over inline styles is that they allow you to maintain all of your style declarations in a single location within the <style> element, as opposed to inline style declarations, which you must create within each element
  • 13. External Style Sheets External style sheets are separate text documents containing style declarations that are used by multiple documents on a Web site You should create an external style sheet whenever you need to use the same styles on multiple Web pages on the same site
  • 14. External Style Sheets You create an external style sheet in a text editor, the same as when you create XHTML documents However, you should save the document with an extension of .css
  • 15. External Style Sheets The most popular way of accessing the styles in an external style sheet is to use the empty <link> element to link a document to a style sheet You place the <link> element in the document head
  • 16. External Style Sheets You include three attributes in the <link> element: The href attribute that is assigned the Uniform Resource Locator (URL) of the style sheet The rel attribute that is assigned a value of “stylesheet” to specify that the referenced file is a style sheet The type attribute, which is assigned the same “text/css” value as the type attribute used in the <style> element
  • 17. The <div> and <span> Elements The <div> element formats a group of block-level and inline elements with styles, whereas the <span> element formats a group of inline elements The only difference between these two elements is that the <div> element can contain block-level elements and also adds a line break after its closing tag
  • 18. Cascading Order CSS uses an order of precedence to determine which styles to apply when a selector is formatted in different sources The least important style formatting is the browser’s default style settings
  • 19. Cascading Order The cascading order of precedence for styles, starting with the least important to the most important, is as follows: Browser default External style sheets Internal style sheets Inline styles
  • 20. Setting Color and Background Properties The color property sets the text color of an element Background properties set the background color or image that appears behind an element
  • 21. Foreground and Background Color The color you apply with the color element is referred to as the foreground color Another type of color you can add to elements is background color , which you create with the background-color property
  • 22. Foreground and Background Color The foreground color that is applied to an element’s text appears on top of an element’s background color
  • 23. Foreground and Background Color The W3C strongly recommends that whenever you use the color property, you also include the background-color property to ensure that the foreground color text is placed on a suitable background In order to set background properties for the Web page itself, you declare them for the <body> element
  • 24. Background Images To set an image to appear as the document background, you use the background-image property and assign to it a URL using the format url ( url)
  • 26. The background Shorthand Property Several of the property categories include a special property called a shorthand property that allows you to set all of the properties in a category using one declaration
  • 27. The background Shorthand Property The shorthand property for the background properties category is the background property Many of the properties for each category have unique values that are assigned to them
  • 28. The background Shorthand Property The background-attachment property can be assigned the values “scroll” or “fixed”; neither of these values can be assigned to any other background property
  • 29. Setting Text Properties You use text properties to specify the placement and appearance of text The difference between text properties and font properties is that text properties do not change the appearance of an element’s font Text properties adjust visual aspects such as word and letter spacing, text alignment, indentation, and so on
  • 31. Word and Letter Spacing Word spacing refers to the amount of space between words, whereas letter spacing refers to the amount of space between letters You set word spacing with the word-spacing property and letter spacing with the letter-spacing property
  • 32. Text Decorations The text-decoration property modifies the appearance of text by adding the following “decorations” to the text: none , underline , overline , line-through , and blink
  • 33. Text Decorations An underline value underlines the text, an overline value places a line over the text, and a line-through value places a line through the text, the same as the <del> element
  • 34. Text Decorations One of the more common uses of the text-decoration property is to turn off the underline that appears beneath links for design purposes
  • 35. Line Height By default, the line height in a document is set to single-space You use the line-height property to change the default line of an element from single-spacing to something else
  • 36. Line Height The line-height property can accept a length unit or percentage unit value If you use a length unit, be sure to use a relative unit such as ems or a percentage unit
  • 37. Indenting The text-indent property indents the first line of a paragraph according to the value you specify You may be tempted to use an absolute measurement such as inches or centimeters with the text-indent property
  • 38. Indenting Be sure to use a relative length unit or a percentage unit in order to allow the indent to scale according to the element’s font
  • 39. Text Alignment You have seen how to align text horizontally using the text-align property Although the examples you have seen have been with inline styles, you can also use the text-align property with selectors
  • 40. Text Alignment The vertical-align property is a little more complicated in that it changes the vertical alignment of an element in relation to its parent element
  • 41. Text Alignment One common use of the vertical-align property is to adjust the position of images, such as toolbar buttons, that are placed inside a line of text
  • 43. Font Name The font-family property is a critical font property because it sets the font that an element displays When you select a font for an element, be sure to use a font that you know is installed on a user’s computer
  • 44. Font Name Your best bet is to assign a list of font names to the font-family property, separated by commas Generic font families represent the five major font families available in typography: serif , sans serif , cursive , fantasy , and monospace
  • 45. Font Size You have seen examples of how to specify font size using the font-size property When specifying font size, be sure to use a relative length unit such as ems or a percentage unit
  • 46. Font Size Alternately, you can use one of the following predefined values to set font size: xx-small , x-small , small , medium , large , x-large , xx-large , smaller , or larger
  • 48. Font Appearance In addition to the font family and the font size, you can change the appearance of a font using the font-style , font-variant , and font-weight properties The font-style property allows you to make text italicized or oblique, which is a slanted font, similar to an italicized font
  • 49. The font Shorthand Property Using the font shorthand property, you can set values for all of the font properties in a single declaration
  • 50. The font Shorthand Property The values for the font property must be set in the following order: font-style (optional) font-weight (optional) font-variant (optional) font-size (required) line-height (optional) font-family (required)