Web Basics Episode 2: Introduction to CSS
Tags: css, html, webdev
Published: 2021-09-02 06:04:50

## Introduction
In this series, I will try to discuss Web Basics Topics. In the first episode, the [HTML Basics](https://dev.to/fahidlatheef/web-basics-episode-1-introduction-to-html-4cn7) were covered. In this episode, I will try to cover the Basic CSS Concepts.

## Table of Contents
- [What is CSS?](#what-is-css-)
- [CSS Example](#css-example)
- [CSS Selectors](#css-selectors)
  * [CSS Selectors Examples](#css-selectors-examples)
- [Ways of adding CSS to our HTML file](#ways-of-adding-css-to-our-html-file)
- [CSS Box Model](#css-box-model)
- [CSS `display` property](#css--display--property)
  * [`inline`](#-inline-)
  * [`inline-block`](#-inline-block-)
  * [`block`](#-block-)
- [CSS Position Property](#css-position-property)
- [CSS Structural Classes](#css-structural-classes)
  * [Some Structural class examples](#some-structural-class-examples)
- [CSS Specificity](#css-specificity)
- [CSS Media Query](#css-media-query)
- [Conclusion](#conclusion)
- [References](#references)

## What is CSS?


CSS (Cascading Style Sheets)  is the language for describing the presentation of Web pages, including colours, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. Moreover, CSS saves a lot of work by allowing us to control the layout of multiple web pages all at once.

## CSS Example
This is an example of an CSS file.

```css
body  {  
background-color:  lightblue;
font-family:  verdana;  
font-size:  20px;  
}  
  
h1  {  
color:  white;  
text-align:  center;  
}  
```

In this example, we define the `backgound-color` of the `body` to light blue, with  a `font-family` of verdana with 20px `font-size`. Now for the `h1` headers, we define the `color` (text color) white and align the text centrally using `text-align`.


## CSS Selectors
A CSS selector helps us selecting the HTML element(s) we want to style.

We can divide CSS selectors into five categories:

-   **Simple selectors**: Select elements based on 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
 
### CSS Selectors Examples
- **CSS Element Selector**

```css
p {  
text-align:  center;  
color:  red;  
}
```
Here all `<p>` (paragraph) elements are styled.

- **CSS ID Selector**
```css
#section-intro {  
text-align:  center;  
color:  red;  
}
```
 Here HTML element with ID *section-intro* is styled.
- **The CSS Class Selector**

```css
.center {  
text-align:  center;  
color:  red;  
}
```
Here all HTML elements with class name *center* is styled.
 
- **The CSS Universal Selector**

For universally selecting all HTML elements on the page, the following code is used.
```css
* {  
text-align:  center;  
color:  blue;  
}
```

## Ways of adding CSS to our HTML file
There are three ways of inserting a style sheet:

-   External CSS
-   Internal CSS
-   Inline CSS

## CSS Box Model

The CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

![Box Model](https://www.washington.edu/accesscomputing/webd2/student/unit3/images/boxmodel.gif)

## CSS `display` property

The `display` property specifies the display behavior of an element.

Usage:
```css
.class-name{
display: block;
}
```

### `inline`
Displays an element as an inline element. Any height and width properties will have no effect on it. Moreover, inline elements are forced to stay on the same line. Here are a few elements that have a default  `inline`  property:

-   `span`
-   `a`
-   `img`

###  `inline-block`
Displays an element as an inline-level block container. You can set height and width values. It’s essentially the same thing as  `inline`, except that we can set height and width values.

###  `block`
The element `block` starts on a new line and takes up the full width available. So that means block elements will occupy the entire width of its parent element.

Here are a few elements that have a default  `block`  property:

-   `div`
-   `h1`
-   `p`
-   `li`
-   `section`

## CSS Position Property
The `position` property specifies the type of positioning method used for an element. For example, `static`, `relative` and `absolute`

- `position: static;`
	* HTML elements are positioned static by default.
	* Static positioned elements are not affected by the top, bottom, left, and right properties.

	* An element with `position: static;` is not positioned in any special way; it is always positioned according to the normal flow of the page.

- `position: relative;`

	* An element with `position: relative;` is positioned relative to its normal position.

	* Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. 
	* Other content will not be adjusted to fit into any gap left by the element.

- `position: absolute;`

	* An element with `position: absolute;` is positioned relative to the nearest positioned ancestor.

	* If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

	* Absolute positioned elements are removed from the normal flow, and can overlap elements.

## CSS Structural Classes

Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements. We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.

### Some Structural class examples

| Example | Select(s) |
|--|--|
| `:first-child` | The first child of its parent |
| `:last-child` |  The last child of its parent|
|  `:nth-child(2n+1)`| Every odd child  |
|  `:nth-child(2n)`| Every even child  |
|  `:nth-last-child(2n+1)`| Every odd child element starting from the last element  |

## CSS Specificity

Sometimes, CSS rules conflict. For example, if multiple selectors target the same element in a document, the rules to be applied is determined by CSS specificity. In CSS, different selectors have varying weights. When two or more rules conflict on the same element, the more specific one applies.

These are the Specificity priority of different selectors

1.  **Inline CSS:** Inline CSS appears as style attributes in the opening tag of HTML elements. Since this CSS is closest to the HTML, it has the highest level of specificity.

2.  **ID selectors:** An ID is unique to a page element and thus, very specific.

3.  **Class selectors, attribute selectors, and pseudo-class selectors:** These three selector types have equal specificity. If all three types are applied to the same HTML element, the one appearing latest in the style-sheet will apply and override the rest.

4.  **Type selectors**: These select all HTML elements that have a given node name and have the syntax **element**. These are element names and pseudo-elements.

## CSS Media Query
Media Query is very helpful in creating **responsive web designs** which works well with all types of devices. It uses the `@media` rule to include a block of CSS properties only if a certain condition is true.

```css
@media only screen and (max-width: 600px) {  
body {  
background-color: lightblue;  
}  
}
```
In the above example, if the browser window is 600px or smaller, we set the `background-color` to lightblue.

While developing web pages, it is advised to create the **mobile version first** before other screen sizes.

## Conclusion
That concludes the Introduction to CSS topic.

## References

[CSS Basics w3schools](https://www.w3schools.com/css/)

[Box Model](https://www.washington.edu/accesscomputing/webd2/student/unit3/module4/lesson1.html)

[CSS display property](https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/)

[Structural Classes](https://www.web4college.com/css/web4-css-structural-classes.php)

[CSS Specificity](https://blog.hubspot.com/website/what-is-css-class)