Coding Bootcamp (HTML & CSS)

Introduction to Cascading Style Sheets (CSS)

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. (Wikipedia)

When you use CSS to format a page, you can insert the CSS formatting in three different ways:

Inline CSS

CSS formatting specified directly in the document can be used when certain pages should deviate from the main template's formatting. This method is not as effective as using an external CSS template. If the formatting is to be changed, it must be executed in every single document that uses the formatting.

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

tagname style ="property:value;"

This means that you should put: style = "" inside a tag and then enter the CSS settings there, between the quotation marks. Below I show a number of examples of how this can be applied:

As you probably understood by studying the code above, the background color changes to gray.
Then H1 and p are changed a number of times. See picture below:

Inline CSS is not the best way to design your site

CSS formatting specified directly in the document can be used when certain pages should deviate from the main template's formatting. This method is not as effective as using an external CSS template. If the formatting is to be changed, it must be executed in every single document that uses the the same format. What I mean is that using the style attribute on tags in the HTML code is not effective! This means that if we create a site with many pages that have the same design/layout and later want to change the look of them, then we need to update the style attribute on each individual page. Obviously it wouldn't take a lot of time! There are much better ways to work with CSS that we will start looking at later on.

Internal CSS

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag. As you can see below, the properties of the page are specified within the <style> tag defined in the <head> section of the page:

 

The result of using inline CSS:



External CSS

This is the most common use of CSS, where an external document containing the formatting is linked to all the pages that will define the style for many HTML pages. With only one external style sheet, you can change the look of an entire web site! To use an external style sheet, add a link to it in the <head> section of the HTML page. The name of the CSS template must have the file extension .css and the name of the template in the example below is test.css


The CSS file:

 


The HTML file (note the link to the CSS-file):




Result: