Aug 10, 2020

Cascading Style Sheet (CSS)

Remember HTML(Hypertext Markup Language)? It is the first coding language that anyone looking to build a website should learn. In the same way, CSS is the second such language that one should learn.

Ever got a doubt as to what this CSS is all about? How it works? Where and when to use it? Well, if you have had such questions, you will get all your questions answered here.

Meaning of CSS

Cascading Style Sheet or simply called as CSS is a coding language which makes your plain HTML page into a nice, beautiful and a colourful webpage. It even describes how all HTML elements should be displayed on the screen, paper, or in other media. CSS actually saves a lot of time. CSS page can control the layouts and styles of various HTML pages.

How is CSS related to HTML?

CSS, as the name “Cascading Style Sheet” itself tells, places major emphasis on “Style”. While HTML is used to structure a webpage, CSS specifies the style on the document, page layout, colours, fonts etc, etc. Hence we can say that HTML is the foundation we lay which includes what all should be there on the webpage, how should it be and where should be this includes inclusion of videos, audios, pictures, text etc. and CSS as the aesthetic choices made to make your webpage look beautiful.

How does CSS work?

As we already know that CSS brings style to our webpages by interacting with the HTML elements and when I tell HTML, it is an individual component of the HTML page.

For Ex: Element <p> stand for paragraph in HTML and in the HTML page, it looks like:

<p> This is my paragraph </p>

If you wanted to make this paragraph appear attractive, coloured blue, and with the wordings to look more clearer, then you should use a CSS code that looks like this:

color: blue; font-weight: bold;

}

In the above-mentioned case, “p” (the paragraph) is the called as the “selector” and this is the part of the CSS which specifies the element selected in the CSS code. This selector is the written on the left side of the first curly bracket.

The information that comes in between the two curly brackets are called as the declaration which includes properties and it assigned values. Properties includes: color, font-weight, font-family, background-colour, text-align etc etc while Values are the settings for those properties.

In the above example, it is clear that:

p is the Selector color, font-weight etc., are the Properties and blue & bold are the set Values.

The same above-mentioned principle can be used and we can change the background-color, margin settings, font-sizes etc., of the paragraph.

Methods in CSS

Although you have some idea about CSS, you still might be wondering how the HTML code is actually applied to the HTML content. Much like HTML, CSS is also written in a simple, plain text through a text editor by a word processor on your computer, and there are three main ways to add that CSS code to your HTML pages. They are:

Inline CSS
Internal CSS
External CSS

Inline CSS or Inline styles are like a snippets of CSS which are written directly into the HTML code and it is applicable only to that particular code.

Example: <h1 style=“font-size:10rem; color:red;”> Hello World! </h1>

The outcome of this would be one specific heading on the .html page would appear in red colour with 10rem size.

Internal CSS or Internal styles are the CSS instructions written directly on the head section of an .html page. An internal CSS looks something like this:

<head> <style> body { Background-color: blue;} p {font-family: “Comic Sans MS” , Cursive, color: white;} </style> </head>

Outcome: a blue background colour with a font style of Comic Sans MS and color of the font to be white would be applied to the entire .html page.

And finally, External CSS / external style sheet is saved separately as .css file and can be used to determine the styles of an entire website through one such .css file. In order to use an external style sheet, your .html files should include a header section that links the external style sheet and this looks something like:

<head>

</head>

These are the three types of styles method that can be used in the CSS.

Generally, external style sheet i.e., external css is always more more effective method for implementing the css on a website, while internal and inline CSS are used as a case by case basis when any individual page/element needs to be changes.

Conclusion:

So in the end, if HTML is the foundation, frame, walls or grinders that supports your website, then CSS is the paint colour, window styles and landscaping that comes next followed by HTML. You just cannot get anywhere without putting that foundation up first, but—once you do, then you’ll have to follow it up with some style, and CSS is the best coding tool for unleashing your inner decorator of your websites.