What is CSS?

What is CSS?

Isha Gupta's photo
Isha Gupta
·

2 min read

Table of contents

No heading

No headings in the article.

Let's understand the basics of CSS first!

CSS stands for Cascading Style Sheet, a web document that allows us to alter the HTML page's design and make it more attractive.

By alter, I mean size, style, color, background, height, width, margin, padding and rest all the properties whatever you want to change. You will learn more about what CSS can do in this series.

Advantage of Using CSS

  1. Page Load Faster as it reduces the file transfer size.

  2. Can be rendered on multiple devices of different screen-ratios.

  3. Easy to maintain because we can maintain separate files for them.

  4. Saves a lot of time as different properties can be re-used for group of HTML elements.

How its applied??

CSS is applied by declaring specific styles for each element in a web page. And that's how the style declaration looks like:

selector {
     property: value;
}

We will look more about it, but first let's see about how to apply.

There are three methods to apply CSS in HTML document.

  1. Inline Styling
  2. Internal Linking
  3. External Linking

1. Inline Styling

Inline styles are written with the HTML tags using the style attribute which looks something like this:

<p style="color: blue">text</p>

This will make that specific paragraph blue.

2. Internal Linking

These are used for the whole page. The style tags are inside the head element that surround all of the styles for the page.

<!DOCTYPE html>
<html>
<head>
<title>CSS Internal Linking</title>
<style>

    p {
        color: blue;
    }

    a {
        color: red;
    }

</style>
</head>
<body>
<p>Check check</p>
<a href="google.com">Google</a>
</body>
</html>

This will make all the paragraphs blue & links red.

3. External Linking

These are used for the whole and multiple-page website. There is a separate CSS file like this:


p {
    color: red;
}

a {
    color: blue;
}

This file is saved as "styles.css" in the same directory as HTML page then we will link it with the HTML file like this:


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

The most efficient way is external linking as it avoid mishaps & give clarity of code when you are changing the styles in future too.

Rest all comes with practice:)

Open editor, notepad, or VS Code & try on your own for better understanding.

CSSCSS3Css for beginners beginnersguidelearnCSS