home CSS What is CSS? Selectors in CSS Pseudo Classes Pseudo Elements Selector Specificity CSS Units CSS colors:
Block Elements Inline Elements
Box Model
Border-box Content-box
Box Sizing Position Property Stacking Context
Flex Container Flex Items
Grid Intro Grid Container Grid Items
CSS Transition CSS Animation

CSS (Cascading Style Sheets) Basics

What is CSS?

  • CSS is the primary way to add styling to web pages and it is the collection of declarations. Like property: Value; For example: change the background color of the page, change the colors of the text etc.
  • For example: change the background color of the page, change the colors of the text etc.
  • CSS has two primary purposes.
    • It allows us to style our website by adding colors,fonts,..etc
    • It allows us to describe the layout of how we want our website to be presented. Like size and positioning of the website.
  • Cascading : Refers to the order of which the browser decides between various style sheets.Specifically there are 3 main style-sheets
    • User-agent stylesheets - It defines the browser defaults
    • User stylesheets - It contains any of the user saved preferences in the browser. These override the user-agent stylesheet
    • Author stylesheets -It contains the css code that we write.
  • Declarations: Referred to as individual rules
    • It is a property value-pair in the form of Property : Value. Ex:- Color : red;
  • We tell the CSS what elements that we want to style by including our declaration in ruleset
  • Ruleset: It has two primary components i.e the selector and the declaration block
    • Selector: It determines which elements should be affected by this rule set.
    • h1, p { Color : blue; Margin : 10px; } → Here h1,p are the selectors of the ruleset and the rules inside the {} is the declaration block
  • Comments in CSS:
    • /*.............*/
  • Linking the CSS to HTML :
    • We use link tag <link> which goes into the head tag <head> of the html since it doesn't effect the actual markup of the page
    • Link tag takes two primary attributes
      • Rel or relationship attribute = This says what the relationship of the linked document is.
      • Href or hypertext reference = This works just like other HTML href attributes i.e it provides the path for the navigation either relative or absolute.
    • <link rel=”Stylesheet” href=”style.css”/>

      • The HTML CODE

      <!DOCTYPE html>
      <html>
      <head>
      <title>HTML & CSS BASICS</title>
      <link>rel="stylesheet" href="style.css"/>
      </head>
      <body>

      <h1>Hello World</h1>
      <p>I am a Web Developer</p>

      </body>
      </html>

      The CSS CODE

      .flex-container {
        text-align: center;
        color: blue;
        font-weight: normal;
        text-decoration: underline;
      }       .flex-container {
        background-color: blue;
        color: white;
        height: 100px;
        font-size: 1.25rem;
      }

Selectors in CSS

  • * - Universal selector/generic selector
  • For selecting two elements we separate them with commas
  • Class selector : Selects only a specific element at first we use the class attribute i.e for example class= red
    • While selecting the class in css we use the .dot operator with attribute value name i.e .red.
    • .red, h1 - when we want to select more than one.
  • Id attribute: Unique identifier similar to class
    • #red - this is how we use it in css files.
  • Child selector:
    • Ex: footer > p :: which means the style will be applied to the child <p> of the <footer>
      • footer > p{
      color: black;
      font-size: xx-large;
      text-align: center;
      }
  • Sibling selector: The elements that share the same parent.
    • Ex:: h2 ~ a -> Which means to selects all the <a> tags that are sibling of <h2>
    • H2 + a -> this selects only the adjacent <a> sibling of <h2> tag

Pseudo Classes :

  • In CSS pseudo classes are used to select elements based on their current state in the DOM. or
  • A pseudo class is a keyword added to the selector that specifies a special state of the selected elements.
    • Ex: Hover is used to change the button's color when the user hovers it
    • It uses single colon :
    • button:hover{ color : bule; }
  • Pseudo-classes lets us apple a style to the element not only to the content of the DOM tree, but also for the external factors like the history of the navigator (:visited, :checked, :hover)
  • :checked:
    • This pseudo-class selector represents any input element of type radio, checked, option
    • Ex:
      input:checked{
      color: red;
      }
    • Output:
  • :visited:
    • This pseudo-class selector represents that the user has already visited the link previously
    • Ex:
      a:visited{color: green;}
    • Output:
  • Allowable CSS properties are:
    • color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color
  • Styles defined by :visited pseudo-class will be overridden by the subsequent link-related pseudo-classes such as :link,:hover,:active
    • :link:-
      • This pseudo-class represents an element that has not yet been visited.
    • :hover:-
      • This pseudo-class is triggered when the user hovers an element with the cursor(mouse pointer)
      • HTML:
      • CSS:
        button:hover{
        background-color: rgb(246, 76, 24);
        border-radius: 1px;
        }
      • Output:
    • :active:-
      • This represents an element(such as buttons) that is being activated by the user. Ie it highlights the button when clicked on the button.
  • Input pseudo-classes: Refer this link to know more

