Styling with CSS

Course Topics by Week 
1. Intro to HTML 56. Page Layout with CSS
2. More HTML 57. HTML Tables
3. Developing a Web Site8. HTML Forms
4. Styling with CSS9. Multimedia
5. Midterm Quiz10. Review and Term Project
 11. Final Quiz

Contents

 

Introduction

 

Basic CSS

More Selectors

 

Structural elements as CSS selectors

Semantic structural elements

We've already seen and used some of the structural (aka semantic) elements like <header>, <section>, etc. Now we will see another use for these elements besides providing organizational structure to our page. These can be used as CSS rule selectors to provide a way to format a section of the page. For example:

W3Schools tutorial on semantic elements

Non-semantic structural elements

The <div> element was a structural element used before HTML5 introduced semantic structural elements. It is considered non-semantic, because div is just an abbreviation for "division", it's name doesn't have any meaning related to the type of division it represents.

Example:

The <span> element is used to apply CSS formatting to an arbitrary area in a row of in-line elements.

For example:

 

Examples

 

References


Creative Commons License Web Authoring Lecture Notes by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.