cascading style sheetspeople.uncw.edu/mferner/csc465/slides/css.pdfcascading style sheets inline...
TRANSCRIPT
Cascading Style Sheets
Overview ofCascading Style Sheets (CSS)
See what is possible with CSS:◦ Visit http://www.csszengarden.com
2
Types of Cascading Style Sheets
Inline Styles
Embedded Styles
External Styles
Imported Styles
3
Cascading Style Sheets
Inline Styles◦ body section◦ HTML style attribute◦ apply only to the specific element
Embedded Styles◦ head section◦ HTML style element◦ apply to the entire web page document
External Styles◦ Separate text file with .css file extension◦ Associate with a HTML link element in the head section of a web page
4
CSS SyntaxStyle sheets are composed of "Rules" that describe the styling to be applied.
Each Rule contains a Selector and a Declaration
5
The Selector is the HTML element to which the formatting will be applied
Common Formatting CSS Properties
Common CSS Properties:◦ background-color ◦ color◦ font-family ◦ font-size ◦ font-style◦ font-weight◦ line-height◦ margin◦ text-align◦ text-decoration◦ width
6
Using Color on Web Pages
Computer monitors display color as intensities of red, green, and blue light
RGB Color
The values of red, green, and blue vary from 0 to 255.
Hexadecimal numbers (base 16) represent these color values.
7
Hexadecimal Color Values
# is used to indicate a hexadecimal value
Hex value pairs range from 00 to FF
Three hex value pairs describe an RGB color
#000000 black #FFFFFF white
#FF0000 red #00FF00 green
#0000FF blue #CCCCCC grey
8
Web Color Palette
A collection of 216 colors
Display the most similar on the Mac and PCplatforms
Hex values: 00, 33, 66, 99, CC, FF
9
Color Names
Many colors have names recognized by most browsers
10
A Third Way to express color rgb(R, G, B)
Decimal values 0-255 are used to represent the saturation of red, green, and blue
11
External Style Sheets
CSS style rules are contained in a text file separate from the HTML documents.
The External Style Sheet text file: ◦ extension ".css"
◦ contains only style rules
◦ does not contain any HTML tags
12
body {background-color:#E6E6FA;color:#000000;font-family:Arial, sans-serif;font-size:90%; }
h2 {color: #003366; font-size: 16px;font-weight: bold; }
External Style Sheets
◦ Multiple web pages can associate with the same external style sheet file.
13
site.css
index.html
clients.html
about.html
Etc…
link Element
A stand-alone tag placed in the header section
Purpose: associates the external style sheet file with the web page.
Example:
14
<link rel="stylesheet" type= "text/css" href="color.css">
Multiple Style Sheets<head>
<title>Town Hall</title>
<link rel="stylesheet" type="text/css" href="../styles/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="../styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="../styles/print.css" media="print">
</head>
CSS Embedded StylesConfigured in the header section of a web page.
Use the HTML <style> element
Apply to the entire web page document
Style declarations are contained between the opening and closing <style> tags
Example: Configure a web page with white text on a black background
16
<style>body { background-color: #000000;
color: #FFFFFF;}</style>
Configuring Text with CSS
CSS properties for configuring text:◦ font-weight: bold
◦ Configures the boldness of text
◦ font-style: italic◦ Configures text to an italic style
◦ font-size◦ Configures the size of the text
◦ font-family◦ Configures the font typeface of the text
17
The font-size PropertyAccessibility Recommendation: Use em or percentage font sizes – these can be easily enlarged in all browsers by users
18
The font-family Property
Not everyone has the same fonts installed in their computer
Configure a list of fonts and include a generic family name
p {font-family: Arial, Verdana, sans-serif;}
19
span Element
Purpose: ◦ configure a specially formatted area displayed in-line with other
elements, such as within a paragraph.
It is similar to the div element because it is a generic way to configure a section on a page◦ span is an inline element: there is no additional empty space
above or below a span
◦ div is a block element: there is empty space above and below
20
span Element Example CSS:
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
HTML:
<p>Your needs are important to us at
<span class="companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>
21
Centering Page Content with CSS
#container { margin-left: auto;
margin-right: auto;
width:80%; }
22
CommentsComments are used in all programming languages to provide information to anyone reading the code
HTML comments don’t show in the Browser but can provide details about the code.
HTML comments look like:<!-- -->
CSS comments look like:/* */
All HTML and CSS pages should have a comment explaining the purpose of the page, the author, and any other helpful comments.
23
The “Cascade”
24
The Box Model
Content◦ Text & web page elements
in the container
Padding◦ Area between the content
and the border
Border◦ Between the padding
and the margin
Margin◦ Determines the empty
space between the element and adjacent elements
25
Configure Margin with CSS◦ The margin property
◦ Related properties:
◦ margin-top, margin-right, margin-left, margin-bottom
◦ Configures empty space between the element and adjacent elements
◦ Examples
h1 { margin: 0; }h1 { margin: 20px 10px; }h1 { margin: 10px 30px 20px; }h1 { margin: 20px 30px 0 30px; }
Configure Padding with CSS◦ The padding property
◦ Related properties:
◦ padding-top, padding-right, padding-left, padding-bottom
◦ Configures empty space between the content of the HTML element (such as text) and the border
◦ Syntax example
h1 { padding: 0; }h1 { padding : 20px 10px; }h1 { padding : 10px 30px 20px; }h1 { padding : 20px 30px 0 30px; }
Box model in Action
28
Normal Flow
Browser displays elements in the order they are coded in the Web page document<div class="div1" >
This is the first box.
</div>
<div class="div2" >
This is the second box.
</div>
. div1 { width: 2 00px; height: 2 00px;
background-color: #D1ECFF;
border: 3px dashed #000000;
padding: 5px; }
. div2 { width: 100px; height: 100px;
background-color: #ffffff;
border: 3px ridge #000000;
margin: 10px;
padding: 5px; }
Normal Flow
If elements are nested:<div class=" div1" >
This is the outer box.
<div class=" div2" >
This is the inner box.
</div>
</div>
With the same styles applied:. div1 { width: 2 00px; height: 200px;
background-color: #D1ECFF;
border: 3px dashed #000000;
padding: 5px;
}
. div2 { width: 100px; height: background-color: #ffffff;border: 3px ridge #000000;margin: 10px;padding: 5px; }
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p { font-family:Arial,sans-serif;
}
#yls {float:right;
margin: 0 0 5px 5px;
border: solid;
}
float Property
Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property.
Use float: left; or float: right;
31
clear Property
Useful to “clear” or terminate a float
Values are:◦ clear: left;
◦ clear: right;
◦ clear: both
The h2 text is displayed in normal
flow.
clear: left; was applied to the h2. Now
the h2 text displays AFTER the floated
image.
overflow PropertyIntended to configure the display of elements on a Web page.
However, it is useful to “clear” or terminate a float before the end of a container element
Values are auto, hidden, and scroll
The background
does not extend as far
as you’d expect.
overflow: auto;
was applied to the div that contains the image and
paragraph. Now the background extends and
the h2 text displays AFTER
the floated image.
W3C CSS Validation
http://jigsaw.w3.org/css-validator/
34