week 12 css - review from last week
TRANSCRIPT
CSS
(CASCADING
STYLE SHEETS)
WEEK 11 REVIEW
HTML IS THE FOUNDATION,
CSS IS THE PRESENTATION
REVIEW:
WHAT IS CSS?
• CSS (Cascading Style Sheets) is a style sheet language developed to
control the presentation (look and feel) of markup language documents, in
our case HTML
• CSS is a collection of formatting rules
Examples:
• size of font
• color of font
• font family
• margins,
• border,
• underline etc…
ANATOMY OF A CSS STYLE
ELEMENT SELECTORS:
FOR REGULAR HTML TAGS
• The element selector selects all tags with the specified element name
• These are very broad and the styles given to them would apply to all
• Elements selectors refer to regular HTML tags
p { color: red; }
h1 { color: yellow; }
ul { color: red; }
strong { color: blue; }
em { color: green; }
CLASS SELECTORS:
FOR ANY ELEMENT
• Classes can be added to any html element (<p>, <h1>, <strong>, <em>, etc.)
• Classes can be named almost anything – you decide
• You can apply a class as many times on a page as needed
• Class selectors always start with a period in the css file (.example)
CSS:
.subhead { color: red; }
HTML:
<h2 class=”subhead”>My Subhead</h2>
ID SELECTORS:
FOR ANY ONE ELEMENT ON A PAGE
• An id selector needs to be unique within a page
• Use the id selector when you want to style a single, unique
element.
CSS:
#subhead { color: red; }
HTML:
<h2 id=”subhead”>My Subhead</h2>
3 WAYS TO APPLY STYLES
1. Embedded style:
• Typed directly into each html document, applies only to that document,
embedded in the <head></head> section
2. Linked style sheet
• Separate style sheet document linked to each html page
• Control the style of an entire site from 1 style sheet
• Links go in the <head></head> section of each page
3. In-line
• Add the style attribute to the relevant tag, eg: <body style=“color:
#333333”>
• An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly!
LINKING CSS STYLE SHEETS
• Linking a style sheet means that you can control the presentation of a site consisting of multiple pages from 1 CSS file
You link to a separate file:
• <link href="global.css" rel="stylesheet" type="text/css" />
• Linked Style Sheet are named with a .css extention (ie. global.css).
• Linked Style Sheet are added in head section between the opening and closing head tags just like embedded CSS styles
This is the technique we will be using in class
CSS: WHAT TO REMEMBER!
• Start an element selector
(an HTML tag) with just the tag,
eg:
• Start a class selector (a style
you’ve created) with a period,
eg:
• Following the selector insert “curly”
brackets that enclose all the
declarations, eg:
• Write the property: first followed by
a the value;
body or p or h1 { declarations }
.classNamefont-weight: normal;