SlideShare a Scribd company logo

Week 12 CSS - Review from last week

•Download as PPTX, PDF•
•
Katherine McCurdy-Lapierre, R.G.D.
Katherine McCurdy-Lapierre, R.G.D.

This document reviews CSS (Cascading Style Sheets) concepts covered in Week 11. CSS is used to control the presentation and styling of HTML documents. There are different types of CSS selectors including element selectors for HTML tags, class selectors that can be applied to any element, and ID selectors that uniquely identify a single element. Styles can be applied via embedded, linked, or inline styles. Linked style sheets allow controlling the presentation of an entire website from one external CSS file.

1 of 10
WEEK 11 REVIEW CSS (CASCADING STYLE SHEETS)
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: body or p or h1 { declarations } • 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; .className font-weight: normal;

More Related Content

Week 12 CSS - Review from last week

  • 1. WEEK 11 REVIEW CSS (CASCADING STYLE SHEETS)
  • 2. HTML IS THE FOUNDATION, CSS IS THE PRESENTATION
  • 3. 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…
  • 4. ANATOMY OF A CSS STYLE
  • 5. 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; }
  • 6. 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>
  • 7. 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>
  • 8. 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!
  • 9. 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
  • 10. CSS: WHAT TO REMEMBER! • Start an element selector (an HTML tag) with just the tag, eg: body or p or h1 { declarations } • 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; .className font-weight: normal;