Introduction to CSS

Kabir Singh
Last Updated: May 13, 2022

Introduction

The language with a simple design that comes in handy while designing our web pages can be referred to as CSS or Cascading Style Sheets. CSS makes it very easy to make web pages presentable and gives them our desired designs too. 

In other words, it allows you to describe how elements of your website would be displayed on any kind of media, keeping under consideration that all this happens independent of the HTML file that we use on the web page.

Sounds really interesting, but we still aren't sure about the reason behind CSS being such a go-to language! Let's have a look at why we actually use CSS?

Why CSS?

 

So there are multiple reasons why we should actually use CSS in our web pages. The different ways are discussed below:

  • Time-Saving: A CSS file, once coded, can easily be reused in different HTML files and can be used to make different pages presentable.
     
  • Clean Codes: Coding in CSS is very clean, and it helps the search engines to read the pages easily.

 

  • Easily EditableWhenever we make a CSS file for a web page, we can make changes in the same on a global level. This means that changing the style at a global level makes the entire page look as per the applied change.

 

  • Wider Attributes: The range of attributes in CSS is way superior to HTML, and this makes us pretty much able to make our HTML look way more presentable than just using the HTML attributes.

 

  • Offline BrowsingMaking perfect use of offline cache CSS stores web applications locally, and this scenario helps us view the website offline as well.

A pretty clear idea of all the positives of using CSS can be taken from the above explanation, but how do we write a code in CSS now?

Let’s have a quick look at the syntax of CSS!

Syntax

Any code written in CSS comprises a set of rules called style rules. These style rules are taken under consideration by the browser and are then further implemented to our specified elements of the document.

Every style rule set consists of two important aspects of the code. The two aspects are Selector and Declaration Block.

Selector -- h2
Declaration -- {colour: green ; font size: 24px;}
  • The selector used helps us to specify the HTML element we want to style.
  • The declaration block comprises the styling points that we want to implement on the element and are separated from each other using semicolons.
  • We also make use of curly braces to wrap our declarations together.
     

Example :

A{
text-align: centre ;
color: green
}

Understanding the syntax was not a hefty task, but we still have to look into a brief knowledge of the types of selectors that help us to point out the HTML elements we tend to style.

Let’s dive right into the CSS Selectors!

Selectors in CSS

Whenever we start styling an HTML page, we are expected to select or specify the HTML element we want to style, and this task is accomplished with the help of Selectors.

There are six different types of Selectors in CSS that come in handy. Let's have a pretty quick look at the different types now!

Universal Selectors

Rather than specifying a single element, this selector type helps us to universally select all the elements in the HTML page at once.

Example :

*{
color: #ffffff;
}

Element Selector

When we tend to select a specific type of element like all the 'p', i.e., paragraph elements of a page, we can use Element Selector in that case.

Example:

p {
color: #ffffff;
}

Now this will turn the color of all paragraph elements of the page to #ffffff.

Descendant Selector

While styling a particular element that is enclosed inside another element, the Descendant Selector comes in handy and helps us solve our problem.

Example:

ul em {
color: #ffffff;
}

Now the em element, which when only lies inside the ul element, will be assigned the color of #ffffff

ID Selector

Making use of the HTML attribute “id” the id selector helps us to select a specific element.

Selecting using the id selector, we tend to use a hashtag(#) followed by the id of the element.

Class Selector

This selector helps us select an element of a specific class. Now to select the desired element, we use the period (.) character and the class name after the period.

Example:

<p class="center para">Two classes are taken under consideration in this paragraph</p>

Grouping Selectors

Whenever we feel like providing the same style to a group of elements, such as if we feel like providing the same style to our headings or to our paragraphs, we can get help from the grouping selectors.

Example : 

h1 {
color: #ffffff;
}
h2{ 
text-align: center;
}
p{
color: blue;
}

And now, since we have gone through a very informative explanation of the types of selectors, let's get them in use and see how we can actually apply CSS to our pages.

Let’s get started!

Applying CSS

CSS is pretty simple to apply and saves a lot of time and work together! We have a total of three ways that we can use to apply CSS.

The three ways are as follows:

  • Inline Application
  • Internal Application
  • External Application

Let’s have a better understanding of these three applications now.

Inline Application:

Using the style attribute of HTML, we can easily apply CSS to the elements directly in the HTML code, and we won't have the need to make a separate CSS sheet to style the elements.

We start with adding the style attribute to the code, and then within double quotes, we add the CSS styling to the element. Although we do not prefer this application in daily coding as it makes it very time-consuming to style our pages.

Example:

<h1 style= "color: blue">Coding Ninjas</h1>

Internal Application:

The next approach that we can have is using the internal application. This internal application involves the usage of the <style> tag, which is not as same as the style attribute of HTML. Using this tag, we add the CSS code inside the tag and style our elements.

Example:

<style>
h1{
color: blue;
}
</style>

This way involves the CSS code inside the HTML file itself, which is not preferred, and hence we land up using the third approach. Let's see how we can apply CSS in a third way.

External Application:

Making the CSS and HTML files separate is the best approach to keep the code neat and tidy. It also makes it easy to style our pages. We generally tend to keep the HTML, CSS, and Javascript files differently so that the code maintenance becomes easier and we can also make our code readable.

In this application, we tend to make a separate CSS file with the extension of .css, and later we link it to our HTML.

Example:

h1{
color: blue;
}

And now we can link this CSS code (style.css) to our HTML using the below-mentioned code:

<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>


<body>
<h1> Coding Ninjas </h1>
</body>

And now we can conclude that using the third approach, i.e., the external approach is the best practice as we can make our code very much readable and completely maintainable also, styling our sheets becomes easy with the same!

But we still have some questions left, let's see what the frequently asked questions in CSS occur while coding in CSS, and maybe your question lies down here too! So give it a read and have a quick idea about the FAQ's

FAQs

  1. Can we consider CSS to be a programming language?
    We generally do not consider CSS to be a programming language as it determines the look and the style of the web page we build, and it also lacks instructions that are contained within the other front-end languages.
     
  2. What are the three types of CSS applications? 
    the three types of CSS applications are InlineExternal, and Internal CSS.
     
  3. Why do we avoid Inline CSS applications?
    The inline CSS becomes very hard to maintain, and it's pretty tough to change the styling for every element individually. That is why we generally avoid inline CSS.
     
  4. What is the box model in CSS?
    Every element in HTML has a rectangular box around it. The box model is used to assign specific height and width to the rectangular box.
     

Read till here? Let's see what you're going to take away after reading this blog! Have a quick read of the key takeaways, and we're going to be through with the Introduction to CSS.

Key Takeaways

In this article, we went through the introduction of CSS and read the applications of CSS as well.

We concluded that the External application is the best practice, and it comes in handy and helps us to make the code readable and easily manageable.

Liked this blog? And want to solve some interview questions for CSS? Here is a blog for you! Please have a look and also visit our platform CodeStudio for more interview problems!

Happy Learning!

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think