Basic CSS
CSS, as we know, is the coding language we use to style our website. It allows us to add color, formatting, cool fonts, and more.
Task:
Go to the style.css file in Repl and copy-paste the following code.
Update your website and see how it looks. Does it change? Now try changing the white color to MediumTurquoise. Update and see how it looks.
This is an example of a CSS rule. It is the building block of CSS, and is what we will be using to make our site look good.
Don't like the color? HTML/CSS has 140 different pre-set colors for you to choose from. You can view the different options here. Feel free to use whichever color you want!
How CSS Works
If you go back to your index.html file, you will see the following line of code:
This tells Repl that a special file called a "stylesheet" exists and to use it as a guide to format your website.
Stylesheets are made up of rules, which are essentially instructions. In this case, the curly braces {} and the body define a new set of rules. The word body at the front of the word is called the selector, as it specifies that the rules within the braces are to be applied to the <body> element.
Each rule is composed of:
A property (in this case, "background-color") followed by a colon.
A value for the property (in this case, any of the 140 colors linked above).
A semicolon at the end.
Adding Rules To Text
This concept of CSS rules can be extended to text.
Task:
Add the following rules to your <body> selector:
It should be indented the same way as the background-color property.
The color property controls just text in general (<h1>, <h2>, <p>, etc). Again, use the list of colors above to make a good color choice.
The font-family property controls the font used by the website. Feel free to change the font to your liking, but for now, only choose from these fonts:
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Using Separate Rules
You don't have to format everything in the body the same way. Let's say you would like the <h1> element to be colored DarkMagenta, the <h2> to be RebeccaPurple, and the rest of the elements to remain the color you set in the body selector.
You can achieve this by writing separate rules:
While the <h1> and <h2> elements are used inside the <body> tags, giving them special, separate rules trumps what was said before.
Experiment with writing rules for the different text elements used in your website. Try to keep things varied, but still with some sort of structure. Remember, someone else will be reading your website. You want your coloring to be interesting, not irritating.
Last updated