Basic CSS Terms

If you’ve seen any pictures of me you know that I have no style. Now when it comes to programming I really enjoy using libraries like Bootstrap which makes it very easy to build forms, navigation bars, polling functions, and much much more. However it is also very important to know how to apply your own stying which can lead to endless possibilities. This comes in the form of Cascading Style Sheets or abbreviated as CSS. When learning CSS there are a lot of terms that get thrown around which can confuse many a programmer. In this post, we will visit some of the most common CSS terms and when they mean.

In order to select what will be styled, we use what is called a CSS selector. Selectors can be used to grab different parts of an application and can be used to grab elements by their name, class, id, and many more. This relates to how the HTML elements have been labeled. For example, some really basic HTML:

<div class="container">
<h1 id="someHeader"></h1>
<p class="someText></p>

As seen above, some elements are labeled by class and others by id. This affects how they get selected and then styled. For selecting a class, use a ‘.’, followed by the class name. For selecting an id, use a ‘#’, followed by the id name.

.container {
}
#someHeader {
}
.someText{
}

Whatever goes inside those curly braces will affect anything that is within the specific element. Color, positioning, what happens when a cursor passes over it, the list goes on and on. We’re going to cover some more basic styling options.

Color: This is pretty strait forward. Colors can be assigned simply by declaring the name of the name of the color i.e.: ‘red’, or you can use a hex code which is a combination of letters and numbers that cover the entire color spectrum, use this to get very specific with exact colors. Also play around with ‘color’ and ‘background-color’ to make colors stand out better and text easier to read.

Padding: Padding is how much space content has within its own border. A great example would be text within a surrounding solid border. Padding dictates how much space would be between the Text and the Border, great for making text readable and spacing out elements.

Margin: Personally, I often confuse margin with padding. Margin refers to the space around elements. Like distancing two blocks of text on a page. Margin and padding are used in tandem to space and distance elements on a page.

Both padding and margin can be used on all four sides on an element. When the value is declared, it can be used on the top, right, bottom, and left sides. Example below:

.example {
 padding: 10px; //all four sides to have padding of 10px
}
.example2 {
 padding: 10px 5px; //the top and bottom to have padding of 10px, while the left and right sides have padding of 5px
}
.example3 {
 padding: 10px 5px 15px; //the top has 10px pf padding, the left and right has 5px of padding, the bottom has 15px of padding
}
.example4 {
 padding: 10px 5px 15px 5px; //the top has 10px of padding, the left has 5px of padding, the bottom has 15px of padding, the right has 5px of padding
}

When it comes to margin, there can be other ways to dictate the margin value

%: The margin value can be given as a percentage of the element length.

auto: The browser will calculate a length

Understanding color, margin , and padding are great starts to building stylish applications. But there is so much more to know as you get into the advanced levels of CSS. However these basics are great practice to get started.