Beauty is in the eye of CSS
So to start off what is CSS? CSS stands for Cascading Style Sheets. It can be thought of as the visual aspect to the structural foundation laid out by the HTML.
The really cool thing with CSS is that rather than having to write out how each page should look, maintaining a consistent style between your pages, you only need to define it once and have it be used on multiple pages!
Quick tip: Remember that Cascading means that it reads the style definitions from top to bottom. So if you have a style definition that overwrites one you wrote above, you won’t see the above one take action!
Before we dive in though we should talk about the three types of inserting a style sheet.
- External CSS
- Internal CSS
- Inline CSS
With External CSS, which is what we’ll be doing, we are going to be adjusting one CSS file that the html pages will be referencing. With Internal CSS, it is more often used with a page that it very different to the others and pretty unique in comparison, so to call upon the external CSS file won’t help much. Lastly with Inline CSS you directly apply the style to specific elements which ends up to become very tedious work and most often should be avoided. As a general rule, try to use External CSS as the default template for your html pages, since they should probably look like they all belong together on the same website!
How would we use CSS, well lets take a header as an example. In your css file, you start out with the selector you want to adjust; in this case we’ll use h1. Now in curly brackets, we declare how we want to adjust the visualization to reach what we want. Say in this case I wanted it to be blue, and a font-size of 40! Because I lost my glasses or just don’t wanna use them right now.
p {
color: blue;
font-size: 40px;
}
And just like that, anytime we use <p> in our html, it’ll be blue and have a font-size of 40! Let’s try out <p>Hello World!</p>
Just like that we’ve used CSS for the first time!
There are many different adjustments that you can make such as background color, font-size, links, etc. But there are three that can seem a bit confusing if not similar to one another.
Let’s look into margins, padding, height & width.
To make this topic a bit easier we’re also going to use outlines. Simply add
outline-style: solid;
into the curly brackets from before and we’ll have a solid line around our Hello World! (It’ll also be blue!)
Now with margins, what we’re doing is adding space around the element, in this case the paragraph. So if we add a margin: 10px, we’ll have a little empty space all around our outline. If we had a margin: 200px, there’ll be a ton of empty space!
Now with padding, rather than have the space created be around the element, we’ll be having it around the content but still within the borders. Without the outline, it might seem a bit confusing but since we have one try adding in padding: 10px; and see how theres a little space all around Hello World! But if you have padding: 200px, it’ll look like a huge box with two words way in the middle.
Moving to height and width, with height, you can lay out how big you want the outline (remember it’s not always there, but it’s helpful for visualizing what’s going on) to be. So if you say height: 200px, from the top of the outline to the bottom will be a height of 200 px! For width, it’s the same concept just from the right side of the box to the left. You can also use percents to determine how much of the screen you want it to take up rather than a static pixel amount which can appear different on everyones screen. For example width: 100%.
A really helpful graphic that can make it somewhat more apparent even at just a glance is this one that I found
This is really helpful to solidify how it is implemented when deploying on a webpage, but the terminology of course should be practiced and remembered for use!
Hopefully this little snippet from me was somewhat helpful to you making your endeavors easier, even if it’s just slightly to help you reach your goals and maybe even stun your friends with your amazing CSS skills!