introducing cascading style sheets
DESCRIPTION
Introducing Cascading Style Sheets. With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all the pages at your Web site Greater consistency in your Web site Easily modified code More flexible formatting - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/1.jpg)
XPIntroducing Cascading Style Sheets• With Cascading Style Sheets (CSS), you can create
one or more documents that control the appearance of some or all the pages at your Web site– Greater consistency in your Web site– Easily modified code– More flexible formatting
• Across-the-board compatibility with all browsers is called cross-browser support– No browser supports all features of CSS
New Perspectives on Blended HTML, XHTML, and CSS 1
![Page 2: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/2.jpg)
XPComparing HTML Code to CSS Code
New Perspectives on Blended HTML, XHTML, and CSS 2
![Page 3: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/3.jpg)
XPCreating a CSS Rule• In a text document, type the selector followed by a left brace, as
in the following code, and then press the Enter key.selector {
• Type the declarations, separating a property from a value with a colon, and then type a semicolon, as in the following code.property:value;
• Type a right brace to end the declaration list. The following code shows the syntax for a complete rule selector {property1:value;property2:value; }
New Perspectives on Blended HTML, XHTML, and CSS 3
![Page 4: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/4.jpg)
XPGuidelines for Writing CSS Rules• When writing CSS rules, make sure you include
the following parts of the code:– Left brace before the declaration list– Colon between each property and its value– Semicolon at the end of each declaration– Right brace at the end of the declaration list– Spacing, indentation, line returns, or the position of
the braces are irrelevant
New Perspectives on Blended HTML, XHTML, and CSS 4
![Page 5: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/5.jpg)
XPUsing the Three Types of CSS Styles• An external style is one in which you write the
CSS code in a document separate from the HTML for the Web page
• An embedded style is one in which you write the CSS code in the <head> section of an HTML document
• An inline style is one that is written in the <body> section of an HTML document
New Perspectives on Blended HTML, XHTML, and CSS 5
![Page 6: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/6.jpg)
XPCreating an Embedded Style• Embedded styles apply styles locally to a single
Web page
New Perspectives on Blended HTML, XHTML, and CSS 6
![Page 7: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/7.jpg)
XPChanging the Font• In CSS, styles are grouped according to their
function. One of the most commonly used groups is the font properties
New Perspectives on Blended HTML, XHTML, and CSS 7
![Page 8: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/8.jpg)
XPChanging the Font
New Perspectives on Blended HTML, XHTML, and CSS 8
![Page 9: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/9.jpg)
XPChanging the Font• You use the font-size property to change the size
of type
New Perspectives on Blended HTML, XHTML, and CSS 9
![Page 10: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/10.jpg)
XPChanging the Font• You use the font-variant property to display
lowercase text in small caps, which is smaller than regular capitals
• The font-family property changes the typeface
New Perspectives on Blended HTML, XHTML, and CSS 10
![Page 11: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/11.jpg)
XPChanging the Font
New Perspectives on Blended HTML, XHTML, and CSS 11
![Page 12: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/12.jpg)
XPSetting Other Properties to Style Text• The CSS line-height property changes vertical
spacing between lines of text, a feature not available in HTML– margin property
New Perspectives on Blended HTML, XHTML, and CSS 12
![Page 13: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/13.jpg)
XPSetting Other Properties to Style Text
New Perspectives on Blended HTML, XHTML, and CSS 13
![Page 14: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/14.jpg)
XPUsing the font Shortcut Property• The font property is a shortcut property, which
means you can use it to specify more than one declaration at a time– font-style– font-weight– font-variant– font-size– line-height– margin– font-family
New Perspectives on Blended HTML, XHTML, and CSS 14
![Page 15: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/15.jpg)
XPUsing Color on a Web Page• In HTML code, you can refer to colors in several
ways—by name, RGB value, hexadecimal value, or “short hex” value
• RGB values are based on the intensity of red, green, and blue
• The hexadecimal values for colors represent the intensity of red, green, and blue
New Perspectives on Blended HTML, XHTML, and CSS 15
![Page 16: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/16.jpg)
XPUsing Color on a Web Page
New Perspectives on Blended HTML, XHTML, and CSS 16
![Page 17: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/17.jpg)
XPUsing the color Property• The CSS color property changes the foreground
color, which determines the color of text
New Perspectives on Blended HTML, XHTML, and CSS 17
![Page 18: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/18.jpg)
XPSetting the background-color Property• You use the background-color property to
change the background color of an element
New Perspectives on Blended HTML, XHTML, and CSS 18
![Page 19: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/19.jpg)
XPGrouping Selectors• If you want more than one HTML selector to
have similar declarations, you do not have to create a separate rule for each selector
New Perspectives on Blended HTML, XHTML, and CSS 19
![Page 20: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/20.jpg)
XPUsing Contextual (Descendent) Selectors• In HTML, you can nest tags to apply multiple
formatting features to the same text• You can nest CSS code by specifying a selector
within another selector, which is called a contextual selector
New Perspectives on Blended HTML, XHTML, and CSS 20
![Page 21: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/21.jpg)
XPUsing the display Property• The display property is one of the CSS
classification properties
New Perspectives on Blended HTML, XHTML, and CSS 21
![Page 22: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/22.jpg)
XPCreating and Applying an Inline Style• To create and apply an inline style, you place the
style code within the tag in the HTML document where you wish the style to take effect
New Perspectives on Blended HTML, XHTML, and CSS 22
![Page 23: Introducing Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062323/56815b64550346895dc951c5/html5/thumbnails/23.jpg)
XPCreating and Applying an Inline Style
New Perspectives on Blended HTML, XHTML, and CSS 23