CSS Basics

PHOTO EMBED

Thu Jun 13 2024 12:33:47 GMT+0000 (Coordinated Universal Time)

Saved by @NoFox420 #html 

Cascading Style Sheets

CSS - 
SASS - Syntactically Awesome Style Sheet
LESS - Leaner CSS
...

How to add CSS
////////////////////
INLINE CSS
<html style="background: blue">
  </html>

////////////////////
INTERNAL CSS
<html>
  <head>
   <style>
    	html {
    	  background: red;
  		  }
		h1 {
          background: green;
        }
	</style>
  </head>
</html>
 
////////////////////
EXTERNAL CSS
<html>
  <head>
   <link
		rel="stylesheet"
		href="./styles.css"
    />
  </head>
</html>


CSS Selectors
////////////////////
ELEMENT SELECTOR
h1 {
  color: blue
}
You can add the same group of styles to many elements by creating a list of selectors. Each selector is separated with commas like this:
selector1, selector2 {
  property: value;
}
 
////////////////////
CLASS SELECTOR. used for many elements
.red-heading {
  color: red
}
<h1 class="red-heading"></h1>
 
////////////////////
ID SELECTOR. used for one specific element
#main {
color: red
}
<h1 id="main"></h1>
 
////////////////////
ATTRIBUTE SELECTOR. used for all elements with specific attributes
p[draggable="true"]{
  color: red
}
<p id="" class="" draggable="true"></p> //applied
<p id="" class="" draggable="false"></p> //not applied
 
////////////////////
UNIVERSAL SELECTOR. used to select everything where stylesheet is active
* {
  color: red
}

COLOR PROPERTIES

Named Colors: background-color: blue

Hex Codes: background-color: #5D3891


FONT SIZE
//static sizes
1px = 1/96th of an inch //PIXEL
1pt = 1/72nd of an inch //POINT
 
//relative sizes (scalable)
1em = 100% of parent
1rem = 100% of root

FONT WEIGHT
//Keywords
normal; //-100
bold; //+100

//Relative to Parent
lighter;
bolder;

//Number
light-bold
100-900;


FONT FAMILY
h1{
  font-family: "FONTNAME", "BACKUP GENERIC FONT TYPE" //Helvetica, sans-serif
}
fonts needs quotation marks with multiple words
include link in html file under style element

TEXT ALIGN
sets the horizontal alignment of the element


THE BOX MODEL

border: 10px solid black //border: "thickness" "style" "color"
	border-top: 0px //has to come after border property
border property adds outwards of the html element

border-width: 0px 10px 20px 30px //border-width: "top" "right" "bottom" "left"
border-width: 0px 20px //border-width: "top+bottom" "left+right"

padding: 20px //doesn't affect height or width of element, adds to it. around paragraph, inside border

margin: 10px //adds space around element, outside of border


CONTENT DIVISION ELEMENT

<div>		//take as many elements as needed
  <p><p/>
  <img/>
</div> 

horizontally center div with img

div{
width: 50%;
margin-left: 25%;
}
img{
  width: 100%;
}


CASCADE

resolving conflicting styling rules for elements

css rules apply by:

Position
order in stylesheet
li {
  color: red; 
  color: blue; //overwrites red value
}
li{
  color: green; //overwrites blue value
}

Specificity
how specific a selector is
<li id="first-id" class="first-class" draggable></li>

li{color: blue;} //selects all list item elements(least specific)
.first-class{color: red;} //class selector with classname, second specific
li[draggable] {color: purple;} //attribute selector, third specific
#first-id {color: orange;} //id selector, most specific

Type
<link rel="stylesheet" href="./style.css">	//external, least important
<style> <style/>							//internal, second important
<h1 style="">Hello</h1>						//inline, most important

Importance
color: red;
color: green !important; //gets most important rule for element

Color

The CSS linear-gradient function lets you control the direction of the transition along a line, and which colors are used.
linear-gradient(gradientDirection, color1, color2, ...);
gradientDirection is the direction of the line used for the transition. color1 and color2 are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, rgb, or hsl.
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));

With the CSS opacity property, you can control how opaque or transparent an element is. With the value 0, or 0%, the element will be completely transparent, and at 1.0, or 100%, the element will be completely opaque like it is by default.

The rgba function works just like the rgb function, but takes one more number from 0 to 1.0 for the alpha channel:
rgba(redValue, greenValue, blueValue, alphaValue);

The box-shadow property lets you apply one or more shadows around an element.
box-shadow: offsetX offsetY color;

both offsetX and offsetY accept number values in px and other CSS units
a positive offsetX value moves the shadow right and a negative value moves it left
a positive offsetY value moves the shadow down and a negative value moves it up
if you want a value of zero (0) for any or both offsetX and offsetY, you don't need to add a unit. Every browser understands that zero means no change.

If a blurRadius value isn't included, it defaults to 0 and produces sharp edges. The higher the value of blurRadius, the greater the blurring effect is.
box-shadow: offsetX offsetY blurRadius color;

The vh unit stands for viewport height, and is equal to 1% of the height of the viewport. This makes it relative to the viewport height.

Now, get rid of the horizontal scroll-bar, by setting the body default margin added by some browsers to 0.
content_copyCOPY