In Depth on CSS
Published: 2024-04-21 18:18:29

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hfdobg78yh6n2df7vh7.png)

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 * {}.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rzjilhce1456gmnyhzm.png)

**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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59b2txpxfhcr9afisrl7.png)

- 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