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.