CSS
Determines how the elements in our XHTML documents are displayed and formatted
Inline Style
CSS code is placed directly into an XHTML element within the
<body> section of a web page
Internal Style Sheet
CSS code is placed into a separate, dedicated area within the
<head> section of a web page
External Style Sheet
CSS code is placed into a separate computer file and then linked to a
web page
Example of Inline Style Format
<h2 style="color:red;">CAUTION: Icy Road Conditions</h2>
Example of Internal Style Sheet Format
<style type="text/css"> h2 {color:red;} </style>
Example of an External Style Sheet Format
h2 {color:red;}
<head>
<link rel="stylesheet" type="text/css"
href="style.css" /></head>
Example of a CSS file extension
.css
Benefit of an External File Sheet
The real power of using an external style sheet is that multiple web
pages on our site can link to the same style sheet:
CSS Syntax w/ Example
Internal and external style sheets use this identical CSS syntax.
Internal style sheets must use the opening and closing <style>
tags to surround the CSS code, while external style sheets do not use
the <style> element.
p { color:red ;}
text-align
center, left, right, justify
text-decoration
underline, line-through, blink
color
blue, green, yellow, red, white, etc.
font-family
Arial, Verdana, "Times New Roman
font-size
large, 120%, 20px (pixels)
font-weight
bold, normal
font-style
italic, normal
Cascading
the established order of priority to resolve formatting conflicts
Cascading Order of Priority
Inline Style (highest priority) Internal Style Sheet
(second priority) External Style Sheet (third
priority) Web Browser default (only if not defined
elsewhere)
Colspan
an attribute that tells the browser the span of a row
rowspan
an attribute that tells the browser the span of a columnq
caption
an element similar to a heading, displays text above table and centered
width
defines width
background-color
sets background color and padding area of an element
border
to set the border between an element's padding and margin
padding
sets the space between an element's content and border
border-style
defines a paragraph of content with white space above and below the content
border-color
sets the color of a border of an element
border-width
sets the thickness of a border of an element
border-collapse
determines if table cells share a common border or maintain their own border