CSS (Cascading Style Sheets) is one part of the three core components of web development, the other two being HTML and JavaScript. These three languages have three different functions. The HTML defines the structure, the CSS defines the appearance and style, and the JavaScript defines the behaviour of a website.

As we’re discussing CSS in this section, the CSS defines design attributes such as the positioning of elements, colours, font type, font size or anything else related to the design. I think the best way to demonstrate this, is with a joke I saw recently.

Let’s See an Example of CSS

Fun Fact: CSS is the #13 most loved and hated programming language (StackOverflow 2020).
Lets go ahead and start a (really) basic HTML structure. In that structure, lets place a container. Now, in this container, lets spawn a new class, called cat.


//HMTL:
<html><body> 
<div class="container">
  <div class=“cat”>
  </div>
</div>
</body></html>

Perfect! Now that we have our container and our cat inside of it, lets use CSS to make the cat take up the entire container, so 100% height and width.
We can do this by writing the following CSS:


CSS: 
.cat {
  width: 100%;
  height: 100%;
}

Great work! Now what do you think this might look like? A cat using 100% of the width and height of a container? That’s right! Here is what you would get:

CSS Header

CSS Header

“The code you write makes you a programmer. The code you delete makes you a good one. The code you don’t have to write makes you a great one.” – Mario Fusco.