CSS (Cascading Style Sheet)

Into to CSS

CSS is used to style the website.

Methods for adding CSS

There are three methods

Inline CSS

Style directly in the HTML element.

<h1 style="color : Red">My name is Avadhut</h1>

Internal CSS

Using style tags within an HTML file.

<style>
    h1{
        color: red;
    }
</style>

External CSS (Recommended)

Linking an external CSS file.

<link rel="stylesheet" href="style.css">

Common Properties

Examples:

color - set the color of the text
background color - Sets background color of the element
width - sets width of element
height - sets height of element
border - sets border around element
font-size, font-weight, font-family

Color in CSS

3 ways to set color

Words: red ,blue, cyan
RGB: rgb(0,255,0) -> green
Hex: #ff0000 -> red

Specificity

Specificity is the prioritization of the styling

Styling CSS elements

You have multiple ways to reference an HTML element to style it

Id - Highest priority, use for section

<div id = "test"></div>
#test{ color :red; }

Class - Medium priority , use for everything

<div class = "test"></div>
.test{ color :red; }

Dom elements - Normal priority

tag name

<div></div>
div{ color :red; }

Writing !important next to value overrides absolutely everything.

How to be even more specific(Bad Practice)

Current element and selector

div.class

Multiple selectors on current element

.header.title.
#main.button

Parent before the selector

div.class
.header#id

Important at the end

color : red !important;

Box Model

A container that consists of multiple different properties

what does it consist of?

content
padding
border
margin

box-sizing :

border-box
content-box

Use margin to when separating elements.

Use padding to increase space/clickable range .

Complex Properties

Display

two CSS display values

block
- takes 100% of the width and starts on a new line
```
  e.g. <p> <div> tags
```
inline
- doesn't allow you to set a width or height for element & starts on the same line.
```
  e.g. <span> <img> tags
```

Position

CSS position values

static(default)
- Follows normal flow of the page
relative
- Follows normal flow of the page
- lets you position using top, left, bottom, right.
absolute
- Does not follow the normal flow of the page
- lets you position using top, left, bottom, right.
- Position is based off closest 'position : relative' parent
fixed
- Sticks element to a permanent location on the page
- Lets you use top, left, bottom, right
sticky
- Sticks element to a permanent location on the page once it hits a threshold

Media Queries

Media queries are used to make a web page responsive

Common Breakpoints(max-width)

576px mobile phones
768px Tablets
992px Desktops
1200px+ large desktops

@media (max-width: 576px)
{
    div{ font-size: 12px; }
}

Pseudo Selectors

we have 2 pseudo elements in CSS

after
before

use ::

hover

for transition add transition property in the parent element
keyframes

for adding animation

div :: after{ content: name; }

button {
        animation : float 2s infinite alternate-revese;
        transition : all 3s;
}
button: hover{
        background-color: red;
        color: white;
}
@keyframes float{
    0%{
          transform: translateY(0);
          }
    100%{
          transform: translateY(10px);
          }
}

BEM(Block-Element-Modifier)

BEM(Block-Element-Modifier) is a naming convention used for CSS classes to make them easier to read an understand

B[block] is the block component
E[element] is dependent on the block component
M[modifier] is used to change the style of the block

<nav class="nav">
<a href="" class="nav__link nav__link--active">home</a>

nav= block
nav__link= element
--active= modifier

CSS Crash Course