Introduction to Cascading Style Sheets (CSS)
- Inline Directly in HTML element, by using the <style> attribute specified in the HTML element where the CSS formatting is to be performed.
- Internal By using a <style> element in the <head> section.
- External An external CSS file, like a "template" it is linked to the document by using an external CSS file (The most common way!).
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:
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.
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:
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):