.fear {display: none;} — A Beginners Guide to Tackling CSS Fearlessly

Computer graphic resembling a Mac with “CSS” written on it

What is CSS?

What are classes and IDs?

Classes

.comment_class {
font-color:#000;
}

IDs

#main_id {
font-color:#000;
}

Where does the CSS go?

External Styling

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body>
</html>
body {
background-color: grey;
}
h1 {
color: #080835;
}
p {
color: #ffffff;
}
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line

Internal Styling

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
h1 {
color: #080835;
}
p {
color: #ffffff
}
</style>
<head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body>
</html>
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line

Inline Styling

<!DOCTYPE html>
<html>
<head>
<head>
<body style="background-color: grey;">
<h1 style="color: #080835;">This is a heading</h1>
<p style="color: #ffffff;">This is a paragraph.</p>
<body>
</html>
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line
A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line

Tips and Tricks

Hover Effects

.navigation h2{
font-size:36px;
color:#000000;
font-weight:800;
}
.navigation h2:hover{
color:#f00000;
}

Links

a:link { 
color: blue;
}
a:visited {
color: purple;
}

Box-Sizing

.box_class {
width: 300px;
height: 300px;
padding: 10px;
box-sizing: content-box;
background-color: grey;
border-style: solid;
border-color: blue;
border-width: 5px;
}

Drop Caps

p:first-letter {
display:block;
float:left;
margin:3px;
color:#f00000;
font-size:300%;
}

Absolute Positioning

.main-photo {
position:absolute;
top:20px;
right:20px;
}

Select All Elements

*p {
color: white;
}

Transitions

.log-in-button h2:hover {
color: #f00000;
transition: all 0.3s ease;
}

Full-Stack Engineer, UX/UI Aficionado, and lover of coffee.