This series will talk about CSS in the hope of helping developers, new and old, to get a better understanding of CSS.
Why am I writing this?
As someone who mentors students in a local bootcamp, I'm seeing little appreciation for CSS. Most of it comes from frustration that many new developers feel when dealing with CSS. I hope that this series can show that CSS isn't your enemy.
Whether or not you learn something new from the series, I hope you enjoy reading it nonetheless.
Who is this for?
This series is for someone, beginner or not, who wants to learn or get a better understanding of CSS.
How often will I post?
I plan on posting a new part at least once a week depending on whether or not the topic needs to be split up into multiple parts.
Using Styles
Let's begin with the complete basics; how do we use styles? We can use styles in three different ways -- inline styling, style
tag and link
tag.
Inline Styles
Inline styling is the simplest to understand as it is the most verbose of all the different ways we could use styles. Inline styling means that you're using the style
attribute of HTML tags to specify that element's style.
<div style="background-color: lightblue; border: 1px solid blue;">
<p style="font-size: 12px; font-weight: bold;"></p>
</div>
Now, inline styling isn't really manageable specially if you have a lot of elements to style. Luckily, we have the style
tag so we can centralize our styles.
style
Tag
The style is a regular HTML element located, usually, as a child of the head
tag. I say usually because you can technically put it within the body
tag but it's not recommended.
<style>
div {
background-color: lightblue;
border: 1px solid blue;
}
p {
font-size: 12px;
font-weight: bold;
}
</style>
NOTE: You can have multiple style
tags in your HTML document but you don't really need to do that.
<style>
div {
background-color: lightblue;
border: 1px solid blue;
}
</style>
<style>
p {
font-size: 12px;
font-weight: bold;
}
</style>
Great! We now have a central location where we can put our styles but what if we want to reuse the styling? We don't really want to copy and paste the style everywhere; that would get unmanageable really quickly.
This is where external styles and the link
tag come in.
link
Tag
The link
tag allows us to link an external resource into our HTML document. We can move our styles from the style
tag into a .css
file.
We can make a file called style.css
and link it into our HTML.
/* style.css */
div {
background-color: lightblue;
border: 1px solid blue;
}
p {
font-size: 12px;
font-weight: bold;
}
We can then link this CSS file.
<link href="style.css" rel="stylesheet">
If we have multiple CSS files, we can link all of those as well.
<link href="style.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
<link href="style3.css" rel="stylesheet">
Writing styles?
Now that we know how to incorporate CSS into our HTML, how do we actually write it?
A style block is comprised of a few parts -- the selector, and a property-name-value pair. You can have as many property-name-value pairs as needed.
selector {
property-name: property-value;
}
It's important to end each propert-name-value pair with a semicolon (;
) as it signifies the end of that pairing.
Any property-name-value pair that exists within the block will be applied to the selector.
div {
background-color: lightblue;
border: 1px solid blue;
}
p {
font-size: 12px;
font-weight: bold;
}
All div
elements in your HTML will have a light blue background colour and blue border while all p
elements will have a font size of 12px and bold.
What if we want certain div
elements to have a different background colour or border? What if we only want one of our p
elements to have a font size of 12px? That's where the next topic of the series comes in -- selectors.
PS. I hope you enjoy the our first topic about CSS!
Top comments (0)