---
title: "What is CSS in website designing?"  
description: "What is CSS in website designing?"  
author: "Ravi Vishwakarma"  
published: 2021-07-12  
updated: 2021-07-12  
canonical: https://www.mindstick.com/forum/156482/what-is-css-in-website-designing  
category: "web development"  
tags: ["asp.net", "web development", "web", "website"]  
reading_time: 4 minutes  

---

# What is CSS in website designing?

Why [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) plays an important [role](https://yourviews.mindstick.com/audio/1254/the-role-of-visualization-in-achieving-your-goals) in [Web Development](https://www.mindstick.com/services/web-development)? How it is use to HTML.

## Replies

### Reply by 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?](https://www.mindstick.com/mindstickforums/e2e11fba-ea7c-4bda-a8e4-68ce33f5337d/images/e3be2f49-add1-4cee-8ac3-415233c90db9.png)

\


---

Original Source: https://www.mindstick.com/forum/156482/what-is-css-in-website-designing

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
