Introduction to Cascading Style Sheet (CSS)

If we talk about CSS, then CSS is a designing language. Which is used to make webpages even more beautiful.

You can apply designing through CSS on HTML tags. You can apply CSS in 3 ways.

• Inline – By this method you can define CSS in HTML tag only. You can do this through the style attribute.

• Internal – Through this method, instead of defining CSS in HTML tag, you can define it with the help of <style> tag in <head> tag of HTML file.

• External – In this method your CSS file and HTML file are different. In the HTML file, you add the CSS file through the <link> attribute.

With CSS you can control the presentation of webpages. Due to which CSS gives you complete control over the design of the webpage. With CSS, you can set text color, font family, background, margin, padding and position etc. on the web page.

Property & Value

CSS is a very powerful technology. With its help, you can also control the presentation of the complete HTML page. CSS works in the context of property and value. For example, if you want to change the background-color of the web page, then for this you have a background-color property and the value you give will be its value.

Whose syntax is being given below –

Property: value;

As I told you above that you use style attribute in inline style sheet. But for internal and external CSS selectors are used in <style> tag.

Selector is the name of the tag, id or class on which you want to apply CSS. Selector will be given to you in the next coming post about what will happen and how it works.

Advantages of Cascading Style Sheet (CSS)

1. Using CSS saves your time. And you can create a CSS file and apply it to multiple HTML documents. You can fix a style for each HTML tag and apply it to as many webpages as you want.

2. Whenever you decorate the webpage through HTML attributes, then you have to define attribute and value separately for each element. So that by doing this the code becomes too much and at the same time the pages load slowly. But if you use CSS, then you can define styles only once for all the tags used in that webpage. By doing this the code remains less and your pages load fast.

3. It was very easy to maintain the webpage through this CSS, for example, if you want to change the color of all the headings, then just change the CSS in it and all the headings according to its id or class or tag But will apply.

4. If you provide more style options than HTML, then you can design more attractive web pages than CSS in comparison to HTML.

5. Through CSS, you can configure the same webpage for multiple devices. For example, different styles can be used for mobile phones.

6. Now the use of HTML attributes is very less. So using CSS has now become a global standard.

Applying Cascading style sheet (CSS)

Inline Style Sheet

You can see the example below

  In this, the style attribute has been defined inside the body tag. After this property and value have been defined in the style attribute. This is called inline style sheet.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body style="background-color:pink">
     <p>This is inline CSS Demo</p>
        
</body>
</html>

Leave a Comment