Beautify with CSS

Created on: 4th December 2020

If you have read through my previous blog on Beginning with HTML, you would have a basic understanding on how to create a simple webpage. However, it lacks the design, styling or colors. To be honest, everything looks like a black and white document without a proper alignment or format. This blog would help you achieve all of aforementioned with the help of CSS.

What is CSS?

CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.

CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page (but we’ll leave that for another day).

The best thing about CSS is that it allows you to make global style changes that affect every instance of a certain element throughout your blog or website so that you don’t have to make these changes at the individual page level. This saves you a ton of time when it comes to redesigning your blog.

To make it simpler, the h1 (heading 1) tag within the HTML is displayed as extra large, bold, black text. If we want to change the color, font and size of all the h1’s on our blog to keep consistency throughout, all you need to do is define what all h1’s will look like in your CSS.

Sometimes different browsers may display slightly different default styles. Using a style sheet to define what a specific element should look like can keep the look of your blog consistent from one browser to another as well as one device to another.

How does it work?

A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet. We’ll get into that in a moment. You can also have a style sheet override another style sheet. There are certain defualt styles applied for specific tags by the browser and this is how we are able to override predefined styles from our webpage, as our custom style sheet is usually the last one read by the browser.

There are three different ways to implement CSS on a webpage

How CSS gets applied?

CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:

selector {
      property: value;

Let’s look at each of these pieces separately:

The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name. When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be: p

A Class Name always begins with a dot(.) For example, .container

Property and their respective values always live within curly braces:

p {

Properties are predefined terms within CSS that all web browsers understand. They are things like: font-family, font-size, color, etc. A property is always followed by a colon (:)

p {

The value is the particular style or variable you choose to assign to a property. A value is always followed by a semi-colon (;) For example:

p {
     font-family: Arial;
     font-size: 16px;
     color: gray;

So the example above tells the browser that we want all of our page titles (or any element surrounded by an

tag) to be displayed in Arial font at 16 pixels in size and in the color gray. Pretty easy, right?

Let me know what you think about this article. I Hope this provided you an introduction to CSS.

Scroll to the top