# A Complete Guide to CSS fundamentals

## Introduction

When we talk about CSS, it's feel really hard and it's too much of a hassle to learn. Because some people think CSS is not any programming language. So it will be easily to learn and understand concepts. But, ultimately it's not that easy to get master, there is lot of CSS fundamentals that you should know about.

I am going to explore some of the important parts of CSS that we used on our daily basis.

## CSS Fundamentals

Here, I am going to explore some of the most important CSS Fundamentals which is required for our daily works.

## CSS syntax

There are three important parts of CSS - selectors, properties, and values.

1. **Selectors** - the elements are being selected
2. **Properties** - the elements that are being styled
3. **Values** - the styles that are used

**Example:-**

  selector {
     properties:value;
  }

## CSS Selector

Here, are the one of the most important types of selector:-

* [Universal Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors):- it selects all the elements.
* [Type Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors):- it targets a particular elements by using HTML Tag.
* [Class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors), [Attribute Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors):- you can target a particular elements by using class or attributes.
* [ID selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors):- it lets you target element by using ID.

 * {
  /* Universal selector */
}

tag {
  /* Type selector of the HTML tag */
}

tag::before {
  /* Type selector */
}

.class {
  /* Class selector */
}

.class:hover {
  /* Class selector */
}

[attr] {
  /* Attribute selector */
}

#id {
  /* ID selector */
}

## CSS Properties

Here is a list of all the CSS attributes that, in my opinion, are a must-know.

These are properties will able todo anything.

padding, margin, border
background
color, font-family, font-weight, font-size, line-height
width, height, max-width, max-height

**Layouts**

position, z-index, top, right, bottom, left
display, flex, align-items, justify-content
@media

## Box Model

CSS displays everything as a box. So, one of the fundamental building blocks of CSS is understanding how the CSS Box Model functions.

Based on their display value, predetermined size, and inside content, boxes behave differently. Additional boxes created by child components or simple text content might make up this content. In any case, the size of the box will be impacted by this content by default.

Use extrinsic sizing to take control over this, or use intrinsic sizing to continue letting the browser decide depending on the size of the content.

Boxes are composed of separate box model sections, each of which performs a specialised function.


Here, is the explanation for the box model.

* **Content** - The content of the box, where text and images appear
* **Padding** - Clears an area around the content. The padding is transparent
* **Border** - A border that goes around the padding and content
* **Margin** - Clears an area outside the border. The margin is transparent.

## Flexbox

Flexbox is a layout tool created for arranging collections of things in a single dimension. Use this module to learn how to use it.

A sidebar that is positioned inline with certain content is a design element that might be challenging in responsive design. This pattern works well when there is room in the viewport, but when there isn't much room, the inflexible design can cause issues.

For one-dimensional content, the Flexible Box Layout Model (flexbox) is a layout model. It excels at returning the optimal arrangement for a collection of things with varying sizes.

**What is a flex layout good for?**

1. They can show up as either a row or a column.
2. They respect the document's style of writing.
3. By default, they are single lines, but you can request that they wrap onto more than one line.
4. The layout's elements can have their visual order changed such that it differs from the DOM's order.
5. The distribution of space allows the objects to change in size in accordance with the volume of their parent.
6. Using the Box Alignment settings, space can be added around the elements and flex lines in a wrapped layout.
7. On the cross axis, the elements themselves can be oriented.

**Flex Contanier Reference:**

| Property | Values |
| -------- | -------- |
| flex-direction | row, column, row-reverse, column-reverse |
| flex-wrap | wrap, nowrap |
| align-items | flex-start, flex-end, center, stretch, baseline |
| justify-content | start, center, end, space-between, space-around, space-evenly |

### Creating a Flex Container

We already know that a bunch of default block elements will stack each other:

<section>
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</section>


So Know, how we can able to make elements side-by-side, this can happen using flex container.

<section class="flex-container">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</section>

.flex-container {
  display: flex;
}


Here, you can see that inner elements are aligned in a horizontally. By default, a flex container is set to `flex-direction:row`. you can also update the inner elements in a column wise using `flex-direction: column`

Know, let's take an example to demonstrate the Flex. so, here we are going to create navigation bar with flex.

Here, are the list what navigation bar will look like:-

1. Logo name to the left hand side
2. nav links to the right hand side
3. all items vertically centered

<nav>
  <div>Brand name</div>
  <div>
    <a href="#!">About</a>
    <a href="#!">Contact</a>
  </div>
</nav>

nav {
  background: blue;
  height: 80px;
}

Here, how the layout will looks.

We'll make the navbar flex, so the brand name and nav links will be horizontal.

nav {
  display: flex;
}


Now we want everything to be vertically aligned. With `align-items: center`, we can vertically align items within a flex container.

nav {
  display: flex;
  align-items: center;
}


Now we want the brand and links to be on opposite ends of the navbar. With `justify-content: space-between`, we can tell the items in the flex container to be spaced apart as far as possible.

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


After that just little padding and having a proper navbar with good spacing.


## Grid

CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer.

It's crucial to comprehend the vocabulary before delving into the principles of Grid. If you don't initially commit to memory the definitions provided by the Grid specification for the terminology used in this context, it's easy to confuse them with one another because they are all conceptually quite similar. But fear not—they are few in number.

1. **Grid Container**:- The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

2. **Grid Item**:- The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

3. **Grid Line**:- The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

4. **Grid Cell**:- The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid.

### Creating Grid

A gallery frequently contains a number of cards or images that ought to be arranged in a repeating grid. The horizontal items in a flex container will always be horizontal by default.

<section class="flex-container">
  <div>div 1</div>
  <div>div 2</div>
  ...
</section>

.flex-container {
  display: flex;
}


We can make the grid repeat onto as many lines as necessary with flex-wrap.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}


## Responsive: Media Queries

If you want to make your websites responsive use media queries. because it helps to adapt your websites through mutliple screen size. With the help of media query you let CSS to handle your screen size below on a certain width or above certain width.

@media screen and (min-width: 800px) {
  /*  styles to any device screen sizes above 800px wide */
}

@media screen and (max-width: 800px) {
  /* styles to any device screen sizes below 800px wide */
}

If you've ever heard of the phrase "mobile-first," it means constructing a website first for mobile devices and adding` min-width` media queries as needed as screen sizes increase.

@media screen and (min-width: 800px) {
  /*  styles go here */
}

>**Note:**- @media queries can be nested inside a selector. In this example, an h1 has font size of 38px by default, but 22px on larger screen sizes.

h1 {
  font-size: 38px;

  @media screen and (min-width: 800px) {
    font-size: 22px;
  }
}

**Example:**

media enquiries can help to include a breakpoint where specific components of the design will act differently on either side.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Tourist Place</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>The City</h1>
    <p>Sydney is the capital of the Australia region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>Sydney is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Sydney airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Here, is the output for the responsive as shown below.

1) Desktop Mode

2) Mobile Mode

## Conclusion
Read the theory of CSS first to understand what it is, how it functions in browsers, and the fundamental syntax and usage. Because getting fundamentals understanding better will lead you to understand any library easily.

In order to better understand CSS foundations, I have attempted to keep this in mind. I think this will be very helpful to you. Gratitude for reading.