Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
149 views

CSS Overview

This document discusses CSS (Cascading Style Sheets) and its uses and syntax. It explains that CSS allows separation of HTML content from formatting or style. There are three levels of CSS with descending order of precedence - external, internal, and inline styles. External styles are best for defining styles across many pages, while internal and inline should be used minimally and for specific overrides. The document provides detailed examples and explanations of syntax for the three CSS types and recommends resources for learning CSS properties.

Uploaded by

Marcus Skookumchuck Vannini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
149 views

CSS Overview

This document discusses CSS (Cascading Style Sheets) and its uses and syntax. It explains that CSS allows separation of HTML content from formatting or style. There are three levels of CSS with descending order of precedence - external, internal, and inline styles. External styles are best for defining styles across many pages, while internal and inline should be used minimally and for specific overrides. The document provides detailed examples and explanations of syntax for the three CSS types and recommends resources for learning CSS properties.

Uploaded by

Marcus Skookumchuck Vannini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS: Cascading Style Sheets

I. Overview: Why Use CSS?


You should code your web pages structurally, logically, not visually.
Dont think, I want the text big, so Ill use <h1>. (visual coding)
Think instead, This is a heading: <h1>; this is a paragraph: <p>; this is a list: <ul> or <ol>
(structural or logical coding)
With CSS, you can separate the content and structural html code, from the formatting. Formatting
in CSS is called style.
II. Three Levels of CSS:
Cascading means there are three levels of CSS, and they have a particular order of preference.
Each level has its own pros and cons (advantages and disadvantages), and its best ways to be used.

1. External (also called linked):


A separate file that contains only CSS styles, no html.
File called a style sheet. File name: name.css (ex: style.css or stylenew.css)
A <link> tag in the <head> section of a web page links to the style sheet file.
External style sheet settings can be overridden by internal and inline CSS; external style sheets
are the last in the order of preference.
PROS: One style sheet can define style for many web pages or an entire website. Change settings
in the style sheet and many pages changed all at once. External style sheets are the best way to
use CSS, even though they are the last in the order of preference.
CONS: Most generally applied: will apply to all elements in all pages linked to the style sheet.
Last in order of preference means overridden by internal and inline styles.
2. Internal (also called embedded):
A style section in the <head> section of an individual web page.
Code is <style> </style> with all the CSS between open and close <style> tags.
Internal styles override external style sheets, but are overridden by local styles; they are second in
the order of preference.
PROS: All CSS is in one place in the web page: in <style> in the <head>. Good to use when one
page has different styles than all the other pages (which are linked to the external style sheet).
CONS: Internal is redundant, because you need to have it in every web page file. If you want to
change a style throughout a website, youll need to change the style in every <style> section of every
page You should try to avoid using internal CSS as much as possible!
3. In-line (also called local):
Inline CSS is embedded into individual html tags; they are local to a single tag.
Inline CSS is a blend of CSS and HTML: it uses html syntax to define css styles as an attribute of
the html tag.
Inline CSS is first in order of preference; it overrides both internal and external styles.
PROS: Good for when you want to apply a certain style to just one or a few tags. Gives you the
most specific local control.
CONS: Defeats the purpose of separating the content and logical code from the style, because the
CSS is all mixed up with the HTML code. You should try to avoid using inline CSS as much
as possible!
III. Syntax and How to Use CSS:
General Syntax:
selector {property:value; property:value; property:value;}
for example:
h1 {text-align:center; color:red; font-size:28px;}
Inline syntax is different (see blow)
1. External style sheet syntax:
Two parts to external CSS;
1) The <link> tag in the <head> section of each web page file; and
2) The external style sheet file itself.
In <head> section add:
<link href="name.css" type="text/css" rel="stylesheet">
where name is the name of your style sheet file.
CSS syntax inside the external style sheet:
selector {property:value; property:value; property:value;}
or:
selector
{
property:value;
property:value;
}
for example:
body
{
background:white;
color:#000066;
font-family:verdana, helvetica, arial, sans-serif;
font-size: 12px;
}

h1
{
font-size:28px;
font-weight:bold;
text-align:center;
}
2. Internal css syntax:
In the <head> section of an individual web page, include the following:
<style type="text/css">
selector {property:value; property:value; property:value;}
or:
selector
{
property:value;
property:value;
property:value;
}
</style>

3. In-line css syntax:


Inline CSS is embedded into individual html tags, like this:
<selector style="property:value; property:value">
for example:
<h1 style="text-align:center;color:red">
or:
<p style= "font-size:x-large>
IV. Learning CSS Property:Value Pairs:
Just as there are hundreds of HTML attribute-value pairs, there are hundreds of CSS property:value
pairs. Instead of trying to memorize them, learn to look them up:
In HTMLPads CSS Reference on the Help menu,
In a web design reference book, or
On the Internet.
Best suggestion for learning and using CSS in this class: Use HTMLPad CSS Reference!
A few good websites to use:
http://www.w3.org/MarkUp/Guide/Style
http://www.westciv.com/style_master/academy/css_tutorial
http://developer.apple.com/internet/css/introduction.html and many more
See http://teacherjohn.com/resources/webdesignresources.html for more links

You might also like