My CSS Learning CH1 - emcsquared2/2022-Learning GitHub Wiki

https://www.youtube.com/watch?v=KFKScNHa-8M&list=PLyuRouwmQCjl4wTSNbb8RTKZuyMhoIxBe&index=1

/*The height and width of an element is the content area
Outside that is Padding, Margin, Border*/

p{
  padding 20px; /*same bg color as content area*/
  border: 10px solid red /*we specify color*/
  margin: 30px /* Always transparent. When margin overlaps top and bottom, the largest is what gets applied*/

Every element has these 3 layers around them. Padding, Margin, Border

Line height in a paragraph sets the height of each line.
The height property sets the height of the entire element.

html{
     font-size: 20px;
}
/*html here is the root element*/

h1{
    font-size: 3rem; 
/*this is 20px (root element) x 3 = 60px*/
    line-height: 2 
/*Using just a number then multiplies the font-size by that number i.e. 60px x 2 */
}
/* Target number for line height is 1.5-1.6 ish can go down to 1.2 and up to 2ish */

Height is the height of the content area box

  .class{
        visibility: hidden;
}
/*does the same as: 
color: rgba (0,0,0,0);
opacity: 0;
*/       

This is different from 
     .class{
     display: none;
} 
/* in this case the block disappears and everything underneath shifts up */

Images are inline elements like anchor tags (as opposed to block)

.one img{
float:left;
}
/*wraps text around the image*/

.one img{
float:left;
margin-right: 3rem;
margin-bottom: 1rem;
}
/*Adding space around the image*/

.two {
clear:left;
}
/*clear left = drop text below things that are floated left in the box above 
i.e. bottom line of the image above if the image in the element above is too big for the text content box*/

/* can use both for right or left*/

Here we see the image has been floated right and spills out the bottom of the text area...

How to get to this?...

.two{
  background-color: gold;
  overflow: auto;
}

text-shadow: 2px /*horizontal*/ 2px /*vertical*/ 4px /*blur radius*/ #bada55 /*color*/;
 
/*To add a second shadow, use comma and do another one*/ 

text-shadow: 2px 2px 4px #bada55, -2px -2px 2px red ;
/*Negative values move shadow right and up*/

Same as text shadow

h1:hover{ box-shadow: 2px 2px 4px rgba(0,0,0,0.5) }

/Shadow that appears when hover over happens. Original disappears/

border: 1rem solid olive
This is shorthand for border-width border-color and border-style
Also have border-left-color:green, border-left-style: dashed and border-left-width: 5px
Also border-top:none;

border-radius:20px; adds curve to all 4 corners
border-radius: 20px 40px 1st and third opposite corners
border-radius: 10px 20px 30px 40px all different

border-radius: 20px / 100px; This does all for corners and each time the box is 20px wide and 100px tall from which to draw the circle border-radius: 20px 30px 40px 50px / 100px 200px first(20px) and third(40px) get height of 100px and the other two get 200px

Special condition that applies to the element for it to apply. Existing element that's having some change done to it under some condition e.g. when hovered over

:hover
:active
:link etc etc

p:hover  changes paragraph when hovering

input: optional{
margin: 2rem;
}
input: checked{
margin: 4rem
}

Creates content

Editing elements using css when there is not a class or an id in the html

If you want to access the first element in .main (which is not a child but a different type)...

position: static|absolute|relative|fixed|sticky

Changing the position to relative allows you to move the element around relative to it's original position leaving the original space where it was...

Shrinks down to the size of its content. You also lose any reference to anything else.
The element is removed from the page, the rest of the layout is made. Then the Absolute element is put back.

In the case below the "top" 50px is applied from the top of the screen So there is 1rem of margin and 50px from the top of the screen to push down

With, if you use the top/bottom/right/left that makes absolute behave differently to relative.
With absolute you can affect the size of the box because you are shifting the box relative to the top/bottom/side of the screen (with relative, you are moving it relative to its original position)

Fixed is the same as absolute except that when you scroll with the mouse, it maintains its position relative to the top corner of the viewable area.

Sticky is like fixed but stays on the screen within a certain area before it disappears.

Static is the default position. e.g.Margin-top: 5rem just pushes it down and everything that's below it

With absolute the elements below shift up to fill the empty space
Remember with absolute the element gets removed and put back on after the layout has been made

The inside box element is set to absolute and the outside relative. The box gets connected to the main as you move left:15rem

Below the absolute element abs was added as a pseudo element.
When you change the relative position of the footer, the absolute element moves with it.

It's in the top left corner because of top:0 left:0

This bit was quite tricky. I will refer back to this when I come to working with backgrounds

column-count sets the number of columns
column-width sets the minimum width before resuming back to a paragraph

column-count: 2;
column-width: 250px;
Shorthand.... columns 2 250px

column-rule: 1px red .... puts a red | between columns

If you want the heading to go across the columns then use column-span

Here the --COLOR variable has been created to store the cornflowerblue color.

Below the inline style overrides the value that comes from the :root/the top/the parent/the document

We can run script using an event listener to change the color variables in JS. When the DOM content is loaded

let html = document.documentElement; (The document element is the html tag/:root - if we wanted the body tag it would be document.body)
Then use the setProperty method (property name followed by the value to set it to)