Web Development
Lesson 3: CSS
1. CSS Walkthrough
We added quite a few CSS declarations to our page. Let's walk through them now and see what they do.
Anchor Tag
<a>
browser default css
a {
text-decoration: underline;
}
browser default css
<a>
<main.css>
a {
text-decoration: none;
}
<main.css>
UL & LI Tags
<ul> and <li>
browser default css
ul {
list-style-type: disc;
-webkit-padding-start: 40px;
}
li {
list-style:disc
}
browser default css
looks like
looks like
<ul> and <li>
<main.css>
ul {
list-style-type: none;
padding: 0;
}
li {
list-style:none;
}
<main.css>
looks like
looks like
Multiple CSS Selectors
<main.css>
h1, h2, h3, h4 {
color: #464646;
}
<main.css>
Multiple CSS selectors can be styled at the same time by seperating them with a comma.
Styling Elements Inside Other Elements
To style elements that are inside other elements separate parent and descendant selectors with a space.
The following code styles the <h3> heading inside the <div>
with class: .front.
<main.css>
.front h3 {
color: #FFF;
}
<main.css>
<index.html>
<div class="front face">
<h3>Question 1:</h3>
<p class="card-text">
What are the three branches of the U.S. Government?
</p>
</div>
<main.css>