4. So let’s
create
a text file.
• Create a folder on your
desktop.
• Open Notepad.
• Save it as index.html in your
folder.
• Open it in your browser.
• Pat yourself on the back.
• Having trouble? On a Mac?
Go to:
https://codepen.io/pen/
21. Let’s create
another text
file.
• New, blank Notepad file.
• Save it as styles.css in the
same folder as your
index.html.
• Pat yourself on the back.
• Having trouble? On a Mac?
Go to:
https://codepen.io/pen/
23. <!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet"
href="styles.css" />
</head>
<body>
</body>
</html>
<!--
Again, I broke the tag up because it was too long. You
should do it all on one line.
If you’re on CodePen, you don’t have to do this step, but
you should learn it.
-->
My Website
Linking the stylesheet.
24. <p>
This is my paragraph!
</p>
<!--
I left out all the other stuff for brevity, but you
still need it in your files!
-->
My Website
HTML
p {
background: green;
}
CSS
Let’s make it green!
25. <p>
This is my paragraph!
</p>
My Website
HTML
p {
background: green;
color: white;
}
CSS
Let’s make it readable.
26. <p>
This is my paragraph! Let’s
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
CSS
Styles for everything under the sun.
27. <p>
This is my paragraph! Let’s
make it longer!
</p>
<p class="special-paragraph">
This is my paragraph! Let’s
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
.special-paragraph {
background: red;
}
/*
The period means we’re selecting a class
name rather than a tag.
*/
CSS
Class is in session.
28. <div class="container">
<p>
This is my paragraph! Let’s
make it longer!
</p>
<p class="special-paragraph">
This is my paragraph! Let’s
make it longer!
</p>
</div>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
.special-paragraph {
background: red;
}
.container {
display: flex; /* Advanced! */
}
CSS
Let’s make them side-by-side.
29. <p>
This is my paragraph! Let’s
make it longer!
</p>
Now I’m down here!
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
margin-bottom: 100px;
}
CSS
Styles for everything under the sun.
30. <p>
This is my paragraph! Let’s
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
padding: 10px;
}
/*
We added padding. Why did our box get
bigger?
*/
CSS
Padding. Cool, but what happened?
32. <p class="special-paragraph">
This is my paragraph!
</p>
My Website
HTML
p {
width: 100px;
height: 100px;
padding: 10px;
}
.special-paragraph {
background: green;
}
.special-paragraph {
background: orange;
}
CSS
Learning the cascade.
34. <div class="special-div">
<p class="special-paragraph">
This is my paragraph!
</p>
</div>
My Website
HTML
p {
width: 100px;
height: 100px;
padding: 10px;
}
.special-div > .special-paragraph {
background: green;
}
.special-paragraph {
background: orange;
}
CSS
Specificity.
35. <div class="special-div">
<p>
This is my paragraph!
</p>
</div>
My Website
HTML
.special-div {
font-family: arial;
background: green;
color: white;
font-weight: bold;
}
/*
Certain properties, like font styles, colors, and
weights, inherit down to child DOM nodes.
*/
CSS
Inheritance.
36. <div class="special-div">
<p>
This is my paragraph!
</p>
</div>
My Website
HTML
.special-div {
padding: 10px;
background: green;
border: 3px solid red;
}
.special-div > p {
border: inherit;
}
/*
But you can make anything inherit if you try hard
enough.
*/
CSS
Inheritance, continued.
37. <div class="special-div">
<p>
This is my
<strong>paragraph</strong>!
</p>
<ul>
<li>
<strong>List Item</strong>
</li>
</ul>
</div>
My Website
HTML
.special-div strong {
color: red;
}
CSS
The descendant selector.
38. <p class="special-paragraph">
This is my paragraph!
</p>
<p class="other-special-paragraph">
This is my paragraph!
</p>
My Website
HTML
.special-paragraph,
.other-special-paragraph {
color: red;
}
CSS
Multiple selectors, one rule.
39. There’s a lot we
didn’t cover.
But you’ve got the basics, and the rest is
just knowing where to look.
