CSS: Cascading Style Sheets
I. Overview: Why Use CSS?
• You should code your web pages structurally, logically, not visually.
Don’t think, “I want the text big, so I’ll 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 extern