CSS 101

Alright everyone time for a bit of CSS. Now if you’re unsure as to what CSS is, it stands for Cascading Style Sheet. Meaning it will assign HTML tags certain styling properties, for example every time I use a <h1> tag I want it to have the color red.

Basic structure

Here is the basic structure a section of CSS will have:

p {
   color: red;
   text-align: center;
}

In here we have p which is naturally the paragraph tag in HTML. That means every time that a paragraph tag is used it will be put into center and made red. Of course one can always add on extra tags in there so you can edit it accordingly.

Classes and IDs

I was always confused about classes and IDs in that when do you use those?! Well after a lot searching around I finally figured out the different between the two. Well starting off classes start off with periods(.) while IDs start off with the pound(#). Classes can be used multiple times, while IDs are used only ones, usually for example divs that serve a specific purpose. Here’s an example of a class:

<style>
.myclass{
   color:blue;
}
</style>
<p class="myclass"> This is my class </p>
<h2 clas="myclass"> So is this!</h2>

But IDs are not meant to be used frequently, normally to be unique identifies. I like to use them when I’m nesting divs together, helps me figure out what is what.

<style>
#firstdiv {
background-color: red;
}
 
#seconddiv {
background-color: green;
}
</style>
 
<div id="firstdiv">
  <p> First div!</p>
    <div id="seconddiv">
      <p> Second div!</p>
    </div>
</div>

CSS can allow for different designs and colors to a website by merely changing files. I’ll do a follow up to this article in the near future giving more examples and some tricks to it!