What is CSS in website designing?

Why CSS plays an important role in Web Development? How it is use to HTML.  
Last updated:7/12/2021 7:22:27 AM

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma

CSS

 CSS stands for Cascading Style Sheet is a simple design language to simplify the process of making a web page. CSS handle the look and feel part of a web page. You can manage the color of button, spacing between paragraph, and background changes etc. it provide full control over the HTML page. CSS describe how HTML element are display on screen.

Advantages of CSS

1. CSS save time

2. Easy maintains

3. Platform independent

4. Page load faster

Syntax of CSS

 selector {

  Property1: value1;
  Property2: value2;
  Property-n: value-n;
 }

Example of CSS:

 P {

  color: red;
  text-align: center;
 }

CSS selector

1. Id selector

2. Class selector

3. Tag name selector

4. Universal selector

Id selector

 The id selector uses the id attribute of an HTML element to select a specific element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

 #id-name{

  Property: value;
 }

Class selector

 To select elements with a specific class, write a period (.) character, followed by the class name.

 .class-name{

  Property: value;
 }

Tag name selector

 To select elements with a specific tag name, followed by the tag name.

 tag-name{

  Property: value;
 }

Universal selector

 The universal selector (*) selects all HTML elements on the page by using the asterisk (*).

 *{

  Property: value;
 }

How to insert the CSS in HTML page

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS

 An inline CSS may be used to apply unique style for a single elements. This CSS write in style attribute, style CSS contain the any CSS property.

Internal CSS

 The internal style sheet may be used if one single HTML has a unique style. This is used by style tag, this tag written in head tag.

External CSS

 We can change the look and feel of an entire page by one page. This external page link by the link tag, in link tag use href attribute put stylesheet location in href attribute.

Example of CSS.


<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' type='text/css' href='style.css' />
    <title>style demo with html</title>
    <style type='text/css'>
        /* tag name selector */
        div p {
            background-color:green;
        }
        /* class selector */
        div .ilp2 {
            background-color:black;
        }
        /* id selector */
        #inp2 {
            background-color:pink;
        }
    </style>
</head>
<body>
    <div>
        <!-- external css-->
        <p class='ilp1' >This is external css </p>
        <!-- internal css -->
        <p class='ilp2'>This is interanl css </p>
    </div>
    <div>
        <!-- internal css -->
        <p id='inp1'>this is internal css</p>
        <p id='inp2'>this is internal css</p>
    </div>
    <div>
        <p >this is inline css</p>
        <p style='color: navy;'>this is inline css</p>
    </div>
</body>
</html>

Style.css
*
{
    margin:0px;
    padding:0px;
    text-align:center;
    text-justify:auto;
}
body
{
    margin:10px;
    padding:10px;
    color:white;
}
/* tagname selector */
div p {
    color:red;
}
/* id sector */
#inp1 {
    color:gray;
}
/* class selector */
.ilp1 {
    color:yellow;
}

Output –

What is CSS in website designing?


Answer