XP Formatting Text with HTML and CSS Lesson 6
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
XP
Formatting Text with HTML and CSS
Lesson 6
XP
Character-Level Tags
• Block-level tags control blocks of text such as headings, paragraphs, and lists – <p>, <h1>, <ul>
• Character-level tags affect individual sections of text – <b>, <strong>, <i>, <em>
2
XP
Logical vs. Physical Styles
• There are two types of character-level tags:
• Logical Styles: describe the meaning of the text within the
tag, not how it should be presented
Examples: <em>…</em>, <strong>…</strong>,
<code>…</code>
<p> The anteater is the <em>strangest</em> animal.</p>
• Physical Styles: changes the actual presentation of the textExamples: <b>…</b>, <i>…</i>, <u>…</u>
<p> Your homework is due at the <b>beginning</b> of class.</p>
3
XP
Preformatted Text
<pre>
…text goes here
Line breaks and formatting are preserved
</pre>
– Usually displayed in mono-spaced font
– Block-level tag
4
XP
Preformatted Text
<pre>Mary
had a
little
lamb</pre>
5
XP
<hr />
• Horizontal rule tag
• Stand-alone tag
• Attributes include: – size – height of the rule
<hr size=“10” />
– width – width of the rule in percent or pixels<hr width=“85%” />
– align – alignment of the rule<hr align=“right” />
– noshade – removes the shadow<hr noshade=“noshade” />
6
XP
<br />
…text goes here <br />This starts on a new line….
– Used to force a new line when the text on the web page document is displayed by a browser.
– Stand-alone tag
7
XP
<br />
<br />
Line break
8
XP
<address>
• HTML supports the address tag to indicate contact information. Most browsers display an address element in an italicized font, and some right-justify or indent addresses
9
XP
<blockquote>
<blockquote>
…text goes here
</blockquote>
– Used to indent a block of text for special emphasis.
– Text is indented from the left and right
10
XP
blockquote
<blockquote>
11
XP
HTML: Text Alignment
• align attribute
– Values are: left, right, center, justify
<p align=“center”>This text will be centered on
the page.</p>
• <div> … </div> used to align blocks of tags
<div align=“right”>
<p>All of this text</p>
<p>Will be right aligned</p>
</div>
12
XP
Special Characters
Display
special
characters
such as
quotes,
copyright
symbol, etc.
13
XP
HTML: Fonts and Font Sizes
<font> … </font>
• To change the font size (include the size attribute. Values are 1 to 7 or a relative value using + or -)
<p><font size=“4”>Change the font size</font></p>
• To change the font face (include the face attribute. Values are a set of font names)
<p><font face=“Arial, sans-serif”>This text
will be formatted in Arial or some kind of
sans-serif font.</font></p>
14
STYLE SHEETS
15
XP
Introduction to Style Sheets
• Style sheets are the preferred way to control the way web pages are formatted and displayed
• Cascading Style Sheets (CSS) is a style sheet language used on the Web
– CSS specifications are maintained by the World Wide Web Consortium (W3C)
– Several versions of CSS exist: CSS1, CSS2, CSS 2.1, and CSS3
16
XP
CSS Advantages
Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document and linked to from the web page
Potentially smaller documents
Easier site maintenance
17
XP
18
Style Rule Syntax
h1 { color : purple; }
Selector Declaration
property value
All <h1> will be purple.
XP
Understanding the ‘Cascade’
• Cascading refers to which style rules the browser follows when it encounters conflicting CSS information
– Conflicts can occur when using multiple style sheets (such as inline and external)
• In general, more specific styles override more general styles (order of precedence)
19
XP
Applying a Style Sheet
• There are 3 ways to apply a style sheet to a web document:
– Inline
– Embedded
– External
20
XP
Inline
• Changes the style within an individual XHTML tag
• The style rules are placed directly within a tag in the body of the page using the style attribute
• Overrides embedded and external style sheets
21
XP
Using Inline Styles
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
22
<h2 style=“color: red; font-style: italic”>Style Sheets
Can Save a Lot of Work</h2>
<p>Styles sheets define HOW HTML elements are to be
displayed, just like the font tag and the color attribute
in HTML 3.2. Styles are normally saved in external .css
files. External style sheets enable you to change the
appearance and layout of all the pages in your Web, just
by editing one single CSS document!</p>
Inline style code
XP
Embedded
• Changes the style of one web page
• Style sheet rules are placed in the head of a document using the <style> tag
• Overrides external style sheets
23
24
Embedded style
XP
25
Using an External Style Sheet
• An external style sheet is a text file that contains style declarations.
– It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site
• External style sheets have a .css extension
• To apply the style sheet to the page, use the <link> tag as
follows:<head>
<link rel=“stylesheet” type=“text/css”
href=“style.css”>
</head>
An external style sheet
XP
CSS Selectors
• A selector defines to what a particular style should be applied
• Most common selectors:
– (X)HTML element
– class
– id
27
XP
28
Element Selectors
• Element Selectors refer to a specific tag(s). In the example below, the text color for all paragraphs will be blue.
p {color: blue;}
• If you wish to specify more than one property, you must separate each property with a semicolon. In the example below, the text color for all paragraphs will be blue and the font size will be 11 pixels.
p {color: blue; font-size: 11px;}
XP
29
Grouping Selectors
To apply a property to multiple tags, separate tags
with commas. In the example below, the text for all
p, h1, and h3 elements will be red.
p, h1, h3 {color: red;}
XP
30
Contextual Selectors
Contextual selectors are used to apply styles to elements only when they are nested within other specific elements. In the example below, the style only applies to ol elements that are nested within p elements:
p ol {color:blue;}
XP
31
Class Selectors (1)
• Class Selectors give you the ability to create groups and define style attributes for them.
• Class Selectors can be sub-groups of tags:h2.center {text-align: center;}
• Or groups that can be applied to any tag:.center {text-align: center;}
XP
32
Class Selectors (2)
• To apply the class style to an element, use the classattribute:
<h2 class=“center”>This heading will be centered on the page</h2>
<p class=“center”>This paragraph will be centered on the page.</p>
XP
33
ID Selectors
Used when you want to specify styles for one element in a style sheet.
#footer {font-size: small;}
To apply the style to an element, use the idattribute
<div id=“footer”>
Copyright 2006, Metro
</div>
Font Style Properties
34
XP
35
font-family: typeface;
• font-family: Arial, sans-serif;
• font-family: “Times New Roman”,
Georgia, serif;
Font families consist of a list of fonts for the browser to choose from.
The first available font (read from left to right) is chosen.
Font names consisting of more than one word must be enclosed in
double quotation marks.
XP
36
font-size: size;
• font-size: small;
• font-size: 85%;
• font-size: 12px;
Sizes can be a keyword, percentage or measure (pt, em, in, cm, px).
37
Various
font sizes
XP
38
font-style: style;
• font-style: italic;
• font-style: normal;
Valid values are italic or normal.
XP
39
font-variant: value;
• font-variant: normal;
• font-variant: small-caps;
Valid values are normal or small-caps.
XP
40
font-weight: weight;
• font-weight: bold;
• font-weight: normal;
Valid weights are lighter, bold, bolder or normal.
Text Style Properties
41
XP
42
line-height: length;
• line-height: 1.5;
• line-height: 90%;
Defines the space between lines of text
43
Line Height
XP
44
letter-spacing: value;
• letter-spacing: normal;
• letter-spacing: 0.1em;
• letter-spacing: -3px;
Increases/Decreases the white space between characters
XP
45
text-align: value;
• text-align: left;
• text-align: right;
• text-align: center;
XP
46
text-transform: value;
• text-transform: uppercase;
• text-transform: lowercase;
• text-transform: capitalize;
XP
47
text-decoration: type;
• text-decoration: none;
• text-decoration: underline;
• text-decoration: overline;
• text-decoration: line-through;
• text-decoration: blink;
Blink is not supported by most browsers.
XP
48
word-spacing: value;
• word-spacing: normal;
• word-spacing: 30px;
• word-spacing: -2px;
Increases/Decreases the white space between words
List Properties
49
XP
50
list-style-type: type;
• list-style-type: disc;
• list-style-type: circle;
• list-style-type: square;
• list-style-type: none;
• list-style-type: lower-alpha;
• list-style-type: upper-alpha;
• list-style-type: lower-roman;
• list-style-type: upper-roman;
• list-style-type: decimal;
<ul> lists
<ol> lists
XP
51
list-style-position: value;
• list-style-position: inside;
• list-style-position: outside;
Inside/Outside refers to the position of the marker with
respect to each item in the list.
XP
52
list-style-image: url(image);
• list-style-image:
url(../images/button.jpg);
• list-style-image: url(redpin.jpg);
This can be applied to unordered list items.
XP
53
list-style: image position type;
• list-style: url(button.jpg) inside;
• list-style: inside circle;
Allows you to combine list-style-image, list-style-position
and list-style-type into one element
XP
W3C CSS Validation
• http://jigsaw.w3.org/css-validator/
XP
CSS Guidelines – Getting Started
• Review the design of the page
– Configure global font and color properties for the body selector
– Identify typical elements (such as <h1>, <h3>, and so on) and declare style rules for these if needed.
– Identify page areas such as logo, navigation, footer, and so on –configure an appropriate class or id for each.
• Create one prototype page that contains most of the elements you plan to use and test.
– Revise your CSS as needed.
– Once your design is set – move styles to an external .css file
• Planning and testing are important activities when designing a Web site
XP
CSS Troubleshooting Tips
• Verify you are using the : and ; symbols in the right spots—they are easy to confuse.
• Check that you are not using = signs instead of : between each property and its value.
• Verify that the { and } symbols are properly placed
• Check the syntax of your selectors, their properties, and property values for correct usage.
• If part of your CSS works, and part doesn’t:– Review your CSS
– Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.
• Validate your CSS at http://jigsaw.w3.org/css-validator
XP
End of Presentation
57
Related Documents
