CSS

 

1. Introduction to Basic CSS

Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization.

CSS has been adopted by all major browsers and allows you to control:

color
fonts
positioning
spacing
sizing
decorations
transitions

There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style attribute. Alternatively, you can place CSS rules within style tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.

2. Change the Color of Text 

<h2 style="color: blue;">CatPhotoApp</h2> 

3. Use CSS Selectors to Style Elements

<style>
  h2 {
    color: red;
  }
</style>

4. Use a CSS Class to Style an Element

<style>
  .blue-text {
    color: blue;
  }
</style>
 <h2 class="blue-text">CatPhotoApp</h2>

5. Change the Font Size of an Element

h1 {
  font-size: 30px;
}

6. Set the Font Family of an Element

h2 {
  font-family: sans-serif;
}

7. Import a Google Font

8. Specify How Fonts Should Degrade

p {
  font-family: Helvetica, sans-serif;
}

9. Size Your Images

<style>
  .larger-image {
    width: 500px;
  }
</style>

10. Add Borders Around Your Elements

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

11. Add Rounded Corners with border-radius

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
  }
</style>

12. Make Circular Images with a border-radius

border-radius: 50%;

13. Give a Background Color to a div Element

<style>
.green-background {
  background-color: green;
}
</style>

<div class="green-background">content</div>

14. Set the id of an Element

<h2 id="cat-photo-app">

15. Use an id Attribute to Style an Element

#cat-photo-element {
  background-color: green;
}

16. Adjust the Padding of an Element

Increase the blue box’s padding, it will increase the distance (padding) between the text and the border around it.

17. Adjust the Margin of an Element

Increase the blue box’s margin, it will increase the distance between its border and surrounding elements.

18. Add a Negative Margin to an Element

Set an element’s margin to a negative value, the element will grow larger.

19. Add Different Padding to Each Side of an Element

20. Add Different Margins to Each Side of an Element

21. Use Clockwise Notation to Specify the Padding of an Element

These four values work like a clock: top, right, bottom, left

padding: 10px 20px 10px 20px;

22. Use Clockwise Notation to Specify the Margin of an Element

These four values work like a clock: top, right, bottom, left

margin: 10px 20px 10px 20px;

23. Use Attribute Selectors to Style Elements

[type='radio'] {
  margin: 20px 0px 20px 0px;
} <label><input type="radio" name="indoor-outdoor" 
checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> 
Outdoor</label>

24. Understand Absolute versus Relative Units

The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen’s resolution.

Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element’s font. If you use it to set the font-size property itself, it’s relative to the parent’s font-size.

25. Style the HTML Body Element

body {
  background-color: black;
}

26. Inherit Styles from the Body Element

27. Prioritize One Style Over Another

28. Override Styles in Subsequent CSS

29. Override Class Declarations by Styling ID Attributes

30. Override Class Declarations with Inline Styles

31. Override All Other Styles by using Important

32. Use Hex Code for Specific Colors

body {
  color: #000000;
} 00 00 00 the red (R), green (G), and blue (B)

33. Use Hex Code to Mix Colors

From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!

For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being #FFA500.

The digit 0 is the lowest number in hex code, and represents a complete absence of color.

The digit F is the highest number in hex code, and represents the maximum possible brightness.

Color	Hex Code
Dodger Blue	#1E90FF
Green	#00FF00
Orange	#FFA500
Red	#FF0000

34. Use Abbreviated Hex Code

Color	Short Hex Code
Cyan	#0FF
Green	#0F0
Red	#F00
Fuchsia	#F0F

35. Use RGB values to Color Elements

The RGB value for black looks like this:

rgb(0, 0, 0)

The RGB value for white looks like this:

rgb(255, 255, 255)

Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.

36. Use RGB to Mix Colors

Color	RGB
Blue	rgb(0, 0, 255)
Red	rgb(255, 0, 0)
Orchid	rgb(218, 112, 214)
Sienna	rgb(160, 82, 45)

37. Use CSS Variables to change several elements at once

38. Use a media query to change a variable (responsive)