Tutorial 3
Introducing Cascading Style Sheets

Blended HTML and CSS
Fundamentals
3rd EDITION
Objectives 3.1
•
•
•
•
•

XP

Understand the advantages of using CSS
Define a style rule
Apply color using CSS
Create inte...
Objectives 3.2

XP

• Explore the five generic fonts
• Understand the importance of using Web-safe
fonts
• Change the size...
Introducing CSS

XP

• Cascading Style Sheets (CSS) is used to format
Web pages.
• CSS offers many advantages, including:
...
History of CSS

XP

• CSS1 (1996) enabled users to set font size; align text
center, left, or right; set body margins; and...
Defining a Style Rule

XP

• Using CSS, you can change how an HTML
element appears in browsers.
• A style rule is the comb...
The Structure of a Style Rule
selector {
property1: value1;
property2: value2;
property3: value3;
…
}

XP

h1 {
color: yel...
Defining Color

XP

• 16 basic color names are standard in CSS2; a
more extensive list of color names was
incorporated in ...
Implementing Inline Styles

XP

• An inline style rule is a style rule that is
embedded inside an HTML start tag.

New Per...
Embedded Style Sheets

XP

• The inline style method is discouraged because the
power of CSS is its ability to separate th...
Embedded Style Sheets

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

XP

11
External Style Sheets

XP

• If styles are to be used across several pages in
a Web site, it’s much more efficient to crea...
Background Color

XP

• Background color can be defined for most
elements.
• The background color for heading elements
ext...
Background Color

XP

• Setting the text color as black in a CSS rule
ensures the text will be displayed as black.

• Styl...
The link Element

XP

• After linking the external style sheet to the
Web page, the styles are applied to the
elements in ...
The link Element

XP

• The link element is placed in the head section
of the HTML code:
<link href = "url"
rel = "stylesh...
The link Element

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

XP

17
Defining a Style for Links

XP

• By default, links are underlined and blue.
• You can change the color of the links using...
Changing the Page Background

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

XP

19
Font Families

XP

• A font is the recognizable, distinct design of a
collection of characters in a particular typeface.
•...
Font Families

•
•
•
•
•
•

XP

Generic fonts are designed to be cross-platform.
The letters in a serif font have finishin...
Web-safe Fonts

XP

• Web-safe fonts are displayed reliably in most
Web browsers on most devices.

New Perspectives on Ble...
The font-family Property

XP

• The font-family property is used to
change the typeface of text:
font-family: Font1, Font2...
Setting the Font Size

XP

• The style used to change the font size:
font-size: size;
• The font size can be expressed in:...
Setting the Font Size

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

XP

25
Transforming Text

XP

• Many browsers can transform text to all
uppercase characters using the texttransform property.
• ...
Creating a Spread Heading

XP

• The letter-spacing property controls the
amount of white space between letters:
letter-sp...
Indenting Text

XP

• Use the text-indent property to indent
the first line of paragraph text:
text-indent: value;

New Pe...
Adjusting the Line Height

XP

• Single and double spacing are examples of line
height, which is the vertical spacing betw...
Using the font Shorthand Property

XP

• The font property is one of several CSS shorthand
properties and is used to set a...
Text Alignment

XP

• The text-align property is used to change
the alignment of the text.
• The property’s values are:
– ...
Text Alignment

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

XP

32
Removing the Underlines on LinksXP
• Hyperlinks are underlined.
• Underline is a text decoration and can be
removed using ...
Some Other font Properties

XP

• To set the font style to italic, use:
font-style: italic;
• To remove italic, use:
font-...
Validating the CSS Code

XP

• Navigate to http://jigsaw.w3.org/css-validator.
• Use either the ‘By file upload’ or ‘By di...
Upcoming SlideShare
Loading in …5
×

Introducing Cascading Style Sheets

752 views
620 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducing Cascading Style Sheets

  1. 1. Tutorial 3 Introducing Cascading Style Sheets Blended HTML and CSS Fundamentals 3rd EDITION
  2. 2. Objectives 3.1 • • • • • XP Understand the advantages of using CSS Define a style rule Apply color using CSS Create internal and external style sheets Change the appearance of a link using CSS New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 2
  3. 3. Objectives 3.2 XP • Explore the five generic fonts • Understand the importance of using Web-safe fonts • Change the size and decoration properties of text • Manipulate the letter spacing, word spacing, and line height of text • Set the first line indentation and change text to uppercase using CSS • Set alignment to center text horizontally New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 3
  4. 4. Introducing CSS XP • Cascading Style Sheets (CSS) is used to format Web pages. • CSS offers many advantages, including: – greater consistency in your Web page – easily modified code – more flexible formatting New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 4
  5. 5. History of CSS XP • CSS1 (1996) enabled users to set font size; align text center, left, or right; set body margins; and apply background and foreground colors to page elements. • CSS2 (1998) included features such as design styles for different output devices such as print media and aural devices, and controlling the appearance and behavior of browser features. • CSS3 (2005) includes text effects such as drop shadows and Web fonts, semitransparent colors, box outlines, and rotating page elements. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 5
  6. 6. Defining a Style Rule XP • Using CSS, you can change how an HTML element appears in browsers. • A style rule is the combination of a selector, a property, and a value. • The property is the name of a specific feature. • The property value provides a setting for the associated feature. • The selector identifies the element to which you are applying a style. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 6
  7. 7. The Structure of a Style Rule selector { property1: value1; property2: value2; property3: value3; … } XP h1 { color: yellow; text-align: center; } • A style sheet is a collection of one or more style rules, either within an HTML document or in a separate CSS document. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 7
  8. 8. Defining Color XP • 16 basic color names are standard in CSS2; a more extensive list of color names was incorporated in CSS3. color: color-value; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 8
  9. 9. Implementing Inline Styles XP • An inline style rule is a style rule that is embedded inside an HTML start tag. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 9
  10. 10. Embedded Style Sheets XP • The inline style method is discouraged because the power of CSS is its ability to separate the presentation (styles) from the content. • An embedded style sheet is a set of style rules contained between the <style> start tag and the </style> end tag in the head section of an HTML document: <style type = "text/css"> style rules </style> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 10
  11. 11. Embedded Style Sheets New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition XP 11
  12. 12. External Style Sheets XP • If styles are to be used across several pages in a Web site, it’s much more efficient to create a separate document that contains the styles, known as an external style sheet. • Then you should use the link element to link the external style sheet to the Web pages. • Comments should be used in style sheets to describe information about the style and to identify its sections. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 12
  13. 13. Background Color XP • Background color can be defined for most elements. • The background color for heading elements extends across the Web browser window. • The background color can be defined as background-color: color_value; • The color value could be the CSS color name, the hex code, or the RGB triplet. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 13
  14. 14. Background Color XP • Setting the text color as black in a CSS rule ensures the text will be displayed as black. • Style rules are added to the xxx.css style sheet and then this file is linked to the index.htm Web page. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 14
  15. 15. The link Element XP • After linking the external style sheet to the Web page, the styles are applied to the elements in the Web page. • One style sheet can be linked to many Web pages. • More than one style sheet can be linked to the Web page. • The link element is used to link an external style sheet to a Web page. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 15
  16. 16. The link Element XP • The link element is placed in the head section of the HTML code: <link href = "url" rel = "stylesheet" type = "text/css" /> • url refers to the URL of the external style sheet file. • rel = "stylesheet" identifies this link item as a style sheet. • type = "text/css" identifies it as a CSS text file. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 16
  17. 17. The link Element New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition XP 17
  18. 18. Defining a Style for Links XP • By default, links are underlined and blue. • You can change the color of the links using the color property. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 18
  19. 19. Changing the Page Background New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition XP 19
  20. 20. Font Families XP • A font is the recognizable, distinct design of a collection of characters in a particular typeface. • A font family is a set of fonts that have similar characteristics. • A generic font attempts to duplicate as many features of a specific font as possible. • There are five generic fonts used in Web page design: serif, sans-serif, monospace, cursive, and fantasy. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 20
  21. 21. Font Families • • • • • • XP Generic fonts are designed to be cross-platform. The letters in a serif font have finishing strokes. A sans-serif font lacks finishing strokes. A monospace font has a fixed letter width. A fantasy font is artistic and decorative. Cursive fonts resemble handwritten letters. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 21
  22. 22. Web-safe Fonts XP • Web-safe fonts are displayed reliably in most Web browsers on most devices. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 22
  23. 23. The font-family Property XP • The font-family property is used to change the typeface of text: font-family: Font1, Font2, . . . , GenericFont; • The most common font-family style properties: New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 23
  24. 24. Setting the Font Size XP • The style used to change the font size: font-size: size; • The font size can be expressed in: – – – – – – – – – centimeters (cm) inches (in) millimeters (mm) points (pt) picas (pc) pixels (px) x-height (ex) em percentages absolute units relative units New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 24
  25. 25. Setting the Font Size New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition XP 25
  26. 26. Transforming Text XP • Many browsers can transform text to all uppercase characters using the texttransform property. • The property’s values are: – capitalize (Text Appears With The First Letter Of Each Word Capitalized) – lowercase (text appears in lowercase) – uppercase (TEXT APPEARS IN ALL CAPS) – none (removes any of the preceding values) New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 26
  27. 27. Creating a Spread Heading XP • The letter-spacing property controls the amount of white space between letters: letter-spacing: letter_spacing_value; • The word-spacing property controls the amount of white space between words: word-spacing: word_spacing_value; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 27
  28. 28. Indenting Text XP • Use the text-indent property to indent the first line of paragraph text: text-indent: value; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 28
  29. 29. Adjusting the Line Height XP • Single and double spacing are examples of line height, which is the vertical spacing between lines of text. • By default, Web browsers use 1.0em or 1.2em line height. • The style used is: line-height: value; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 29
  30. 30. Using the font Shorthand Property XP • The font property is one of several CSS shorthand properties and is used to set a related group of properties in one declaration. • Values for the font properties must be listed in the following order: font style, font weight, font variant, font size, font family. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 30
  31. 31. Text Alignment XP • The text-align property is used to change the alignment of the text. • The property’s values are: – left – Each line of text is flush with the left margin. – right – Each line of text is flush with the right margin. – center – Each line of text is centered horizontally. – justify – Each line of text is flush with the left and right margins. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 31
  32. 32. Text Alignment New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition XP 32
  33. 33. Removing the Underlines on LinksXP • Hyperlinks are underlined. • Underline is a text decoration and can be removed using the text-decoration property: text-decoration: value; • The property’s values are none, underline, or line-through. • The style to remove underlines on links: a { text-decoration: none; } New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 33
  34. 34. Some Other font Properties XP • To set the font style to italic, use: font-style: italic; • To remove italic, use: font-style: none; • To set the font weight to bold, use: font-weight: bold; • To set the font weight to light, use: font-weight: light; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 34
  35. 35. Validating the CSS Code XP • Navigate to http://jigsaw.w3.org/css-validator. • Use either the ‘By file upload’ or ‘By direct input’ method for validating a document. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 35

×