Lecture 5
-
Upload
uccwebcourses -
Category
Documents
-
view
324 -
download
0
Transcript of Lecture 5
![Page 1: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/1.jpg)
Cascading Style Sheets
UCC Spring 2010
Ryan Dinwiddie
![Page 2: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/2.jpg)
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>
![Page 3: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/3.jpg)
External Style Sheet
Separate text file (.css)e.g. styles.css
p {
font-family: Arial, Sans-serif;
}
![Page 4: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/4.jpg)
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>
![Page 5: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/5.jpg)
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”
![Page 6: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/6.jpg)
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
![Page 7: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/7.jpg)
Internal Style Sheets
![Page 8: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/8.jpg)
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
![Page 9: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/9.jpg)
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
![Page 10: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/10.jpg)
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
![Page 11: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/11.jpg)
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
![Page 12: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/12.jpg)
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
![Page 13: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/13.jpg)
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
![Page 14: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/14.jpg)
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
![Page 15: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/15.jpg)
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
![Page 16: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/16.jpg)
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
![Page 17: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/17.jpg)
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
![Page 18: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/18.jpg)
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
![Page 19: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/19.jpg)
Cascading Order
The cascading order of precedence for styles, starting with the least important to the most important, is as follows:1. Browser default2. External style sheets3. Internal style sheets4. Inline styles
![Page 20: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/20.jpg)
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
![Page 21: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/21.jpg)
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
![Page 22: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/22.jpg)
Foreground and Background Color The foreground color that is applied to an
element’s text appears on top of an element’s background color
![Page 23: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/23.jpg)
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
![Page 24: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/24.jpg)
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)
![Page 25: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/25.jpg)
Background Images
![Page 26: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/26.jpg)
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
![Page 27: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/27.jpg)
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
![Page 28: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/28.jpg)
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
![Page 29: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/29.jpg)
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
![Page 30: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/30.jpg)
CSS1 Text Properties
![Page 31: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/31.jpg)
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
![Page 32: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/32.jpg)
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
![Page 33: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/33.jpg)
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
![Page 34: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/34.jpg)
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
![Page 35: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/35.jpg)
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
![Page 36: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/36.jpg)
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
![Page 37: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/37.jpg)
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
![Page 38: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/38.jpg)
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
![Page 39: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/39.jpg)
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
![Page 40: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/40.jpg)
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
![Page 41: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/41.jpg)
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
![Page 42: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/42.jpg)
Setting Font Properties
![Page 43: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/43.jpg)
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
![Page 44: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/44.jpg)
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
![Page 45: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/45.jpg)
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
![Page 46: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/46.jpg)
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
![Page 47: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/47.jpg)
Font Size
![Page 48: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/48.jpg)
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
![Page 49: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/49.jpg)
The font Shorthand Property
Using the font shorthand property, you can set values for all of the font properties in a single declaration
![Page 50: Lecture 5](https://reader036.fdocuments.in/reader036/viewer/2022062513/55635a99d8b42aed538b54db/html5/thumbnails/50.jpg)
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)