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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
p {
font-size:16px;
font-family:Lobster;
}
</style>
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.
.blue-box {
background-color:blue;
color:#fff;
padding:10px;
}
17. Adjust the Margin of an Element
Increase the blue box’s margin
, it will increase the distance between its border and surrounding elements.
.blue-box {
background-color:blue;
color:#fff;
padding:20px;
margin:20px;
}
18. Add a Negative Margin to an Element
Set an element’s margin
to a negative value, the element will grow larger.
.blue-box {
background-color:blue;
color:#fff;
padding:20px;
margin:-15px;
}
19. Add Different Padding to Each Side of an Element
.red-box {
background-color:crimson;
color:#fff;
padding-top:40px;
padding-right:20px;
padding-bottom:20px;
padding-left:40px;
}
20. Add Different Margins to Each Side of an Element
.red-box {
background-color:crimson;
color:#fff;
margin-top:40px;
margin-right:20px;
margin-bottom:20px;
margin-left:40px;
}
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
<style>
body {
background-color:black;
color:green;
font-family:monospace;
}
</style>
<h1>Hello World</h1>
27. Prioritize One Style Over Another
<style>
body {
background-color:black;
font-family:monospace;
color:green;
}
.pink-text {
color:pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
28. Override Styles in Subsequent CSS
<style>
body {
background-color:black;
font-family:monospace;
color:green;
}
.pink-text {
color:pink;
}
.blue-text {
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
29. Override Class Declarations by Styling ID Attributes
<style>
body {
background-color:black;
font-family:monospace;
color:green;
}
.pink-text {
color:pink;
}
.blue-text {
color:blue;
}
#orange-text {
color:orange;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
30. Override Class Declarations with Inline Styles
<style>
body {
background-color:black;
font-family:monospace;
color:green;
}
.pink-text {
color:pink;
}
.blue-text {
color:blue;
}
#orange-text {
color:orange;
}
</style>
<h1 style="color: green" id="orange-text" class="pink-text blue-text">Hello World!</h1>
31. Override All Other Styles by using Important
<style>
body {
background-color:black;
font-family:monospace;
color:green;
}
.pink-text {
color:pink !important;
}
.blue-text {
color:blue;
}
#orange-text {
color:orange;
}
</style>
<h1 style="color: green" id="orange-text" class="pink-text blue-text">Hello World!</h1>
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
<style>
.penguin {
/* Only change code below this line */
--penguin-skin:black;
--penguin-belly:gray;
--penguin-beak:yellow;
/* Only change code above this line */
position:relative;
margin:auto;
display:block;
margin-top:5%;
width:300px;
height:300px;
}
.penguin-top {
top:10%;
left:25%;
background:var(--penguin-skin, gray);
width:50%;
height:45%;
border-radius:70%70%60%60%;
}
38. Use a media query to change a variable (responsive)
<style>
:root {
--penguin-size:200px;
--penguin-skin:gray;
--penguin-belly:white;
--penguin-beak:orange;
}
@media (max-width: 350px) {
:root {
/* Only change code below this line */
--penguin-skin: black;
/* Only change code above this line */
}
}