CSS Basics
CSS (short for Cascading Style Sheets) is used to take the content that we have put in our HTML and make it look nicer. We call this "styling" our web page.
CSS can be placed in our HTML file, or in a file of its own. It is generally a good idea to try and keep these separate - keep HTML in the HTML file, and CSS in the CSS file.
Below is an example of internal CSS:
CSS can be placed in our HTML file, or in a file of its own. It is generally a good idea to try and keep these separate - keep HTML in the HTML file, and CSS in the CSS file.
Below is an example of internal CSS:
In this example we have 3 selectors which are selecting three different element types and then setting their properties:
1) the body of the page
2) the h1 tag (the main heading)
3) any "p" tags that are on our page with the text that's inside them.
Once we have selected these elements we then specify what properties we are setting and what we are setting them with. We are changing the colour of the background using "background-color" property, and the colour of the text using the "color" property.
Look carefully at the example and see that our CSS goes inside the <style> tags which are inside our <head> tags. (NOTE: in CSS we need to use US spelling meaning that "color" has no "u")
1) the body of the page
2) the h1 tag (the main heading)
3) any "p" tags that are on our page with the text that's inside them.
Once we have selected these elements we then specify what properties we are setting and what we are setting them with. We are changing the colour of the background using "background-color" property, and the colour of the text using the "color" property.
Look carefully at the example and see that our CSS goes inside the <style> tags which are inside our <head> tags. (NOTE: in CSS we need to use US spelling meaning that "color" has no "u")
Task: Use internal CSS to style the body, h1, and p of your trains website.
Using external CSS
It is best to keep CSS in its own file. Below is an example of the same CSS in its own file.
It is best to keep CSS in its own file. Below is an example of the same CSS in its own file.
In the tags we use a tag to provide information about where the CSS file is. We also specify that it is a "stylesheet" that we are referring to.
|
We usually name our file "styles.css"
|
The same CSS in its own place. Here it is spread out a little more across multiple lines.
|
Usually we will want to do more than just colour a paragraph red and might for example want to set its size and font. These things can be included in the same curly brackets like in the example below.
NOTE: We should only use a selector once in our CSS and have everything inside it (like above). Below is an example of what NOT to do. It works, but you shouldn't do it because then your code is spread apart rather than all together.
Task: Create a CSS file and use external CSS for your trains site (you will need to remove the internal CSS from your HTML file).
