Basic Css To Advance

  • Add Css To Files

  • Css Selectors

  • Css Colors

  • Font Size Properties

  • Font Family Properties

  • Font Weight Properties

  • Text Align

    • h1 {text-align: left}(right, center e.t.c)

  • Css Inspection

  • Css Box Model

  • Css Cascade

      • This is order of importance in which css is being apply to html.

    1. Position(This give priority to the last applied style)
      • p {color: red;
        color: blue; }

        [blue will override red because of the position.]

    2. Specificity(This is rank next to the position)
      • li {color: coral}
      • .first-class {color: red;}
      • li[draggable] {color: purple;}
      • #first-id {color: green}

        • If all these selectors are all apply to an element tag(li)
        The "id selector"(#first-id) will be apply because it
        will override the other selectors Because it is the most
        specific selector. follow by "attribute selector",
        "class selector", and "element selector".
        Note: Though some believe "attribute selector and
        class selector" are on the same level. But in most cases
        it do override class selector.

    3. Type(This is next after Specificity)
      1. <link rel="stylesheet" href="">
      2. <style></style>
      3. <h1 style="">hey</h1>

        4. External link is the last to be consider as it pave way for
        other type. internal is next to External css. The inline
        is the first and will override the rest type of css.

    4. importance(This is in the first level in the Cascade steps.)
      • p {color: red;}
      • p {color: green !important;}

        • In this instance, green will be apply because
        of the important notation. it will override any
        other styling available be it inline, id and so on.

  • Css Combining Selectors

  • Css Positioning

  • Css Display

  • Css Float

  • Css Responsiveness

  • Responsiveness In Details

  • Other Responsive ways

    • There are other various positioning in the past before the introduction of Flex, Grid and Media Query.

    All these old method mention above tends to be hard to get best result using them as it involves lot of tweaks and tuning.

  • Flex(One dimensional layout)

    • This is easy and neat modern tools. Which is simply implemented by creating a div that encapsulate the rest div's. Simple illustration is:

    Previously, we learned that div occupy full width while span is an inline element. p tag is also block element. img tag is an inline but with flexbox, all of the default behavior are overlook. And the width of each of these element inside flexbox will be based on the content size. So it'll try and let us have all our content on one line. We can then use Gap property to separate them. Default setting of a container(div) is like a block element(100% full width). We can also set it as: 'inline-flex'. Which is similar to the inline we already treated. It'll make flexbox occupy the space needed. Which means other things can also go and occupy in that same line. So we can either set the main container(div) as either 'flex' or 'inline-flex'.

  • Flex-sizing[Shrinking and Growing]

      Flexbox has default behavior to adjust to content size but here we'll dive into full way to customize the behavior to our taste. In flexbox, we have a priority list which is range from 'content-width < width < flex-basis < max-width/min-width' It first look at whether max-width/min-width is set, then flex-basis, width, and finally the content-width. 'content-width' allows content to lie up next to each other. If shrink, it'll reduce to 'minimum-width' which is where the text wraps and they are stacked on top each other. The default behavior of flexbox is to shrink until it reach the minimum content size. The longest word determine the final size. On getting to the minimum width, all of the content start disappearing as shrinking continues.

      Priorities:
      1. content-width

          This is the default behavior of container which makes content fit the entire line.

      2. width

          If we set width, each item will conform with the set width. Assume we set width to 100px. on 4 items. When the container shrunk, it'll respect the set width until there is not enough overall width of the container. Which is 400px considering our example here. So if the container width get lesser than 400px, it'll adjust to the minimum-size of the content(longest words). It'll respect our set width when there is enough space for the container otherwise it'll adjust dynamically until minimum width of each item is attain.

          Note: At default, if we had nothing set on the container it'll look at the entire line when it's all on one line. Which will be the 'content-width' but if width is set it'll adjust to the width instead of the content-width. So, 'width' will be obey till we shrunk the container. Where it no longer fit everything as set width, then it starts shrinking the box.

      3. flex-basis

          This increase 'width' when container is at default(rows) But increase 'height' when 'flex-direction' is at column. 'flex-basis' overshadow' 'width' when both are set on an items. It'll adjust to set value of 'flex-basis' as long as there is enough room in the container, But as soon as we shrink the container down, just as before, it'll adjust to the 'minimum-width'

      4. min-width

          This looks at longest words to determine the minimum-width. Which determine how small each items can shrink to. For example, if 'flex-basis' is 200px and 'min-width' is 300px, the items will respect the 'min-width' instead of the 'flex-basis'. 'min-width' overshadow 'flex-basis' when it's larger than 'flex-basis'. Items does not shrink beyond 'min-width' size.

      5. max-width

          This looks at longest possible line of the text. So it's all of content lined up in one line. We can customize this, for example, if we set 'max-width' to 100px and our flex-basis is 200px. 'max-width' will overpower the flex-basis property because it's lower than the 'flex-basis'. 'max-width' is the maximum requirement for the items to grow. But if 'flex-basis' is smaller, it'll ignore the 'max-width'.

      Flex Reactivities
      • flex-grow
      • flex-shrink

        • CASES

        • flex-basis: 100px; flex-grow: 0; flex-shrink: 0

            • They can be understood better by turning both off by setting them to '0'. So setting 'flex-basis' to 100px and the both grow & shrink to '0' make flexbox not a flexbox any longer as the container stops reacting to ability to increase and decrease.

        • flex-basis: 100px; flex-grow: 1; flex-shrink: 0

            • Each items will start out as 100px, it'll then grow because we've switch the flex-grow on. And it'll respect that as long as there is enough space, it'll increase the width of each of the items until the entire width of the container is filled up by each items. So when the container width is reduce, it gets reduce to the flex shrink amount which is the 'flex-basis' value. Any further than that will makes the items to disappear.

        • flex-basis: 100px; flex-grow: 0; flex-shrink: 1 (Flexbox Default)

            • By default, it'll set each items to the 'flex-basis' value but it'll not grow to fit the entire space of the container. But it'll shrink beyond the 'flex-basis' value. Until 'minimum width' is reach and because we did not set it, then it'll adjust to the 'content-width'

        • flex-basis: 100px; flex-grow: 1; flex-shrink: 1

            • Switching on both means it'll take much width as possible and when shrink, it'll be as small as possible. Which 'flex-basis' is completely ignored. So here: 'flex-grow' represent 'max-width while' 'flex-shrink' represent 'min-width'. If these two are not set, it'll adjust to the content of those items.

        • flex-basis: auto; flex-grow: 1; flex-shrink: 1

            The default of 'flex-basis' is 'auto'. Which look at amount of content in each items, it'll gives more 'flex-basis' to the items with more content. And it'll give less width to the one with smaller content. If we want that to be equal width, we simply set it 'flex-basis' to '0'

          • SHORTHAND
          • flex: 1 1 0

              • This means both flex-grow and flex-shrink is 1. flex-basis is '0'

          • flex: 1

              • This means both flex-grow and flex-shrink is 1 and flex-basis is 0. Which is same as the first instance. The value/ratio can be more than '1'.

  • Grid(Two-dimensional layout)

  • Grid Sizing

      There are severals types: Check Grid-sizing

      We'll see preview of different kind of grid-sizing. We'll see live preview e.g 'fixed-size': which is not responsive to screen size.

    • Fixed-Size
      • .grid-container {
        display: grid;
        grid-template-rows: 100px 200px;
        grid-template-columns: 400px 800px;
        }

        • In this instance, we define rows and columns by giving them fixed sizes(px). So we have 2 by 2. Two rows of 100px high for the first row, 200px high for the second row. Two columns of 400px wide for the first one and 800px wide for the second column. Fixed-size grid are not responsive. That means that if we go ahead and change the width or height, it's not going to change at all. It's going to stay fixed to the specified size we set above. In addition to 'px', we can also use 'Rem' Which is still fixed because 'rem' is relative to the root of our html. If our body/html has a size specified and we change that size then the 'rem' size will go up and down with it. But this does not make it responsive to the screen size. Instead of specifying grid-template rows and grid-template columns we can shorten it to "grid-template: 100px 200px / 400px 800px". Rows comes first, then column follows.

    • Auto-Size
      • We can also use 'auto' =>
        .grid-container { 
        display: grid; 
        grid-template-rows: 100px auto; 
        grid-template-columns: 200px auto; 
        }

        • Unlike before 'Auto' now add a bit of responsiveness. Each row will try to fit to 100% of the horizontal available space. In our case now we'll have a first 'column' as '200px' then the other one which is auto will cover the rest space available width. 'Rows' behave differently, it doesn't try to take 100% height. Instead, it tries to fit the content. In our case, first row is 100px, the second row which is auto will try to fit the content.

    • Fractional-Size
      • This is achieve using ratio(fr) to define layout for sizes eg:
        .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
        }

        • The above illustration depict that the first row is 1fr and the second row is twice the size of the first row. Same logic for column. This will grow and as well shrink depending on the width available for the horizontal and also the content size available for the vertical. This is responsive type as it always maintain the figure size provided. Even if we add additional contents, it'll expand and still keep the size uniform to the provided figure ratio.

    • MinMax Size
      • Sometimes we want to define how the screen is responsive especially on the horizontal.
        .grid-container {
        display: grid;
        grid-template-rows: 200px 400px;
        grid-template-columns: 200px minmax(400px, 800px);
        }

        • We denotes two rows with first being 200px and the second as 400px. The first column is 200px but the second column has two instances with first condition applicable to when the screen has little space we infer 400px as minimum display and 800px wide when the screen has enough space. This set a limit. Because sometimes, we have some kind of contents that we don't want to be too narrow or too wide. So our grid now range from 400px to 800px. So a stop at 400px and stop at 800px for responsiveness strain.

    • Repeat
      • This cut-off repetition
        .grid-container {
        display: grid;
        grid-template-rows: repeat(2, 200px);
        grid-template-columns: repeat(2, 100px);
        }

        • This simply denote that we want two 200px rows. And two 100px column. Which is same as defining rows as '200px, 200px'. And column as '100px, 100px'.

        What if we define grid than amount of div's we have? for example, we have 4 items or div's and we define 2 by 3 grid. So two rows and three columns. If we only have 4 items, they're fitted into our grid from the top left to the bottom right. So that means once we've laid out the first row, it'll double back and continue along the second row. But if we don't have any items for number five and six, then it won't add them.

        .grid-container {
        display: grid;
        grid-template-rows: repeat(2, 200px);
        grid-template-columns: repeat(3, 100px);
        }

        What if we don't define enough rows and columns? for example:

      • .grid-container {
        display: grid;
        grid-template-rows: 200px 200px;
        grid-template-columns: 200px 200px;
        }

        • In this case, we have 2 by 2 grid system with each item being 200px tall and wide. If we have items/div's of five number which won't fit our template, the fifth items when added we automatically be assign with size based on its height and also any existing column sizes. So it'll try to meet existing column width and we try to fit to the height of the content.

        We can tweak the extra div to our likening. eg:

      • .grid-container {
        display: grid;
        grid-template-rows: 200px 200px;
        grid-template-columns: 200px 200px;
        grid-auto-rows: 300px
        }

        • So we basically said any more div that's not accounted for in our template should have 300px in height. We also have 'grid-auto-columns'. So with this logic, we are able to control our styling no matter the amount of div's added to the grid.

    • Using Chrome Dev Tool

        When display is at grid, there is a chip that shows 'grid' which when click, it display some information. Which we can change the layout.

  • Grid Item Placement

      We first need to look at some grid placement terminologies :

    • Lines

        This separate our tracks. We have horizontal lines and vertical lines, these is known as the grid lines. We can only control the grid lines by using the gap property to specify its width or height. But we can't change its color, we cant put anything in the lines. They are lines for layout.

    • Tracks

        When we create and size our grid, we create rows and columns. These is known as tracks. We have rows tracks and columns tracks and we usually create and size these tracks using grid-template-rows and grid-template-columns[grid-template] for shortcut.

    • Cells

        Cells is being created within the intersection of tracks. Which is a small unit also known as grid cells. They are the smallest unit in a grid and can be of different sizes. So one can be wider than the other that is to occupy more columns, while other can have height than the other, which means to occupy more rows. We can use multiple cells to create a grid items. So we can either position our grid cell horizontally or vertically across grid cells

    • Container

        This is the parent container div that contain div's items

    • Items

        This are the parent container children.

      • <div class="container">
      <div class="item cowboy"> 🤠 </div>
      <div class="item astronaut"> 🧑🏿‍🚀 </div>
      <div class="item book"> 📖 </div>
      </div>
      .container {
      height: 100vh;
      display: grid;
      gap: 3rem;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr 1.5fr;
      }

      Note: By default, a div is going to span the entire width of the window, but it'll only occupy as much vertical space as there is content. Hence, the reason why we set height viewport height to 100, then it's also going to take that container and make it stretch all the way down to the bottom of the window. So the above code, we already known we create tracks using both grid-template-rows and grid-template-columns. So we created 3 columns with two of them being equal in width while the third one is a bit wider and we created two rows of equal height. So now, we've got tracks, lines and also container. Now the items will be place in by default. It'll start from the first and it'll go into each of the cells that are available. We can use Flexbox to target grid items to position them.

    • Flexbox to center the item
      • .item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: purple
        }
    • Increase the width of the cowboy
      • .cowboy {
        background: gold;
        grid-column: span 2;
        }

        • This increase the width of the cowboy by spreading in width length from column one to two. We can use the chrome dev tools to inspect. We'll be able to see the lines and the tracks in our grid. So span of two makes our cowboy div go from track one to track 3 range[1-3] which makes span two to be the bridge between column 1 and column 3. grid-column is the short form of 'grid-column-start' and grid-column-end. For example: grid-column-start: 2; grid-column-end: 4; This simply means that position start from column 2 and end at column 4. We can also use negative value to specify the last column on a grid. So the last one is -1. We have -1, -2, -3 and so on... Also, we can start and end at whichever direction we want. eg: grid-column-start: 4; grid-column-end: 2; This will be flip and still still start at column 2 and ends at column 4. Also, we can even for example: grid-column-start: span 2; grid-column-end: auto; So the auto is the automatically the initial position of our div before we did any positioning which is the first line in our case.

        There is also a corresponding property known as 'grid-row' which is also short form of 'grid-row-start' and 'grid-row-end'. Which is use to cover vertical cells our grid want to span.

    • Place astronaut under cowboy and then increase its width
      • .astronaut {
        background-color: coral;
        grid-column: span 2
        order: 1;
        }

        • Natural position of the astronaut div is beside cowboy. To change that position to be the last and under cowboy instead, we use order property to set it to 1. Default order is 0. So we increase the order of the astronaut.

        Another way to go by this without using order property is:

      • .astronaut {
        background-color: coral;
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: 3;
        }

        • With this being explicit, we simply navigate to pinpoint the row we want the div to start, then follow by the column to start, then row for it to end and to which column to end. The four properties shorthand is grid-area: 2 / 1 / 3 / 3. grid-row-start / grid-column-start / grid-row-end / grid-column-end. Notes: If 'grid-area' is use on a div, you have to make sure to use it on other div's as well to make them behave properly.

    • Increase the height of the book div to same level as astronaut
      • .book {
        background-color: seagreen;
        grid-row; span 2
        }

        • This now takes up two rows. Which means the vertical is being increased.

        Another way to achieve the same result is doing it explicitly

      • .book {
        background-color: seagreen;
        grid-row-start: 1;
        grid-column-start: 3;
        grid-row-end: 3;
        grid-column-end: 4;
        }

        • With this being explicit, we simply navigate to pinpoint the row we want the div to start, then follow by the column to start, then row for it to end and to which column to end. The four properties shorthand is grid-area: 1 / 3 / 3 / 4. grid-row-start / grid-column-start / grid-row-end / grid-column-end. Notes: If 'grid-area' is use on a div, you have to make sure to use it on other div's as well to make them behave properly. Also it can be of coordinate 1 / 3 / -1 / -1. Which is using negative number to denote the last row and the last column.

  • Overlay of items onto other items

      This is the biggest difference between grid and flexbox. Grid let us overlay items onto other items. So we can position items on top of each other in a grid.

    • .cowboy {
      background-color: #00B9FF;
      grid-area: 1 / 1 / 2 / 3
      }
      .astronaut {
      background-color: #03989E;
      grid-area: 2 / 1 / 3 / 3
      }
      .book {
      background-color: #E5833180;
      grid-area: 1 / 2 / 3 / 4
      }

      • The '80' number in book color represent transparency rate. In Hex code, the first six character correspond to the color so the amount of red, green, and blue. Then we can add a value known as 'alpha' which denote how much transparency there is. 80 is about 50% of transparency that allows us to see through the orange and the blue and the green. So the book coordinate is also set to overlap, starting from row one, column two then end at row three and column four.

  • Bootstrap

  • Web Design