Pseudo Elements :

  • In CSS pseudo elements are used to select the specific portion of an element.
  • For Ex: To select the first letter or first line of a paragraph
  • It uses double colon ::
    • p::first-letter{
    color: blue;
    font-size: larger;
    }
    p::first-line{
    color: blue;
    font-size: larger;
    }
    P::before{
    content: ">";
    }
    P::after{
    content: "!";
    }

Selector Specificity: [learn more]

  • What happens to the conflicting declarations ?
    • Here the specific selectors win
    • The most “specific ” selector is used
    • Defaults to the last rule in the stylesheet
  • How to calculate the specificity ?
    • We split up each type of selector, then we provide them a value and finally we count up how many of each type we have and multiply them by values that are assigned to them. The final result is called the weight and then we choose whichever rule that has the highest weight.
      • Inline styles: 1000pts
      • ID’s: 100pts
      • Classes: 10pts
      • Pseudo classes: 10pts
      • Attributes: 10pts
      • Elements: 1pt
      • Pseudo elements: 1pt
    • a[href="https://algoexpert.io"]{
      color: red;
      }
      section.links a {
      color: blue;
      }
    • which style will be applied from example1 & example2?
      • Example1:
        a[href="https://algoexpert.io"]{
        color: red;
        }
      • For the above style, we will calculate the weight
        • a = element ->1pt
        • href = attribute->10pts
        • Total = 11pts
      • Example2:
        Section.links a {
        color: blue;
        }
      • For the above style, we will calculate the weight
        • Section = element ->1pt
        • Links = class ->10pts
        • a = element ->1pt
        • Total = 12pts
    • From Example1 & Example2, the second style has more specificity.

CSS Units:

  • Various units for Lengths:

    • Px:

      • pixels, absolute length
      • This is the most basic unit where pixels are the absolute length[they dont scales as the items around them or if the user stylesheet has larger sizes on it]
      • Example:

    • Em:

      • relative to font size
      • If there is not parent set then it will take the default browser size i.e 16px multiplied by X em
      • Note: em is relative to only the font-size not the other css properties.
      • Font-size:
        • Example1: with no parent font-size, the default will be multiplied to em
        • Example2: if we have the parent the font-size will be calculated with the parent font-size
      • Padding:
        • Example1: If we have the font size and padding in the same css property and it does not have the parent. In this case padding = font size * padding * default px
        • Example2: If we have the font size and padding in the same css property and it has the parent. In this case padding = font size * padding * size of parent
      • If the parent has em, see the below example how the size or padding is calculated
        • Size:
        • Padding:

    • Rem:

      • relative to root element font size
      • By default this is 16px, but we can change this
      • Example:

    • Vw:h

      1% of viewport widt

    • Vh:

      1% of viewport height

    • Ch:

      width of “0” character

    • %:

      percentage, usually relative to parent value

  • Guidelines : Widths / Heights

    • % to be relative to parent
    • vw/vh to be relative to viewport
    • Ch for paragraph widths
    • Rem for color to absolute values
    • Px as a last resort for true absolutes.

  • Guidelines : Margin/padding

    • Rem for closer to absolute values
    • Em for scale with font size
    • Px for small values, last resort

  • Guidelines : Borders/shadows

    • Px for small values
    • rem/em - okay to have because scalability doesn’t always look great

CSS Colors:

  • KeyWords: red, blue, etc
  • Hex RGB: #4B7DAF
  • RGB: rgb(75,125,175)
  • RGBA: rgba(75,125,175,.5) a= alpha value -opacity
  • HSL: hsl(210,40%,49%)
  • HSLA: hsla(210,40%,49%,.5)

Block Elements vs Inline Elements:

