HTML, CSS, and XML Tutorial 3 Designing a Web Page with CSS.
-
Upload
ronald-bishop -
Category
Documents
-
view
265 -
download
2
Transcript of HTML, CSS, and XML Tutorial 3 Designing a Web Page with CSS.
XPXPXPXPObjectives• Explore the history and theory of CSS• Define a style rule• Study style precedence and inheritance• Apply color using CSS• Explore CSS3 color extensions• Use contextual selectors
New Perspectives on HTML, CSS, and XML, 4th edition 2
XPXPXPXPObjectives• Work with attribute selectors• Apply text and font styles• Install a Web font• Define list styles• Use pseudo-classes and pseudo-elements• Create a rollover effect
New Perspectives on HTML, CSS, and XML, 4th edition 3
XPXPXPXP
New Perspectives on HTML, CSS, and XML, 4th edition 5
Introducing CSS• To render a document, the device displaying the page
needs a style sheet that specifies the appearance of each page element
• The style sheet language used on the Web is the Cascading Style Sheets language, also known as CSS– Versions include CSS1, CSS2, CSS 2.1, and CSS3
• With CSS, as with HTML, Web page designers need to be aware of compatibility issues that arise not just among different versions of the language, but also among different versions of the same browser
XPXPXPXPDefining a Style Rule• The general syntax of a CSS style rule isselector {
property1: value1;property2: value2;property3: value3;
...}
New Perspectives on HTML, CSS, and XML, 4th edition 6
XPXPXPXPApplying a Style Sheet• The design you apply to a Web site is usually a
combination of several style sheets
New Perspectives on HTML, CSS, and XML, 4th edition 7
XPXPXPXPUser-Defined Styles• Almost all browsers allow users to modify the
default settings of the internal style sheet
New Perspectives on HTML, CSS, and XML, 4th edition 8
XPXPXPXPEmbedded Style Sheets• Another type of style sheet created by a Web page
author is an embedded style sheet, in which the styles are inserted directly within the head element of an HTML document using the style element
<style type=”text/css”>styles
</style>• The exact order in which external style sheets and
embedded style sheets are processed by the browser depends on the order in which they are listed within the HTML file
New Perspectives on HTML, CSS, and XML, 4th edition 10
XPXPXPXPInline Styles• The very last styles to be interpreted by the
browser are inline styles, which are styles applied directly to specific elements using the style attribute
<element style=”style rules”> … </element>• It is clear exactly what page element is being
formatted• Not recommended in most cases and
considered inefficientNew Perspectives on HTML, CSS, and XML, 4th edition 11
XPXPXPXPExploring the Style Cascade• As a general rule of thumb, all other things
being equal, the more specific style is applied instead of the more general
• An additional factor in applying a style sheet is that properties are passed from a parent element to its children in a process known as style inheritance
body {color: blue;}h1 {text-align: center;}
New Perspectives on HTML, CSS, and XML, 4th edition 12
XPXPXPXPExploring the Style Cascade• If you need browsers to enforce a style, you
can append the !important keyword to the style property, using the syntax
property: value !important;• The !important keyword is often necessary
for visually impaired users who require their pages rendered with large, clear text and highly contrasting colors
New Perspectives on HTML, CSS, and XML, 4th edition 13
XPXPXPXPDefining Color in CSS• A color value is a numerical expression that
describes the properties of a color• CSS represents these intensities
mathematically as a set of numbers called an RGB triplet, which has the format
rgb(red, green, blue)• CSS also allows RGB values to be entered as
hexadecimal numbers#redgreenblue
New Perspectives on HTML, CSS, and XML, 4th edition 15
XPXPXPXPSetting Foreground and Background Color• To set the background color of an element, use
the propertybackground-color: color;
where color is a color name or a color value.• To set the foreground or text color of an
element, use the following property:color: color;
New Perspectives on HTML, CSS, and XML, 4th edition 17
XPXPXPXPEnhancements to Color in CSS3• CSS3 also supports the Hue Saturation
Lightness (HSL) model that describes colors based on hue, saturation, and lightness
hsl(hue, saturation, lightness)
New Perspectives on HTML, CSS, and XML, 4th edition 18
XPXPXPXPEnhancements to Color in CSS3• CSS3 also allows page designers to augment
RGB and HSL color values by specifying a color’s opacity. Opacity defines how much of the colors below the surface of the current object show through to affect its appearance
rgba(red, green, blue, opacity)
hsla(hue, saturation, lightness, opacity)
New Perspectives on HTML, CSS, and XML, 4th edition 20
XPXPXPXPContextual Selectors• Web pages are structured documents in which
elements are nested within other elements, forming a hierarchy of elements
• To create styles that take advantage of this tree structure, CSS allows you to create contextual selectors whose values represent the locations of elements within the hierarchy– Parent elements– Child elements– Sibling elements– Descendant elements
New Perspectives on HTML, CSS, and XML, 4th edition 23
XPXPXPXPAttribute Selectors• Selectors also can be defined based on
attributes and attribute values associated with elements
• Two attributes, id and class, are often key in targeting styles to a specific element or group of elements
New Perspectives on HTML, CSS, and XML, 4th edition 25
XPXPXPXPStyling Web Page Text• The default font used by most browsers is
Times New Roman, but you can specify a different font for any page element using the property
font-family: fonts;• fonts is a comma-separated list of specific or
generic font names
New Perspectives on HTML, CSS, and XML, 4th edition 27
XPXPXPXPSetting Font Face and Sizes• To define a font face, use the style property
font-family: fonts;where fonts is a comma-separated list of fonts
that the browser can use with the element. List specific fonts first and complete the list with a generic font.• To set a font size, use the style property
font-size: size;where size is a CSS unit of length in either
relative or absolute units.
New Perspectives on HTML, CSS, and XML, 4th edition 29
XPXPXPXPSetting Font Face and Sizes• To set kerning (the space between letters), use the
following style property:letter-spacing: size;
• To set tracking (the space between words), use the following style property:
word-spacing: size;
New Perspectives on HTML, CSS, and XML, 4th edition 30
XPXPXPXPSetting Font and Text Appearance• To specify the font style, usefont-style: type;
where type is normal, italic, or oblique.• To specify the font weight, usefont-weight: type;
where type is normal, bold, bolder, light, lighter, or a font weight value.
New Perspectives on HTML, CSS, and XML, 4th edition 32
XPXPXPXPSetting Font and Text Appearance• To specify a text decoration, usetext-decoration: type;
where type is none, underline, overline, or line-through.• To transform text, usetext-transform: type;
where type is capitalize, uppercase, lowercase, or none.• To display a font variant of text, usefont-variant: type;
where type is normal or small-caps.
New Perspectives on HTML, CSS, and XML, 4th edition 33
XPXPXPXPCombining All Text Formatting in a Single Style• You can combine most of the text and font
styles into a single property using the shortcut font property
• font: font-style font-variant font-weight font-size/line-height font-family;
New Perspectives on HTML, CSS, and XML, 4th edition 35
XPXPXPXPCombining All Text Formatting in a Single Style
New Perspectives on HTML, CSS, and XML, 4th edition 36
XPXPXPXPDesigning Styles for Lists• To change the marker displayed in ordered or
unordered lists, you apply the stylelist-style-type: type;
New Perspectives on HTML, CSS, and XML, 4th edition 40
XPXPXPXPDesigning a List• To define the appearance of the list marker, use the stylelist-style-type: type;
where type is disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, or none.• To insert a graphic image as a list marker, use the stylelist-style-image: url(url);
where url is the URL of the graphic image file.
New Perspectives on HTML, CSS, and XML, 4th edition 41
XPXPXPXPDesigning a List• To set the position of list markers, use the stylelist-style-position: position;
where position is inside or outside.• To define all of the list style properties in a single
style, use the following style:list-style: type url(url) position;• To set the indentation of a list, apply the stylepadding-left: size;
where size is the length that the list should be indented.
New Perspectives on HTML, CSS, and XML, 4th edition 42
XPXPXPXPUsing Pseudo-Classes and Pseudo-Elements• A pseudo-class is a classification of an element
based on its current status, position, or use in the documentselector:pseudo-class {styles;}
New Perspectives on HTML, CSS, and XML, 4th edition 43
XPXPXPXPUsing Pseudo-Classes and Pseudo-Elements
New Perspectives on HTML, CSS, and XML, 4th edition 44