What is CSS, how it works and why we use it?

September 16,2020 - 15 min read
what is css and how do we use it

A Cascading Style Sheet commonly known as CSS is a layer of design over HTML elements. It is a general idea that HTML is like a skeleton and CSS is the skin over it. To get a general idea, HTML is responsible for the basic structure of web pages, the contents and their sequence is determined by the HTML document but CSS styles the HTML document and makes it look presentable by adding font, size and color to it. It saves a lot of work and can control the layout of multiple web pages in one go. Javascript is used to make websites interactive and dynamic.

The name Cascading Style Sheet is itself explanatory. The term cascading means that CSS cascades in three different ways. The three ways are through elements, sheets and classes.

CSS is a very vast topic; it covers various topics and sub themes that need to be comprehensively covered in order to make effective designs on the websites. Read on to get a basic overview of CSS and to understand how it can be practically implemented.

Integrating CSS in HTML Documents

The first thing we need to learn in CSS is the technique to add it in an HTML document. There are three ways of inserting any style sheet. It can be external, inline and embedded.

In external stylesheets, theelement is used to point to an external CSS file. This is the most convenient way of styling your HTML document using CSS. All styling and formatting are done in a separate CSS file and it is then linked or imported in the HTML document. The proper syntax to add external CSS is <link rel=” stylesheet” href=” css/style.css”>

In inline stylesheets, the formatting is done in the HTML document itself using the <style> attribute in the HTML start tag. This attribute includes a “property: value” pair. Each pair is separated by a comma. We would study about property and values later in this same blog.

Embedded style sheets are embedded in the head section of the HTML document. It also uses the <style> element. The style tags must only appear between the <head>and </head> tags.

Selectors in CSS

In order to understand the syntax of CSS, the first thing to learn about is selectors. Selectors are basically elements or groups of elements that we wish to style or work upon. To start with we would take a simple example.

  • h1 {
  • color: blue;
  • text-align: left;
  • }

In this example, h1 is the selector and we have styled it using curly braces. If there are two selectors that would have the same styling then we can also club them together and make a single selector list.

  • h1, p {
  • color: blue;
  • text-align: left;
  • }

This way the properties are assigned to both h1 and p selectors.

There are different types of selectors in CSS however the function of all types of selectors have the same function and that is to style a group of elements.

Let’s begin by talking about the basic selectors. Universal, type, class, id and attribute selectors come under basic selectors. Universal sector works just like its name. The styling specified under the universal selector applies to all elements of the web page.

The type selector is used to style elements with a given node name.

The class and id selectors are used to style elements of a particular class and id. It is important to understand the difference between two selectors. A class in CSS is used to identify a particular section in a webpage, that may include a wide variety of elements. On the other hand, id is used to identify a particular element in a web page.

An attribute selector in CSS matches all elements with a given attribute.

There are other types of selectors also namely combinators, grouping and pseudo selectors.

Property and Value in CSS

We extensively use property and value in CSS but are often unaware of the official terminology. Property is the attribute of any CSS element and value is the specification of the property. If this definition confuses you, then head on to the example.

If I want to design all paragraphs in my web page, then the CSS code would look something like this –

  • p
  • {text-align: left; color: black;
  • }

In this example, ‘p’ is the selector that we wish to style and how we want to style is given inside the curly brackets. Coming to properties and values, text-align and color are the properties that means that they are the attributes of the selector we want to change. Left and black are the values that we wish to set the attributes to. The value of attribute text-align that we want to set is left and the value of attribute color we want to set is black.

The result of this code would be that all paragraphs would be left and the text of the paragraph would be black.

Backgrounds in CSS

As mentioned, CSS is primarily used for adding aesthetic value to the website. Backgrounds are the most important when it comes to styling web pages. Be it adding solid colors, gradients or images, backgrounds cast a strong impression on the users. Let’s learn how to make beautiful backgrounds in CSS.

The property of background-color is added under the body tag for the background color of the entire web page. However, we can also add background color of all other elements like h1, p, div etc.

A simple example is –

  • body {
  • background-color: red;
  • opacity: 0.1; // Used for adding a transparent shade of the solid color.
  • }

Apart from solid colors we can also add images as background in our web pages using CSS. The syntax for the same would be –

  • body {
  • background-image: url(“bgimage.jpg”);
  • }