Block Elements

  • An element with its display property set to block is called block elements
    • They start on the new lines
    • By default they take the entire width of their parent
    • For example: div,h1 - h6,p,form,header,footer,section

  • HTML:

    <!DOCTYPE html>
    <html lang="em">
    <head>
    <title>Block Vs. Inline Elements</title>
    <link rel="stylesheet" href="practice.css"/>
    </head>
    <body>
    <p>I am a paragraph</p>
    <p>I am <em>another</em> paragraph with Emphasis tag</p>
    </body>
    </html>

  • CSS:

    p{
    border: 2px solid black;
    }
    em{
    border: 2px solid red;
    }

  • Output:

  • From the above output the paragraph tag, regardless of how much text is actually in it, that border is taking the entire width of the parent i.e to the entire width of the body. The reason for this is that the paragraph tag defaults to the block level element.
  • Block level elements do two things
    • One they default to taking up the entire width of their parent
    • And two, they start on a new line
    • So, regardless of how big the paragraphs are, they start on a new line
    • We can also change the default width of the block level elements using width as below
      p{
      width: 30vw;
      border: 2px solid black;
      }
      em{
      width: 30vw;
      border: 2px solid red;
      }
    • OutPut:
  • Here is the list of Block elements.

Inline Elements

  • An element with its display property set to inline. These have a few key properties.
    • They start immediately after the content before them, without a new line
    • They have the width of their content
    • Width and height properties have no effect on them.
    • For Example: span,a, img tags
  • The emphasis tag on the other hand is an inline element. An inline element doesn't start on new lines and they only take up the width of their content.
    • For inline elements like em tag, if we give width=100vw & height = 100vh in css and nothing is going to change. It is because it is an inline element, it just looks at the width of its content and it doesn’t care what values we set for it in css.
    • If we ever want to change the width/ height of the inline elements, we can do this with the display property. i.e
      em{
      display: block;
      height: 100vh;
      width: 30vw;
      border: 2px solid red;
      }
  • What display: block does is that it allows us to give the height and width. I.e if we give the height & width without display: block they won't work. They will work only when we give a display:block.
  • display:Inline : If we give this property then the height or width given within that css will not work as it is an inline.
  • Display: Inline-block: In this case it works as the inline and block that is the width or height given with in the css will work for that element
  • Here is the list of Inline elements.

Box Model:

  • The CSS box mode is essentially a box that wraps around every HTML element. Is consists of margins, borders, paddding, and the actual content.
  • Explanation of the different parts:
    • Content - The content of the box, where text, images appear and its dimensions are given by content-box width and height.
    • Padding - This is the space around the text/content/img. The padding is transparent and Its dimensions are given by the padding, padding-top, padding-right, padding-bottom and padding-left
    • Border - A border that goes around the padding and content. Its dimensions are given by the border, border-color, border-style, border-width. Example: border: 1px soild black A border-radius can be also be used to create rounded corners on an element, regardless of if it has a border. This defines the radius of the corners, and a value of 50% is often used on square elements to create a circle. Additionally, border-top, border-right, border-bottom and boder-left can be used to set borders on single side of an element.
    • Margin - This is the space around the border. The margin is transparent and the dimensions by margin, margin-top, margin-right, margin-bottom, margin-left. A value of auto can also be used to allow the browser to choose margin, which will usually center block block elemenets horizontally.

