In Depth on CSS

When I decided to learn how to code I had two goals in mind: learn enough about Javascript where I can work a high-wage job to support myself and my family and to make a super cute Tumblr page that will make 15 year old me proud. I am well on my way to accomplishing the first goal, but after going forward with Operation Spark, I have learned that in order to make a super cute Tumblr page, I need to become an expert in CSS.

What is CSS?
CSS stands for Cascading Style Sheets and ir describes how HTML elements are to be displayed on screen, paper, or in other media. It is essentially what gives a web-browser pizazz.

CSS Syntax
In order to implement CSS, you would follow this syntax.

P is a selector in CSS, it points to the HTML element you want to style. Color/Font-size is a property and blue/12px is its value. Elements with an id are referred to as id name {} and elements with a class are referred to as .class name {}. To edit every HTML element you can just do * {}.

How to Add CSS
Externally
This is an external style sheet where you make an individual file to deal with all CSS styling and should be saved with a .css extension. Then you must import the file into your HTML file.

Internally
This is when you edit the HTML page with completely by adding in a style tag to your HTML file and inputting whatever style you want.

Inline
This is used to apply a style for a single element and to do this, you must input a style attribute to a specific element you would like to change.

What Can You Do with CSS?
Color

Change background color using background-color: (color)
Change text color using style="color: (color)" in the text elementC
Change border color using border: (#px solid color)
Colors can be specified by using RGB values, HEX values, HSL values, RGBA values, and HSLA values

Background

Change background color using background-color and can also change opacity by adding opacity after
Change background image using background-image
Can make the background image repeat by using background-repeat: repeat-x or make it not repeat using background-repeat: no-repeat
Background-attachment which specified whether the background image should scroll or not scroll with the rest of the page (scroll, fixed)

Border

Border-style property specifies what kind of border to display
Border-style: dotted
Border-style: dashed
Border-style: solid
Border-style: double
Border-style: groove
Border-style: ridge
Border-style: inset
Border-style: outset
Border-style: none
Border-style: hidden

Can define the width of the border using border-width: #px
Can define rounded borders by using border-radius: #px

Padding

Can define the padding of each side of an element using padding-top, padding-right, padding-bottom, padding-left and making the value be #px
Can also do short hand by doing padding: 25px 50px 75px 100px
The first value will be the top, second the right, third the bottom, and fourth the left

Height, Width, Max-width

Height and width have the following values:
Auto which is default
Length which defined the height/width in px, cm, etc
% which defined the height/width in percent of the containing block
Initial which sets the height/width to its default value
Inherit which makes the height/width inherit from its parent value

Text

Text alignment is implemented by using text-align and one of the following values: center, left, right, justify
You can also decorate a text by using:
text-decoration-line and the values overline, line-through, underline, overline underline
text-decoration-color and the value being some color
text-decoration-style and the values being the same as border-style above
text-decoration-thickness and the values being auto, #px, or a %
text-decoration being a shorthand property to add line, color, style, and thickness all in one line
Text-transform is used to specify uppercase, capitalization, and lowercase in a text
Text spacing can be used by:
Text-indent: #px
Letter-spacing: #px
Line-height: some decimal
Word spacing: #px
You can also select certain fonts for the text by adding font-family

There is so much more than this to explore within CSS, but this is the in-depth for the basics! If you're interested in exploring more, W3Schools has amazing modules on the subject.

Sources
https://www.w3schools.com/css/css_intro.asp
https://developer.mozilla.org/en-US/docs/Web/CSS