Introduction to Using CSS and HTML together

Welcome to this introduction to Using CSS. These set of pages aim to argue the need to separate HTML Structure from CSS Styling when writing new web pages, in addition to covering the basics of CSS, and how the CSS language is designed to be used.

Disclaimer: These pages imply that you have some basic knowledge of how to structure and layout a web page in HTML and some prior knowledge of CSS. In addition, the page references to HTML5 and CSS3 by default, any other versions will be stated explicitly.

You may notice the dotted lines under the acronyms above. These dotted lines are used to indicate what the acronym will mean when you hover your cursor over it.

Citations will be used on these pages to allow you to refer to official documentation which will cover the full scope of the topics we discuss here. All citations will look like "[x]", and will link to the Bibliography page with further information. All citations will have a return link so you can resume without having to spend time navigating half way down a page.

Additionally, code blocks like the example below will be used to demonstrate code examples. They are purely used for demonstration purposes and may not contain full blocks of code, only snippets. They will be used to show specific examples of how things are supposed to be used.

Example Code (Language will go here)
  1. The contents of this block,
  2. are designed to represent,
  3. code in its raw form.
  4. Anything in here is a code snippet, and can be copied in your examples.
  6. It's good to understand that syntax is crucial for code,
  7. the downside is that each of the languages have different syntaxes,
  8. so be aware of the language in the title of the code block.

Separating Structure from Styling

In the first chapter, we will be looking at and discussing the ideal methods and reasons behind separating HTML Structure from CSS Styling. We'll be looking at the older methods of using Attributes to format and layout pages, in addition to bad practice using Tables, and depreciated methods, and how we are able to better utilise both languages to produce a better page.

Visit this page for more information about this chapter.

CSS and its Selectors

In the second chapter, we will be looking into four Selectors that CSS has and uses to apply styles to HTML structure elements, and how they're designed to be implemented into pages, including their limitations. We will also briefly cover the hierarchy of how selectors can be paired together to be more specific in selection.

Visit this page for more information about this chapter.