Images can be used in the backgrounds with a lot of variations. From adjusting the scrolling to deciding the number of repetitions, CSS offers a wide range of properties for using the images as background. The syntax for each is quite self-explanatory.

The attributes that can be used with a background image in CSS is background-repeat, background-position and background-attachment.

The background-repeat is used to specify if the background image would be repeated or not and if it would be then the axis (y axis or x axis) has to be mentioned. Background position is used for determining the position of the background image. Background attachment decides whether the background image would be fixed or would scroll with the rest of the page.

The CSS Box Model

When we talk about the layout or the styling and designing of a web page, the box model in CSS plays a major role. The box model forms the basis of web page design using CSS.

The box model in CSS treats every HTML element like a box with certain properties. The box that wraps every element consists of Margin, border and padding. The image below clearly explains the different properties of the box model in CSS. Now that there is a perspective, let's understand each of these properties in detail.

Padding in CSS

The padding property in CSS is used to provide spacing between the content and the element itself. Padding can be defined in CSS in four ways -

  • padding-top - It specifies the spacing between the content and top of the element
  • padding-right - It specifies the spacing between the content and right border of the element
  • padding-bottom - It specifies the spacing between the content and bottom of the element
  • padding-left - It specifies the spacing between the content and left border of the element

A simple syntax of padding all elements under the h1 tag would look like

  • h1 {
  • padding-top: 50px;
  • padding-right: 30px;
  • padding-bottom: 50px;
  • padding-left: 80px;
  • }

Margin in CSS

Unlike padding which is used to create spacing within an element, margins are used to create around an element. It distances the element from external elements on the web page.

Margins can be specified in four ways -

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

A simple syntax of padding all elements under a particular div tag would look like

  • p {
  • margin-top: 100px;
  • margin-bottom: 100px;
  • margin-right: 150px;
  • margin-left: 80px;
  • }

Border in CSS

The next property in the CSS box model is the border. It is used to design the style, width and colour of the border of an element. There are a number of specifications that can be added to style the borders. From dotted borders to 3D effect, CSS gives an array of options when it comes to styling the borders.

Position Property in CSS

This property defines the method used for positioning an element on the web page. The five different types of position property are Static, fixed, relative, absolute and sticky.

By default, the position of an element in CSS is static. This means that the position is not affected by any external factors rather it is situated according to the normal flow of the webpage. The syntax is position: static;

In the absolute position property, the element is removed from the normal document flow. The element is positioned relative to its closet positioned ancestor or initial containing block. The syntax remains same as others, position: absolute;

The relative property changes the position of an element with respect to the normal (static) position. The syntax is - position: relative;

If any element has a fixed position property in CSS then it literally remains fixed. The position of an element is relative to the viewport. In simpler language, the position remains fixed even if you scroll the page. The fixed position property can be better understood by the illustration below. The background of the ocean is scrolling sideways and downwards but the position of the flower remains fixed.

The next property is sticky. This position is very similar to its name, it sticks to the users and doesn’t go away from the user’s screen. Its position is based on the user’s scroll. It can be thought of as a hybrid version of relative and fixed position property in CSS. Its syntax is – position: -webkit-sticky; position: sticky;

While defining all position properties except static, we have to mention the values of properties. Elements are positioned according to the top, bottom, left and right properties.

CSS Versions

Since the advent of CSS, many updated versions have been released. In 1996, CSS1 was a simple visual formatting language for HTML. CSS2 in 1998 added support for media specific style-sheets. The next update, CSS3 divided the specifications into many individual modules. This made the task a whole lot easier for developers. Another major difference is CSS2 has simple selectors while CSS3 has a sequence of simple selectors. CSS3 has a better set of features which enable you to improve the visual appearance of the website by adding in-demand and customised layouts, layering and other effects.

CSS3 is one of the most popular visual languages of the web. CSS plays a major role in the aesthetics of almost every website you see on the web. If you are looking for a career in web development then CSS simply can’t be missed.

This article covers the basic overview of CSS however as mentioned earlier, CSS is a vast ocean. Without an in-depth understanding of every concept in CSS and its practical implementation, you can’t build websites that truly stand out.

In case you didn’t know, Konfinity ‘s Web Development Course is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

Join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. You know what’s amazing - no prior coding experience is required to take up our courses. Start your free trial here.