Box Sizing:

  • The CSS box-sizing property sets how the total width & height of the element is calculated (or) The box-sizing property in CSS defines how the user should calculate the total width and height of an element i.e padding and borders, are to be included or not.
    • Synatx
      • box-sizing: content-box|border-box;
  • In the CSS box-model, by default the width & height we assign to an element is applied to the elements content box. But if that element has any border or padding, this border & padding is added to the width & height. This means that when we set width & width, we have to adjust the value we gave to any border or padding that may be added.
  • The box-sizing property can be used to adjust this behaviour:

    • Border-box:

      In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added,and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
      • box-sizing: border-box; Example:
        • HTML CODE:
          <!DOCTYPE html>
          <html lang="em">
          <head>
          <title>Block Vs. Inline Elements</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link rel="stylesheet" href="practice.css"/>
          </head>
          <body>
          <div id="div1">This is div1</div>
          <div id="div2">This is div2</div>
          </body>
          </html>
        • CSS CODE:
          #div1 {
          width: 100px;
          background-color: lightblue;
          }
          #div2 {
          width: 100px;
          border: 10px solid black;
          padding: 12px;
          background-color: orange;
          }
      • From the above Example, we have same widths for both the div's. But the output shows different widths. This is because the second div has the padding and border which is impacting the actual width i.e actual width = 100px + padding on left + right = 24px + border on left + right = 20px. i.e total width = 100+20+24 = 148 px is the width of the second div.
      • To overcome the above problem we use the box-sizing: border-box; this will make the content box shrink to abosrb the extra width of padding or border.
        • We can give the box-sizing: border-box; as the universal property or we can give it to single element
        • HTML CODE:
          <!DOCTYPE html>
          <html lang="em">
          <head>
          <title>Block Vs. Inline Elements</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link rel="stylesheet" href="practice.css"/>
          </head>
          <body>
          <div id="div1">This is div1</div>
          <div id="div2">This is div2</div>
          </body>
          </html>
        • CSS CODE:
          < !-- *{
          box-sizing: border-box;
          } -->
          #div1 {
          width: 100px;
          background-color: lightblue;
          }
          #div2 {
          box-sizing: border-box;
          width: 100px;
          border: 10px solid black;
          padding: 12px;
          background-color: orange;
          }

    • Content-box:

      This is the default value of box-sizing. The dimension of element only includes ‘height’ and ‘width’ and does not include ‘border’ and ‘padding’ given to element. Padding and Border take space outside the element.
      • Syntax: box-sizing: content-box;
      • The cotent-box is only used to control only the size of the content.
      • The content box will take only the width of the content and it doesnot work as the border-box. The padding and the border will take the separate space for the padding and border which will increase the size of the box
  • Difference between the Border-box and content-box:
    • border-box and content-box are two values of the box-sizing property. Unlike the content-box, the border-box value indicates that the dimension of an element will also include the border and padding.
    • Let's assume that we have a div element whose size is 200px x 100px, the border and padding are 5px and 10px respectively.
      .div {
      width: 200px;
      border: 5px;
      padding: 10px;
      }
    • In the content box model, the content inside of element will have the same dimension as the element.
      .div {
      width: 200px;
      border: 5px;
      padding: 10px;
      box-sizing: content-box;
      }
    • In the border box model, the content's dimension has to subtract the border and padding from the element's dimension. Specifically, the content's width is 200 - 5 * 2 - 10 * 2 = 170px.
      .div {
      width: 200px;
      border: 5px;
      padding: 10px;
      box-sizing: border-box;
      }

The Position Property:

  • The position property can help us manipulate the location of an element.
  • There are five different position values:

    • static:

      This is the default postion for HTML elements. It always positions an element according to the normal flow of the page. It is 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

    • relative:

      The relative positioning property is used to set the element relative to its normal position / actual postion.

    • fixed:

      The fixed positioning property helps to put the text fixed on the browser. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element

    • absolute:

      The absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML. With the absolute positioning, you can place an element anywhere on a page

    • sticky:

      An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Ex: It is used in the menu bars fixed stick to a postion

Stacking Context:

  • visibility property:

    Visibility property is used to hide or show an HTML element without changing the layout of the page. The hidden element uses the space on the page because it is still there, but it is not visible to the user.

  • Difference Between display:none; and visibility:hidden;

    • display:none; - It completely removes an HTML tag from the web page like it was never there.
    • visibility:hidden; - It makes the tag invisible but will not remove the element, and it will still occupy the space on the page.

  • Z-Index Property:

    whenever HTML elements collapse with each other, then the element with smaller z-index value will be covered by the element with larger z-index value.
    • NOTE: Z-index does not work on static position value. It only works on the elements with position: relative, absolute, fixed, or sticky.

CSS Flexbox:

  • Before the Flexbox Layout module, there were four layout modes:
    • Block, for sections in a webpage
    • Inline, for text
    • Table, for two-dimensional table data
    • Positioned, for explicit position of an element
  • The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flexbox Elements:

  • To start using the Flexbox model, you need to first define a flex container.
    • 1
    2
    3
  • The element above represents a flex container (the green area) with three flex items.

Flex Container:

