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