Week 2: Learning CSS
What is a Stylesheet?
Stylesheets are what printing companies used so their publications would look consistent, and people could work efficiently. These styles defined what typeface and size would be used for each element and how things would be spaced.
Web designers use stylesheets the same way: to keep their design consistent and speed up the process.
CSS stands for Cascading StyleSheets and that is how we define colors, text, and how things are spaced out and structured.
CSS Syntax (or "How We Write CSS")
CSS requires a specific way of writing the code. One tiny typo and things won't work! Visual Studio Code's predictive text is very helpful, but you'll still need know how to write declarations.
Here is an example of a CSS declaration. The first word ("p" meaning the style for paragraphs) is the selector.
The code between the braces (curly brackets) are the declarations. You can have multiple declarations, and these are the rules you're setting for that selector.
In this case, you're saying you want all the paragraphs to have green text and be center-aligned.
color: green;
text-align: center;
}
Where does CSS go?
We will add CSS between the <head> tags in our HTML file.
Add <style></style> and write your CSS between those tags.
<title>My Website</title>
<style>
p {
color: green;
text-align: center;
}
</style>
</head>
Using w3schools
There are so many things you can do with CSS, but there are some main ones we will use in this class.
The website, w3schools.com, has detailed explanations and lets you test out the code. Read these pages to understand these topics better.
Next Step
There might not be enough time in the next two weeks for you to write each individual line of code to build your website the way you want it, but that's ok!
Beginning web designers often use templates to get them started, and you're encouraged to do that too since I've found it's one of the easiest ways to learn CSS.
Go to this sample website and save it to your website folder on your desktop. Name it index2.html so you don't overrite your original file.
You're going to edit it in Visual Studio Code so it is customized to your website idea.