How to design a beautiful website? CSS Super Simplified Explanation
Published: 2022-06-20 00:01:18



## What is CSS?

- CSS stands for Cascade Styling Sheets
- It is a set of rules that determine the look and feel of web pages.

## How do we write CSS?

- First we select the HTML element( or tag)
- Then we provide key-value pairs that depict the element’s design.

```css
selector 
{
	style-name: value;
}
```

Example:

{% codepen [https://codepen.io/chandanbsd/pen/poaBYym](https://codepen.io/chandanbsd/pen/poaBYym) %}


## Where do we write CSS?

We can write CSS in 3 possible locations:

- Inline CSS
- Internal CSS
- External CSS


### **Inline CSS**

- CSS rules are specified as values to the style attribute of the tags
    
    {% codepen [https://codepen.io/chandanbsd/pen/XWZQGMX](https://codepen.io/chandanbsd/pen/XWZQGMX) %}
    
- **Disadvantages:**
    - **Redundant Code:** Say we have ten paragraphs whose text color we need to set to red, then we will have to specify the style ten times which is not a good approach
        
        {% codepen [https://codepen.io/chandanbsd/pen/MWQRxjg](https://codepen.io/chandanbsd/pen/MWQRxjg) %}
      
    - **Hard to maintain:**  Suppose we need to update the style of all paragraph tags, then we would have to search and manually change every occurrence of the p tag.
    - **Impacts page performance:** Inline CSS often increases the HTML document's total size and the webpage's loading time.
    - **Decreases Accessibility:** The purpose of HTML is to only provide structure to content. Mixing style rules and HTML will make it harder for screen readers to interpret the webpage.


### Internal CSS

- Here too we write the CSS within the HTML document. However, all CSS instructions are grouped together and placed under a special HTML tag i.e, `<style> </style>`.
    
    {% codepen [https://codepen.io/chandanbsd/pen/VwQNRpM](https://codepen.io/chandanbsd/pen/VwQNRpM) %}
    
- **Advantages:**
    - Allows CSS styles to be reused between elements
    - Improve the readability and maintainability of code.
- **Disadvantages**:
    - It still increases the size of the HTML document
    - Code may be reused within the same webpage but cannot be shared between multiple web pages under the same website.


### External CSS

- Here we write all the CSS elements in its own .css file and then we use the `<link> </link>`  HTML tag to connect the webpage to the CSS file, i.e. `<link rel = "stylesheet" href = "{ Enter location of CSS file}" />`

- **Advantages:**
    - Complete Code Reusability
        - Similar elements in the same webpage can share the styles
        - We can have a shared CSS file between webpages (Ex: The header, navbar, and footer on any webpage under the same website may share the same styling)

    - Improves Code Readability and Maintainability

    - Web pages load faster since HTML files are not large due to CSS stylings.

```html

<html>
<head>
<link rel = "stylesheet" href = "index.css">
</head>
	<body>
		<p>This line is white but its background is black</p>
		<p>This line is also another white line but its background is black</p>
</body>
<html>
```

```css
body{
	background-color: black;
}

p {
	color: white;	
}
```

{% codepen [https://codepen.io/chandanbsd/pen/VwQNRbM](https://codepen.io/chandanbsd/pen/VwQNRbM) %}


## CSS Selectors

If we write internal or external CSS instead of inline CSS, we need to understand a CSS concept called selectors. There are three main types of selectors
  - Element Selectors
  - Class Selectors
  - Id selectors


### Element Selectors

- Here we use the name of the tag to define the styles.
- The styling will be applied to all occurrences of that tag on the webpage

{% codepen [https://codepen.io/chandanbsd/pen/wvyZOvX](https://codepen.io/chandanbsd/pen/wvyZOvX) %}


## Class Selectors

- Class selectors allow us to identify one or more elements and style them the same.
- We do this by giving the selected tags a `class` attribute and a common value.
- We then write the value prefixed with the`.` while specifying the CSS rule

{% codepen [https://codepen.io/chandanbsd/pen/wvyZOvX](https://codepen.io/chandanbsd/pen/LYQvaVb) %}


## ID selectors

- ID selectors allow us to identify a single element uniquely
- We can do this by using the `id` attribute
- We then write the value prefixed with the `#` while specifying the CSS rule

{% codepen [https://codepen.io/chandanbsd/pen/QWQPobz] (https://codepen.io/chandanbsd/pen/QWQPobz) %}

## How does CSS handle conflicts?

- We saw multiple ways (element, class, and id) to select elements and give them style. We also visited the locations (inline, internal, and external) where the CSS rules may be specified.
- If we use some or a combination of these, then there is a possibility that different styles are specified for the same element.
- To handle such ambiguity, the browser uses a concept known as CSS Specificity. In the simplest terms, the style with the higher specificity takes precedence (or wins).
- **Precedence based on Location of CSS Rule:**
    - Inline CSS has the highest precedence
    - Internal CSS comes next
    - External CSS is the least dominant.
- **Precedence based on Type of CSS Selector:**
    - ID selector has the highest precedence
    - Class selector comes next
    - Element selector is the most minor
- **What if the same selector is used at the same level? What happens then?**
    - In this case, the last rule takes precedence over the earlier rule.