Introduction to CSS
What is CSS?
CSS stands for cascading style sheet, it adds “style” to your web pages. CSS is the code you will use to add and control color, sizing, positioning and much more. CSS was first introduced to the web in the mid 1990’s. Since inception there have been different versions with the latest being CSS3. CSS3 is quite advanced and thanks to the latest version we can now do some amazing things with css that used to only be possible by using javascript.
How to add CSS to your Web page
Before we dive into writing CSS we need to first explore the three different methods of adding the styles to our web page. There are three main ways to add style to your web pages:
- External Style Sheets – All CSS code is in a separate file from the HTML document
- Internal Style Sheet – CSS code is in the same file as the HTML code but in a separate section
- Inline Styles – CSS code is inserted directly into the HTML elements
External Style Sheets
The first method and the most recommended method is to use an external style sheet. External style sheets are easier to maintain since your all of your CSS code is in one separate file and not jumbled up with your HTML document.
Making an external style sheet
To get started we will need to make a plain text document, give it a name and rename the extension to .css we do this the same way we created our first html document. You can name the file whatever you like for this tutorial we are going to name ours “style.css”. To make things easier make sure you save your CSS file in the same folder or directory as your HTML document.
Now that we have our CSS file created we need to link it to our HTML page. In your HTML file, between the two head tags add a link element (self closing), give the element an HTML attribute name of “rel” and the value of “stylesheet” then a second attribute with the name “href” with the value being the path to your stylesheet location. See the below example:
<!DOCTYPE html> <head> <title>Example Web Page</title> <link rel=”stylesheet” href=”http://www.example.com/style.css/” > </head>
That’s it you’re linked up as soon as you add styles to your sheet, the next time your browser loads the html page, the styles should show up.
A quick note:
You may have noticed in our second attribute we have the full url to the path of the stylesheet this is useful but can sometimes cause problems. If you are developing on a laptop or desktop computer you would have to use a file path ex: “C://users/username/desktop/my%first%website/style.css”. You would have to change this once you put your file on a server. To eliminate any problems you can use a relative path. Make sure your CSS file is is the same folder as your HTML file and your href attribute value can simply be style.css or the file name that you chose.
Example with relative path to style sheet
<!DOCTYPE html> <head> <title>Example Web Page</title> <link rel=”stylesheet” href=”style.css/” > </head>
Internal Style Sheets
Internal style sheets are used to add CSS properties directly into your HTML document. It is highly encouraged that you keep internal style sheets to a bare minimum. Intermixing styles with HTML code can make your page load times slow down, not to mention it will increase the overall size of your file. Imagine you have hundreds of lines of HTML code add in all of the content and then throw in a few hundred more lines of CSS. That makes for a large file and will be difficult to read through.
Recommended Usage
If you have only a few lines of css, for example, you only want to make a few changes to one element on a page, then adding the internal style sheet is recommended. If the internal styles start to get long and complex you should consider moving them to an external style sheet.
How to Add Internal Styles
Adding internal styles is simple. First you add an opening and closing “style” element inside the head tags of your document. Then inside the style tags, you type in your css code. Example:
<!DOCTYPE html> <head> <title>Example Web Page</title> <style> <!-- CSS code goes here. --> </style> </head>
Inline Styles
It is recommended that you avoid inline styles as much as possible. Inline styles only affect the element that they are in. If you wanted to change the color of the paragraph text on a page you would have to write the same inline styles to every paragraph element. It might not seem like much, but imagine if you had a website with 25 or more pages and you wanted to make a change on some element that is present in every page. It would become a long tedious process and would be a nightmare to maintain.
<h1>Three paragraphs</h1>
<p style="color:red;">This is a paragraph with the color red</p>
<h2>An element breaks the flow</h2>
<p style="color:red;">Another paragraph with the color red
The color style had to be re-assigned
since a heading 2 was added in between paragraphs
</p>
<h2>Prevent this problem</h2>
<p style="color: red;">All this extra work can be avoided by using external
Style sheets or internal styles. Inline styles should be avoided
</p>
Dont Repeat yourself
Because the heading tags are in between paragraphs, the we have to reassign the color after each heading. As you can see in our above example by using inline styles we end up having to assign the color red to our paragraph tags three times. This would occur more if we had more paragraphs and heading tags. To ensure we do not repeat ourselves we can achieve the same effect by using an external style sheet.
The CSS
Once you have your external style sheet linked to your HTML document you would add this code:
p{
color: red;
}
We first target the paragraph element using a CSS selector (the ‘p’ tag), then we use a key value pair to assign the color red. This has the exact same effect as inline styles but is much more efficient. Using this method we only have to assign the color once and all of the paragraph elements will be affected. We will go into more detail about CSS selectors and how to assign different effects later on in the beginner CSS tutorial.
The HTML
In your HTML file you would simply remove the inline style attributes from your tags.
<h1>Three paragraphs</h1> <p>This is a paragraph with the color red</p> <h2>An element breaks the flow</h2> <p>Another paragraph with the color red The color style had to be re-assigned since a heading 2 was added in between paragraphs </p> <h2>Prevent this problem</h2> <p>All this extra work can be avoided by using external Style sheets or internal styles. Inline styles should be avoided </p>
By removing the inline styles our html document is much easier to read, easier to write and easier to maintain. If we decided later on that we want to change our paragraph text color to blue we would only have to make a change in one CSS file instead of 3.
Whats next?
In our next tutorial we will show you what CSS selectors are and how to use them to target elements in different ways.
-
Previous: