CSS

Mon Nov 23 08:05:00 AM PST 2020

Getting started

First the HTML page must know about the css. There are three ways for this to happen that I’m aware of. You can put css in the document but I believe this is a bad idea. You can also do some css in the header of the file. This is sometimes ok to do. Last, and the preferred option is to have separate css files and tell the HTML file where to find them in the header. It looks something like this:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="CssFile.css">
        <title> Test Page </title>
    </head>

-> at the moment I’m having trouble getting the browser to acknowledge my css. -> I take it back The program sees it I just need to learn to read the inspector better.

Some Explanations

-> flexbox works from the content out.

-> Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

-> Box Alignment Level

Things to Understand

Layout

-> like it sounds this establishes a grid pattern over the page to help with placement of things. -> the grid is very flexible. -> as many columns as you want -> They can be flexible or fixed in size. -> mixind and matching is O.K.
minnmax()
- minmax(100px, auto) -> this will make sure the size is never below 100 pixels and expand to fit content.
GRID LINES When defining a grid you define the track no the lines. Grid then gives up numbered lines to work with.
adding Display to a box makes it dispear and leaves the content to act as they will.
z-index controls the order overlapping things show up ie. who’s on top.

Layout Subs

The CSS align-items property sets the align-self value on all direct children as a group."

“The align-self CSS property overrides a grid or flex item’s align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.”)

Archive -->