Week 12 CSS - Review from last week
•Descargar como PPTX, PDF•
2 recomendaciones•830 vistas
Week 12 CSS - Review from last week
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (19)
Similar a Week 12 CSS - Review from last week
Similar a Week 12 CSS - Review from last week (20)
Más de Katherine McCurdy-Lapierre, R.G.D.
Más de Katherine McCurdy-Lapierre, R.G.D. (18)
Último
Último (20)
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;