The flex-direction Property

  • The flex-direction property defines in which direction the container wants to stack the flex items.

    • The flex direction values

    • column
    • column-reverse
    • row
    • row-reverse

  • Flex-direction: column

    • The column value stacks the flex items vertically (from top to bottom):
      • .flex-container {
        display :flex ;
        flex-direction :column ;
      }
      1
      2
      3

  • Flex-direction: column-reverse

    • The column-reverse value stacks the flex items vertically (but from bottom to top):
      • .flex-container {
        display :flex ;
        flex-direction :column-reverse ;
      }
      1
      2
      3

  • Flex-direction: row

    • The row value stacks the flex items horizontally (from left to right):
      • .flex-container {
        display :flex ;
        flex-direction :row ;
      }
      1
      2
      3

  • Flex-direction: row-reverse

    • The row value stacks the flex items horizontally (from left to right):
      • .flex-container {
        display :flex ;
        flex-direction :row-reverse ;
      }
      1
      2
      3

The flex-wrap Property

  • The flex-wrap property specifies whether the flex items should wrap or not
  • The examples below have 24 flex items in a flex container, but we can see from the below the items are not arapping propely and they are going out of the container. This is when we use the felx-wrap property
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    The flex wrap values

    • wrap
    • nowrap
    • wrap-reverse

  • Flex-wrap: wrap

    • The wrap value specifies that the flex items will wrap if necessary:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

  • Flex-wrap: nowrap

    • The nowrap value specifies that the flex items will not wrap (this is default):
      • .flex-container {
        display :flex ;
        flex-wrap :nowrap ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

  • Flex-wrap: wrap-reverse

    • The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap-reverse ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

The flex-flow Property

  • The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties
    • .flex-container {
      display :flex ;
      flex-flow :row wrap ;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

The justify-content Property

  • The justify-content property is used to align the flex items:

  • Justify-content: center

    • The center value aligns the flex items at the center of the container:
      • .flex-container {
        display :flex ;
        justify-content :center ;
      }
      1
      2
      3
      4

  • Justify-content: flex-start

    • The flex-start value aligns the flex items at the beginning of the container (this is default):
      • .flex-container {
        display :flex ;
        justify-content :flex-start ;
      }
      1
      2
      3
      4

  • Justify-content: flex-end

    • The flex-end value aligns the flex items at the end of the container:
      • .flex-container {
        display :flex ;
        justify-content :flex-end ;
      }
      1
      2
      3
      4

  • Justify-content: space-around

    • The space-around value displays the flex items with space before, between, and after the lines:
      • .flex-container {
        display :flex ;
        justify-content :space-around ;
      }
      1
      2
      3
      4

  • Justify-content: space-between

    • The space-between value displays the flex items with space between the lines:
      • .flex-container {
        display :flex ;
        justify-content :space-between ;
      }
      1
      2
      3
      4

  • Justify-content: space-evenly

    • The space-evenly value displays the flex items with even space between the flex:
      • .flex-container {
        display :flex ;
        justify-content :space-evenly ;
      }
      1
      2
      3
      4

The align-items Property

  • The align-items property is used to align the flex items

  • Align-items: center

    • The center value aligns the flex items in the middle of the container:
      • .flex-container {
        display :flex ;
        align-items :center ;
        height :200px ;
      }
      1
      2
      3
      4

  • Align-items: flex-start

    • The flex-start value aligns the flex items at the top of the container:
      • .flex-container {
        display :flex ;
        align-items :flex-start ;
        height :200px ;
      }
      1
      2
      3
      4

  • Align-items: flex-end

    • The flex-end value aligns the flex items at the bottom of the container:
      • .flex-container {
        display :flex ;
        align-items :flex-end ;
        height :200px ;
      }
      1
      2
      3
      4

  • Align-items: stretch

    • The stretch value stretches the flex items to fill the container (this is default):
      • .flex-container {
        display :flex ;
        align-items :center ;
        height :200px ;
      }
      1
      2
      3
      4

  • Align-items: baseline

    • The baseline value aligns the flex items such as their baselines aligns:
      • .flex-container {
        display :flex ;
        align-items :baseline ;
        height :200px ;
      }
      1
      2
      3
      4

The align-content Property

  • The align-content property is used to align the flex lines.

  • Align-content: space-between

    • The space-between value displays the flex lines with equal space between them
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :space-between ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

  • Align-content: space-around

    • The space-around value displays the flex lines with space before, between, and after them:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :space-around ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

  • Align-content: stretch

    • The stretch value stretches the flex lines to take up the remaining space (this is default):
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :stretch ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

  • Align-content: center

    • The center value displays display the flex lines in the middle of the container:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :center ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

  • Align-content: flex-start

    • The flex-start value displays the flex lines at the start of the container:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :flex-start ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

  • Align-content: flex-end

    • The flex-end value displays the flex lines at the end of the container:
      • .flex-container {
        display :flex ;
        flex-wrap :wrap ;
        height :400px ;
        align-content :flex-end ;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

Perfect Centering

  • Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered
    • .flex-container {
      display :flex ;
      height :300px ;
      align-items :center ;
      justify-content :center ;
    }
    1

Flex Items

  • The direct child elements of a flex container automatically becomes flexible (flex) items
  • The flex item properties are
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

The Order Property

  • The order property specifies the order of the flex items
    • <div class="flex-container">
      <div style="order: 3">1</div>
      <div style="order: 2">2</div>
      <div style="order: 4">3</div>
      <div style="order: 1">4</div>
    </div>
    1
    2
    3
    4
    5

The flex-grow Property

  • The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, default value is 0
    • <div class="flex-container">
      <div style="flex-grow: 1">1</div>
      <div style="flex-grow: 1">2</div>
      <div style="flex-grow: 4">3</div>
      <div style="flex-grow: 8">4</div>
    </div>
    1
    2
    3

The flex-shrink Property

  • The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, default value is 1
    • <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div style="flex-shrink: 0">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

The flex-basis Property

  • The flex-basis property specifies the initial length of a flex item.
    • <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div style="flex-basis: 200px">3</div>
      <div>4</div>
    </div>
    1
    2
    3
    4

The flex Property

  • The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
    • <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div style="flex: 0 0 200px">3</div>
      <div>4</div>
    </div>
    1
    2
    3
    4

The align-self Property

  • The align-self property specifies the alignment for the selected item inside the flexible container.
  • The align-self property overrides the default alignment set by the container's align-items property.
    • <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div style="align-self: center">3</div>
      <div>4</div>
    </div>
    1
    2
    3
    4

CSS Grid

  • The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
  • A grid layout consists of a parent element, with one or more child elements.
    • <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
  • An HTML element becomes a grid container when its display property is set to grid or inline-grid
  • All direct children of the grid container automatically become grid items.
    • .grid-container {
      display: grid;
    }
    .grid-container {
      display: inline-grid;
    }

  • Grid Columns

    • The vertical lines of grid items are called columns.

  • Grid Rows

    • The horizontal lines of grid items are called rows.

  • Grid Gaps

    • The spaces between each column/row are called gaps.
    • we can adjust the gap size by using one of the following properties:
      • column-gap
      • row-gap
      • gap

    • Column-gap property

      It sets the gap between the columns:
      .grid-container {
        display: grid;
        column-gap: 50px;
      }
      1
      2
      3
      4
      5
      6

    • Row-gap property

      It sets the gap between the rows:
      .grid-container {
        display: grid;
        row-gap: 50px;
      }
      1
      2
      3
      4
      5
      6

    • Gap property

      The gap property is a shorthand property for the row-gap and the column-gap properties:
      .grid-container {
        display: grid;
        gap: 50px 100px;
      }
      1
      2
      3
      4
      5
      6

  • Grid Lines

    • The lines between columns are called column lines.
    • The lines between rows are called row lines.
    • Column Example
      • .item1 {
        grid-column-start: 1;
        grid-column-end: 3;
      }
      1
      2
      3
      4
      5
      6
      7
      8
    • Row Example
      • .item1 {
        grid-row-start: 1;
        grid-row-end: 3;
      }
      1
      2
      3
      4
      5
      6
      7
      8

CSS Grid Container

  • To make an HTML element behave as a grid container, we have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.

  • The grid-template-columns Property:

    • The grid-template-column property defines the number of columns in your grid layout, and it can define the width of the each column. The Value is a Space-separated-list, where ech value defines the width of the resective column If we want our grid layout to conatin 4 columns, we should specify the width of the columns, or "auto" if all the columns should have same width.
      • .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      1
      2
      3
      4
      5
      6
      7
      8
    • The grid-template-columns property can also be used to specify the size (width) of the columns.
      • .grid-container {
        display: grid;
        grid-template-columns: 80px 200px auto 40px;
      }
      1
      2
      3
      4
      5
      6
      7
      8

  • The grid-template-rows Property:

    • The grid-template-rows property defines the height of each row. The value is a space-separated-list, where each value defines the height of the respective row:
      • .grid-container {
        display: grid;
        grid-template-rows: 80px 200px;
      }
      1
      2
      3
      4
      5
      6

CSS Grid Items

  • A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

  • The grid-column Property

    • The grid-column property defines on which column(s) to place an item.
      • .item1 {
        grid-column: 1 / 5;
      }
      example1
      1
      2
      3
      4
      5
      6
      7
      8
      9
      Example2:
      1
      2
      3
      4
      5
      6
      7
      8
      9

  • The grid-row Property:

    • The grid-row property defines on which row to place an item.
      • .item1 {
        grid-row: 1 / 4;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9

  • The grid-area Property:

    • The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties
      • .item8 {
        grid-area: 1 / 2 / 5 / 6;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

Sass @extend Directive

  • The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.
    • .button-basic  {
      border: none;
      padding: 15px 30px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }

    .button-report  {
      @extend .button-basic;
      background-color: red;
    }

    .button-submit  {
      @extend .button-basic;
      background-color: green;
      color: white;
    }

Animations

  • If we want animation in css, we have two different ways to do it i.e,
    • Transition property
    • Animations Property

    • Transition Property:

    • Transition property allows us to change the values smoothly, over a given duration.
    • To create a Transition property we have to add an effect to it and duration of the effect
    • If duration is not psecified, the transition will have no effect, because the default value is 0.
    • For example: hover the below to see how transition works
      • Animations

    • CSS Transition Properties

      • Property Description
      transition A shorthand property for setting the four transition properties into a single property
      transition-delay Specifies a delay (in seconds) for the transition effect
      transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
      transition-property Specifies the name of the CSS property the transition effect is for
      transition-timing-function Specifies the speed curve of the transition effect

    • CSS transition Property:

      The transition property is a shorthand property for:
      • transition-property
      • transition-duration
      • transition-timing-function
      • transition-delay
      The transition property is specified as one or more single-property transitions, separated by commas.Each single-property transition describes the transition that should be applied to a single property (or the special values all and none). It includes:
      • zero or one value representing the property to which the transition should apply. This may be any one of:
        • the keyword none
        • the keyword all
        • a <custom-ident> naming a CSS property.
      • zero or one <easing-function> value representing the easing function to use
      • zero, one, or two <time> values. The first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay

        Syntax:

        transition: transition-property transition-duration transition-timing-function transition-delay;

        /* Apply to 1 property */
        /* property name | duration */
        transition: margin-right 4s;

        /* property name | duration | delay */
        transition: margin-right 4s 1s;

        /* property name | duration | easing function */
        transition: margin-right 4s ease-in-out;

        /* property name | duration | easing function | delay */
        transition: margin-right 4s ease-in-out 1s;

        /* Apply to 2 properties */
        transition: margin-right 4s, color 1s;

        /* Apply to all changed properties */
        transition: all 0.5s ease-out;

        /* Global values */
        transition: inherit;
        transition: initial;
        transition: revert;
        transition: revert-layer;
        transition: unset;

      Property values

      Value Description
      transition-property Specifies the name of the CSS property the transition effect is for
      transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
      transition-timing-function Specifies the speed curve of the transition effect
      transition-delay Defines when the transition effect will start
      initial Sets this property to its default value. Read about initial
      inherit Inherits this property from its parent element. Read about inherit

    • CSS transition-property Property:

      The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
      Tip: A transition effect could typically occur when a user hover over an element.
      Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
      Default value: all

      Property values

      Value Description
      none No property will get a transition effect
      all Default value. All properties will get a transition effect
      property Defines a comma separated list of CSS property names the transition effect is for
      initial Sets this property to its default value
      inherit Inherits this property from its parent element

    • CSS transition-duration Property:

      The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
      Default value: 0s

      Property values

      Value Description
      time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, meaning there will be no effect
      initial Sets this property to its default value. Read about initial
      inherit Inherits this property from its parent element. Read about inherit

    • CSS transition-timing-function Property:

      The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration
      Default value: ease

      Property values

      Value Description
      ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
      linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
      ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
      ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
      ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
      step-start Equivalent to steps(1, start)
      step-end Equivalent to steps(1, end)
      steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
      cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
      initial Sets this property to its default value.
      inherit Inherits this property from its parent element.

    • CSS transition-delay Property:

      The transition-delay property specifies when the transition effect will start.The transition-delay value is defined in seconds (s) or milliseconds (ms).

    • Animation Property