Josh Writes

Small boy with big dreams.

The fundamentals of CSS – Understanding the very basics of CSS.

HTML is a very popular coding language -– and I’m sure you have learnt it or at least heard of it. We usually use it to make the framework for our websites. We can even rightfully call it the “skeleton of websites”.

Then if HTML is the “skeleton” then CSS would be the “skin and clothes” – the design that makes a website appealing to our eyes. It controls the colors, layouts, fonts, spacing, and animations you see on the web. Without it, websites would like plain and rather boring to look at.

That is why Cascading Style Sheets exists – also known as CSS. In this blog, you are going to be learning the fundamentals of CSS. So let’s start our journey to make you a “fashionista” in front-end development.

What does CSS do?

Although I gave you a short introduction of what CSS does – you might still be curious about the whole picture.

HTML simply tells the webpage what each part of the website is:
“Here’s the paragraph!
“Here’s the heading!
“Here’s the image!

Now CSS takes these parts (we call them selectors) and “dresses them up.” Or basically just gives them color, spacing, size, etc.

For example:

<p>Hello, world!</p>

Now this paragraph will just look like some plain-old boring text in the preview. Until we add CSS:

p {
  color: blue;
  font-size: 20px;
}

Et Voila! Now every <p> tag will appear blue and larger.

How to Add CSS

The main question now is, how do you add CSS into your code? There are basically three ways you can do this. Inline, Internal and External. Let us look deeper into these :

  • Inline – This means adding the code of CSS into the HTML tag itself. That is why it is called “inline” which means adding the code “in line”. Basically, you add “style” into your <p> element and this basically becomes your “Declaration Box”. Here you add whatever property you want, and it’s assigned value. <p style="color: red;">Inline style</p>
  • Internal – Now this is quite similar to the last one. The difference being, instead of adding “style” inside a tag, you add it in the HTML document, just anywhere except inside a tag. Another key difference is the fact that this method requires “Selectors” – Which we will be learning a lot more of. <style> h1 { color: green; } </style>
  • External – This is the most common – and recommended method to apply CSS to your webpage. You basically link your CSS file (That you create separately.) inside, usually, the <header> element in HTML. The way you link is shown below. <link rel="stylesheet" href="styles.css">

External CSS is recommended because it just keeps your HTML code a whole lot cleaner and it also makes it easier to organize.

Selectors and Properties

Now as I mentioned previously, you need selectors to assign values and properties to HTML elements. This selector is what picks the certain HTML element to style.

Example:

h1 {
  color: purple;
  text-align: center;
}
  • h1 is the selector.
  • color and text-align are properties.
  • purple and center are values.

However, you do not always need to style all HTML elements the same. Sometimes, you want to style a group of paragraph elements green while the rest blue. Or maybe you jus want the title to be underlined, not any other headings. This can achieved with the help of classes <p class="paragraph"> or IDs <p id="pargraph1"> or you can group different selectors together.:

  • Classes: .menu { ... }
    • You use classes when you want to style a group of elements. Like you want just a certain menu to be green. You can use classes to apply just that.
  • IDs: #header { ... }
    • IDs are basically the same as Classes with only one exception. There can only element per ID name. Like there can only be one id="header. Classes meanwhile are more versatile.
  • Groups: h1, p { ... }
    • Groups are just like classes – just a bit more complicated. We will talk about these kind of selectors at a later blog.

The Box Model

Now the box model – another topic that could take another whole blog to explain. But because this is the basics page, I will simply explain it briefly. The box model basically indicates how every HTML element is treated as a rectangular box that takes up space on a page. This “box” is made of four parts from inside to out.

  • Content – This is the actual content of an element. For example, for a paragraph element, the content will be the text inside. Like “Hello World!”.
  • Padding – This would be the space inside the box that surrounds the content. This is especially useful and commonly used when you want to set a border to an element and it’s too close to the content. Then you use the padding property to give it some space.
  • Border – This is the line around the padding and the content. As it states, you use it to create an outline of the padding and content box. You can adjust it with border, border-width, border-color.
  • Margin – This is the remaining space outside the element. It basically creates distance between itself and another element. For example, If I see that the paragraphs are too close to each other then I can use Margin to add some space.

You can style all these like so:

div {
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

Final Thoughts

That there are the basics to CSS. CSS is in my opinion one of the most fun coding languages but also the most infuriating. It’s a whole rollercoaster ride coding a website using it. Sure, it has some pretty hard topics to understand, but once you get it – it starts getting fun. I hope you enjoyed learning about CSS in this Blog and stay tuned for my next one!