CSS and CSS Box Model a powerful design aid

Table of contents

Reading Time: 3 minutes

Cascading style sheet or CSS is a simple design language that aids Hypertext markup language or HTML. In easier words, CSS is the backbone of HTML which helps in designing and presenting HTML elements beautifully on a web page. CSS is simple yet versatile that allows controlling every element and its aspects present in HTML including size, layout, separation, colour, positioning, fonts, and much more. The CSS Box model is the fundamental design of elements that treats each element present on the web page as an individual rectangular box.

Unquestionably all web pages operating over the internet either support CSS or use a combination of CSS and other front-end technologies. Therefore, CSS tagged with HTML is a very important skill set to have for every front-end and full-stack developer.

There are three ways through which we can implement CSS to HTML documents:
1) Inline CSS
2) Internal or Embedded CSS
3) External CSS

Inline CSS

Each element in HTML has various attributes and one of those attributes is style. With the help of the style attribute, we can use CSS on the particular element.
Inline CSS is helpful when you want a particular element to look or feel different from the rest of the web page.

<h1 style= "color:red; background:black" >This is the example of Inline CSS</h1>
<p style="color:blue; background:black">This is the example of Inline CSS</p>

Internal CSS

Internal or Embedded CSS is define inside of section of the HTML page with the help of element. All the elements which are then defined inside the <body> tag of the HTML page can receive it’s styling from <style> element which was defined in <head> section. Internal CSS affects only the page on which it is defined in.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: black;}
h1   {color: red; background: violet}
p    {color: white; background: green}
</style>
</head>
<body>

<h1>This is the example of Internal CSS</h1>
<p>This is a the example of Internal CSS</p>

</body>
</html>

External CSS

If you require to handle multiple web pages at once then External CSS is an ideal option for you. External CSS can design and style multiple web pages at once. The code for External CSS has to be written in .css extension and has to be linked with HTML document inside <head> tag.

Authority in Types of CSS

All three CSS has an authority level and these authority level chooses which CSS to adopt if the given element has multiple options. Authority level in CSS is as follows Inline CSS > Internal CSS > External CSS. This authority level gives the capability to use all three CSS at once and design a particular element or a web page in a unique way while still having External CSS for all elements and web pages.

HTML document:-

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "/html/style.css">
</head>
<body>

<h1>This is the example of External CSS</h1>
<p>This is a the example of External CSS</p>

</body>
</html>

`Style.css` linked with above mentioned HTML document:-

body {
  background-color: black;
}

h1   {
  color: red;
  background: violet;
}

p    {
  color: white;
  background: green;
}

CSS Box Model

CSS Box Model implies that each element described inside the HTML document is a rectangular box. From a design perspective treating each element as a box gives a lot of versatility in designing a layout.

The Box Model. This article will brief you about the… | by Manisha Basra | HackerNoon.com | Medium

CSS Box model divides each element is four different parts:-

1) Content
2) Padding
3) Border
4) Margin

Content Area

The content area is where the actual content is present such as heading or paragraph. This area is the most inner area and is surrounded by Padding, Border, and Margin area.

Padding Area

The padding area provides the area between the content area and the border area.

Border Area

The border area outlines the element and draws a line around the outside of the element. By default, it goes all around the side if not particularly specified.