Configuring Color and Text with CSS
Download
Report
Transcript Configuring Color and Text with CSS
Chapter 3
CONFIGURING
COLOR AND TEXT
WITH CSS
Cascading
Style Sheets
(CSS)
• Used to configure text, color, and
page layout.
• Launched in 1996
• Developed by W3C
CSS Zen Garden Web Page Ex
Advantages
of CSS
• More options for typography and
page layout
• Style is separate from structure
• Styles can be stored
• Documents are smaller
• Site maintenance is easier
Configuring
Cascading
Style Sheets
1. Inline Styles – coded in the body.
2. Embedded Styles – defined
within a style element in the head
section.
3. External Styles – coded in a
separate text file.
4. Imported Styles – similar to
external, importing into sheet using
@import directive.
CSS
Selectors
and
Declarations
• Selector – can be an HTML element
name, a class name, or an id name.
• Declaration – indicates the CSS
property you are setting and the value
you are assigning to the property.
BackgroundColor
Property
• Configures the background
color of an element.
body { background-color: yellow }
Color
Property
• Configures the color of an
element.
body { color: blue }
Configure
Background
and Text
Color
• Can configure more than one
property for a selector
• Use semicolon (;) to separate
body { color: blue; background-color: yellow; }
Spaces
Optional
body { color: blue; background-color; yellow; }
body{color:blue;background-color:yellow}
body {
color: blue;
background-color; yellow;
}
Hexadecimal
Color Values
• Uses RGB color (red, green, blue)
• Values of red, green, blue vary from
0 to 255
• # is used to indicate a hexadecimal
value
• Hex value pairs range from 00 to FF
CSS Color
Syntax
CSS Syntax
Color Type
p { color: red; }
Color name
Hexadecimal color value
Shorthand hexadecimal
Decimal color value
HSL color values
p { color: #FF0000; }
p { color: #F00; }
p { color: rgb (255, 0, 0; }
p { color: hsl (0, 100%, 50%; }
Inline
CSS
• Inline styles are coded with a style
attribute
• <h1 style=“color:#cc0000”>Heading text is
red</h1>
• <h1 style=“color:#cc0000;backgroundcolor:#cccccc”>This is displayed as a red
heading on a gray background</h1>
Hands-On
Practice
3.1
1) Open to page 88
2) Open template.html from Ch 2
3) Modify with blue text from the
book
4) Save first as inline2.html and
second as inline3.html
5) Test page
Solution
3.1
Embedded
CSS
• Placed within a <style> element
• Style element nested in <head>
element
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Embedded Styles</title>
<meta charset=“utf-8”>
<style>
body { background-color:
#ccffff; color: #000033; }
</style>
</head>
<body>
<h1>Embedded CSS</h1>
<p>This page uses embedded styles.</p>
</body>
</html>
Hands-On
Practice
3.2
1) Open to page 90
2) Open starter.html from Ch 3
3) Modify with text from the
book
4) Save as embedded.html
5) Test page
Solution
3.2
FontFamily
Property
• Configures type fontface.
p { font-family: Arial, Helvetica, sans-serif; }
FontSize
Property
• Sets the size of the font
body { font-size: 1em; }
Font-weight
Property
• Configures the boldness of
the text
body { font-weight: bold; }
Font-style
Property
• Configures text displayed
in italics.
body { font-style: italic; }
Line-height
Property
• Configures the height of the line
of text
(use the value 200% to appear
double-spaced)
body { line-height: 200%; }
Text-align
Property
• Configures alignment of text
within a block display element
body { text-align: center; }
Text-indent
Property
• Configures the indentation of the
first line of text
body { text-indent: 5em; }
Textdecoration
Property
• Modifies the appearance of text
with an underline, overline, or
line-through
body { text-decoration: none; }
Texttransform
Property
• Configures the capitalization of
text
body { text-transform: uppercase; }
White-space
Property
• Specifies the way the
whitespace is displayed by
the browser
body { white-space: nowrap; }
Text-shadow
Property
• Configures a drop shadow on text
body { text-shadow: 3px 3px 5px #666; }
Vertical Offset
Color Value
Horizontal
+# shadow below
Offset
Blur Radius
-#
shadow
above
+# shadow on right
(optional)
-# shadow on left
Higher value = more blur
Hands-On 1) Open to page 97
Practice 2) Open embedded.html from Ch 3
3.3 3) Modify with text from the book
4) Save as embedded1.html
5) Test page
Solution
3.3
CSS
Selectors
CSS style rules can be configured
for an:
– HTML element selector
– Class selector
– Id selector
– Descendant selector
Using CSS
with Class
• Apply a CSS rule to a certain "class" of
elements on a web page
• Does not associate the style to a
specific HTML element
• Use .classname
Placed in the <Style> tags:
.feature { color: #c70000; }
Placed within the <body> tags:
<li class=“feature”>Usability Studies</li>
Using CSS
with ID
• Apply a CSS rule to ONE element
on a web page.
• Use #idname
Placed in the <Style> tags:
#main { color: #333333; }
Placed in the <body> tags:
<div id=“main”>This sentence will be displayed
using styles configured in the main id.</div>
Hands-On 1) Open to page 101
Practice 2) Open embedded2.html from
Ch 3
3.4
3) Modify with text from the
book
4) Save as embedded3.html
5) Test page
Solution
3.4
Descendant
Selector
• Used to specify an element within
the context of its container
(parent) element.
main p { color: #00ff00; }
Span
Element
• Defines a section on a web page
that is not physically separated
from other areas.
• Use if you need to format an area
that is contained within another
<p>, <blockquote>, <li>, or <div>
tag
<p><span class=“company”>Trillium Media Design</span>
will bring…
Hands-On
Practice
3.5
1) Open to page 103
2) Open embedded3.html from
Ch 3
3) Modify with text from the
book
4) Save as embedded4.html
5) Test page
Solution
3.5
Using
External
Style
Sheets
Link Element - associates an
external style sheet with a web
page.
Goes in the <head> tags:
<link rel=“stylesheet” href=“color.css”>
Hands-On
Practice
3.6
Part 1:
1) Open to page 104 -105
2) Open a NEW text editor page
3) Modify with text from the book
4) Save as color.css
Part 2:
1) Open template.html from Ch 2
2) Modify with text from the book
3) Save as external.html
4) Test page
Solution
3.6
Hands-On
Practice
3.7
1)Open to page 106
2)Follow directions in book
3)Test web page
Solution
3.7
ID Wrapper
• Centers the entire web page
• Configure a div element that
“wraps” the entire page content
#wrapper { width: 700px;
margin-left: auto;
margin-right: auto; }
<div id=“wrapper”>
…page content here…
</div>
Hands-On 1) Open to page 109
Practice 2)Create a NEW folder called
Trillium2
3.8
3) Copy index.html,
services.html, and
trillium.css into folder
4)Follow directions in book
Solution
3.8
The
“CASCADE”
• Rules of precedence
• Styles can be overridden when
needed
Hands-On
Practice
3.9
1) Open to page 119
2)Create a NEW folder named
mycascade
3)Follow directions from the
book
Solution
3.9
CSS
Validation
• W3C has a free Markup Validation
Service that checks your CSS code
for any syntax errors.
• http://jigsaw.w3.org/css-validator
Hands-On
Practice
3.10
1) Open to page 113
2) Open color.css from Ch 3
3) Follow directions from the
book