CSS Post

It is very important to have comments in the code as these are suppose to give a brief but specific information to the reader of the code about what the code is supposed to do. CSS offers both multi-line and single-line comments.

A comment in code is simply the information that is ignored by the browsers while executing the code. In CSS, one can write some styles and then comment them out so those styles could be ignored by browsers.

With that said, let's have a look at some of the common forms of comments in CSS.

## Single-line comments

Below is the example of a single-line comment which just gives a brief information about what the below code is supposed to do.

```css
/* To change colour to red */
p {
  color: red;
}
```

## Multi-line comments

Below is the example of a multi-line comment which just gives a brief information about what the below code is supposed to do.

```css
/* 
  To change colour to red
  To change background green
*/
p {
  color: red;
  background-color: green;
}
```

## Ignoring Styles

Below is the example of a comment which is just written, may be, for the purpose of testing during development but was intended to get ignored while final code runs.

```css
p {
  color: red;
  background-color: green;
  /* font-size: 20px; */
}
```

## Comments in front of styles

Below is the example of a comment which is just written to explain the us of a particular style.

```css
p {
  color: red;
  background-color: green; /* To change background colour to green */
}
```

## Conclusion

The key take away from this article are as follows:

- Comments are used improve code readability
- Comments should be concise and to the point
- CSS offers both multi-line and single-line comments.

CSS Comments

CSS selectors are used to find or select the HTML elements one want to style. These can be divided in to five broad categories as follows:

- **Simple selectors** (select elements based on element's name, id, class)
- **Combinator selectors** (select elements based on a specific relationship between them)
- **Pseudo-class selectors** (select elements based on a certain state)
- **Pseudo-elements selectors** (select and style a part of an element)
- **Attribute selectors** (select elements based on an attribute or attribute value)

In this article, the prime focus will be on the simple selectors.

## The element selector

In order turn the colour of all paragraphs appearing on a web page to red, one could select all **p** elements with following code:

```css
p {
  color: red;
}
```

## The class selector

In order turn the colour of all html elements to which a class of **red**, for example, is given in the markup, one could select all elements with the class of **red** and change their colour with following code:

```css
.red {
  color: red;
}
```

## The id selector

In order turn the colour of an html element to which an id of **red**, for example, is given in the markup, one could select that element with the id of **red** and change its colour with following code:

```css
#red {
  color: red;
}
```

## The universal selector

There may be situations when one needs to apply particular styles to all elements in a web page. That is usually the case when one wants to remove margin and padding property from all items as all elements have margin and padding property by default which are set by the browsers. In order to remove that margin and padding, one can use the universal selector in CSS with below code:

```css
* {
  margin: 0;
  padding: 0;
}
```

## The grouping selectors

There may be situations when one wants to apply exact styles to more than one elements or classes on a page. In that case, one can group them together separated by a comma and apply the styles all at one. Have a look at below example:

```css
h1,
h2,
h3,
p {
  color: red;
}
```

## Conclusion

The key take away from this article are as follows:

- There are different kinds of selectors in CSS like elements, classes, etc.
- One can group multiple elements together separated by a comma to apply same styles to all these elements.
- One can use universal selector to apply particular styles to all items on a page.


Selectors in CSS

First and foremost, it is important to take a note to the point that **CSS is stylesheet language** and **it is not considered a proper programming language**. This is because it was not designed for programming purpose back in the day. CSS was developed and released with the sole of premise of separating the content from its related styles so that code maintenance could become easier and development time and developer experience could be increased.

The word cascading comes the word cascade, the literal meaning of which is to flow down. In CSS context, this means that styles written are CSS are read from top to bottom and in the case of conflicting styles, the styles written at the bottom are considered the final styles. However, this is not the end of the story. There are some other considerations which are also taken into account while determining the final styles which will be discussed in a another article.

## How to install CSS?

CSS is something that comes packed with browsers by default and **it does not need to get separately installed** on the system. The thing one needs to get installed is the web browser which is the environment in which HTML gets rendered and styles relating to that HTML are also applied using default CSS values of the browser. Whatever operating system one is using, the operating system also comes with some default browser like edge for Windows, safari for Mac etc.

## How one can write CSS?

There are three ways one can write CSS, which are listed below:

1. **Inline CSS** (written under html tag as an attribute to that tag.)
2. **Internal CSS** (written in the same html file under style tag where styles for that particular page defined.)
3. **External CSS** (written in a seperate file which is then linked to respective html files where one wants to use those style.)

It is always recommended to write external CSS as it ensures better separation of concerns and avoids repeating the same styles multiple times in different html files of a single project or in different elements in an html page. However, it is considered fine to use internal CSS where styles are minimal like 20 to 40 style. In no way, inline CSS is considered a good practice.

### How to write basic CSS?

The basic syntax of writing CSS can be explained in the below list:

1. **selector** (which could be any html tag one wants to style)
2. **declaration block** (this is where styles are to be defined)
   1. **property** (the property one wants to style)
   2. **value** (the value which one wants to set for a selected property)

In terms of code, suppose one wants to change the colour of a paragraph element to red. It can be done with below code following above steps:

```css
p {
  color: red;
}
```

#### Inline CSS

It is never recommended to use inline CSS in an html document. However, for the sake of illustration, below is the example of inline css which simply turns the color of the element, in which CSS is used, to red.

```html
<p style="color:red;">This is a red paragraph.</p>
```

#### Internal CSS

Below is the example that shows how to use CSS within the same html file.

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

#### External CSS

This is the recommended method of writing CSS. In this method, one has to create a seperate CSS file and link that file to any html file wherever one wants to use those style.

Suppose one has created a folder on the desktop by the name _styling-html_ and within that folder, a new file is created by the name of _index.html_ with the following code:

##### index.html (without styles)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

After that a new file is created within the same directory by the name of _styles.css_ with the following code:

##### styles.css

```css
h1 {
  color: purple;
}

p {
  color: green;
}
```

The style file as mentioned above, has been created but it does not have any impact on _index.html_ file simply because _index.html_ have no clue that certain custom styles also exist. In order let _index.html_ know of styles, one needs to link _styles.css_ file to _index.html_ with the below line (provided same directory structure was followed). The below code needs to be entered in **head** element of the **index.html**.

```html
<link rel="stylesheet" type="text/css" href="./styles.css" />
```

After entering the above line of code, the final look of _index.html_ should be as follows:

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <title>My Site</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

And after this if this file i.e. _index.html_ is run in the browser, it should display the heading with purple colour and paragraph with with green colour.

## Conclusion

The points to remember mentioned in this post are as follows:

- CSS stands for Cascading Style Sheets.
- It is a stylesheets language that is used beautify the content on a web page.
- CSS files need to be saved with **.css** extension at the end of a file name.
- There are three methods of writing styles for html and the recommended method is to use external CSS file.
- The basic syntax of writing CSS is **selector &rarr; declaration block &rarr; property &rarr; value**.

HTML posts

CSS Comments

Selectors in CSS

What is CSS?