How Did I Make this Website? Pt. 3
Originally Posted: Oct. 25, 2022
Last Edited: Oct. 25, 2022 12:14 AM EST
Author: Mr. Siefen
Code Repo: https://github.com/mrSiefen/htmlTutorials
How do I even make CSS Files?
HTML files make up the content of our webpage and CSS controls the style of our content. CSS or Cascading Style-Sheets can control layout not just on a web browser, but how its displayed on phones v.s. desktops, how it's printed on paper even! The BEST thing about CSS is that you can define CSS and have multiple pages inherit those styles all together. All of my blog pages for this website share one stylesheet! We also need to update our index.html from "How Did I Make this Website? Pt. 2" to have more content. See the code below!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="./stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/icons/favicon-16x16.png">
<link rel="manifest" href="./images/icons/site.webmanifest">
</head>
<body>
<main>
<h1>This is an h1 header</h1>
<p>This is a paragraph</p>
<h2>This is an h2 header</h2>
<p>This is another paragraph</p>
<h3>This is an h3 header</h3>
<p>This is a paragraph with an image under it</p>
<img src="http://1.bp.blogspot.com/-WdGfvCYhd_0/UXgS9irTvLI/AAAAAAAAAGE/c5gLtG0tW4U/s1600/download.gif" alt="creepy furless singing elmo gif">
<h4>This is an h4 header</h4>
<p>This is a paragraph with an unordered list under it</p>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
<h5>This is an h5 header</h5>
<p>This is a paragraph with a nested, unordered list under it</p>
<ul>
<li>This is a list item</li>
<ul>
<li>This is a nested list item</li>
<ul>
<li>This is a nested-nested list item</li>
</ul>
</ul>
</ul>
<h6>This is an h6 header</h6>
<p>This is a paragraph with a nested, ordered list under it</p>
<ol>
<li>The 1st item</li>
<li>The 2nd item</li>
<ol>
<li>1st Nested Item</li>
<ol>
<li>1st Nested-Nested Item</li>
<li>2nd Nested-Nested Item</li>
</ol>
<li>2nd Nested Item</li>
</ol>
<li>The 3rd item</li>
</ol>
</main>
<footer class="footer">
<p>Author: Mr. Siefen<br>
<a href="mailto:siefens.robot.emporium@gmail.com">siefens.robot.emporium@gmail.com</a></p>
</footer>
<script src="./scripts/index.js"></script>
</body>
</html>
Let's Break it Down into Elements
Pre-Head and Head Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="./stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/icons/favicon-16x16.png">
<link rel="manifest" href="./images/icons/site.webmanifest">
</head>
This is unchanged from the code of part 2. For a quick summary all HTML files are really XML files. XML files use tags with opening and closing tags for most elements. Everything before the body tag of an HTML document is loaded before any visible content! So we can linkup our stylesheets, set the tab title, favicon, blah blah. C'mon get to the cool style stuff already!!!
<link rel="stylesheet" href="./stylesheets/style.css">
The most important part of the head code is that line right there! You almost missed it! Without that line your page will be a bland, white static canvas of content. We need to fix that! You can link stylesheets to your HTML files in the head only! You can also have multiple stylesheets! This is super handy for having a general style for the site every page uses, but a specific stylesheet for different types of pages that adds more!
Body Code:
<body>
<main>
<h1>This is an h1 header</h1>
<p>This is a paragraph</p>
<h2>This is an h2 header</h2>
<p>This is another paragraph</p>
<h3>This is an h3 header</h3>
<p>This is a paragraph with an image under it</p>
<img src="http://1.bp.blogspot.com/-WdGfvCYhd_0/UXgS9irTvLI/AAAAAAAAAGE/c5gLtG0tW4U/s1600/download.gif" alt="creepy furless singing elmo gif">
<h4>This is an h4 header</h4>
<p>This is a paragraph with an unordered list under it</p>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
<h5>This is an h5 header</h5>
<p>This is a paragraph with a nested, unordered list under it</p>
<ul>
<li>This is a list item</li>
<ul>
<li>This is a nested list item</li>
<ul>
<li>This is a nested-nested list item</li>
</ul>
</ul>
</ul>
<h6>This is an h6 header</h6>
<p>This is a paragraph with a nested, ordered list under it</p>
<ol>
<li>The 1st item</li>
<li>The 2nd item</li>
<ol>
<li>1st Nested Item</li>
<ol>
<li>1st Nested-Nested Item</li>
<li>2nd Nested-Nested Item</li>
</ol>
<li>2nd Nested Item</li>
</ol>
<li>The 3rd item</li>
</ol>
</main>
<footer class="footer">
<p>Author: Mr. Siefen<br>
<a href="mailto:siefens.robot.emporium@gmail.com">siefens.robot.emporium@gmail.com</a></p>
</footer>
<script src="./scripts/index.js"></script>
</body>
The body has alot of changes so we're gonna break it down even further. Just like last time we have the opening and closing, body and main tags. All of our visible content "lives" between those tags. What separates main from body is that main should only have the truly unique content of the page. The footer will be the same on every page so its excluded from main, but still part of the body!
<footer class="footer">
<p>Author: Mr. Siefen<br>
<a href="mailto:siefens.robot.emporium@gmail.com">siefens.robot.emporium@gmail.com</a></p>
</footer>
Even though this is out of Top-Down order, I'd like to talk about the footer really quickly! The footer being this "non-unique" thing it must be really important to get it right the first time. That's true, and moreover the footer can be really useful, or just a waste of space on screen. Footers are typically a good place for contact info, copyright, social media links, etc. Footers are NOT good for eye popping graphics, embedded YouTube videos and the like. Our example footer has the name of who made the site and an email hyperlink to contact me.
More Body Code:
<h1>This is an h1 header</h1>
<p>This is a paragraph</p>
<h2>This is an h2 header</h2>
<p>This is another paragraph</p>
Here we see two different headers in their natural habitat. See how the h1 and it's child paragraph congregate in a pack of other headers. As the "alpha and dominant" header, h1 is the biggest, baddest header of 'em all! h2 is just like h1 except smaller. Headers should always follow numerical order! No h2 before h1 and no h5 before h4,h3,h2 or h1 and so on.
<h3>This is an h3 header</h3>
<p>This is a paragraph with an image under it</p>
<img src="http://1.bp.blogspot.com/-WdGfvCYhd_0/UXgS9irTvLI/AAAAAAAAAGE/c5gLtG0tW4U/s1600/download.gif" alt="creepy furless singing elmo gif">
This chunk introduces the img element. Images can be jpegs, bitmaps, pngs, gifs and more. They can be stored in a local directory or linked to an online location with the src attribute. I've done the latter and found the snazzy creepy furless elmo gif. As part of best practices you should ALWAYS also include the alt attribute. Alt holds the text that will be shown if your image cannot be found in place of the actual image.
Fun Factoid: It's also how images are cataloged for Google Images! Learn more about SEO (search engine optimization) for Google Images here or watch the video below!
Even More Body Code:
<h4>This is an h4 header</h4>
<p>This is a paragraph with an unordered list under it</p>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
<h5>This is an h5 header</h5>
<p>This is a paragraph with a nested, unordered list under it</p>
<ul>
<li>This is a list item</li>
<ul>
<li>This is a nested list item</li>
<ul>
<li>This is a nested-nested list item</li>
</ul>
</ul>
</ul>
Here we see two more headers and the introduction of the ul and li elements. ul is an unordered list or "bullet point list". li is a list element that can go inside of a ul element. An unordered list can also be nested and have an combination/number of sub-lists and list items. As the nest goes deeper the symbol shown next to the list element changes to show hierarchy. This is a great way to display and organize information.
<h6>This is an h6 header</h6>
<p>This is a paragraph with a nested, ordered list under it</p>
<ol>
<li>The 1st item</li>
<li>The 2nd item</li>
<ol>
<li>1st Nested Item</li>
<ol>
<li>1st Nested-Nested Item</li>
<li>2nd Nested-Nested Item</li>
</ol>
<li>2nd Nested Item</li>
</ol>
<li>The 3rd item</li>
</ol>
Finally our smallest header h6 contains a nested ordered list. Just like unordered lists ol can contain other ol and li elements. You can also nest ul and ol inside of each other to show further hierarchy. Do NOT abuse this! Lists are not paragraphs for tons of information! Even though websites are NOT "powerpoint" the rules and ideas presented by David JP Phillips at TedxStockholmSalon hit the nail on the head!
So Now I Made a Not-So Empty Webpage, So What?
Next we need to style all of our new content! This is the exclusive role of our CSS. We have 1 stylesheet for this tutorial. Make sure you place this file in the location you specify in the head of your webpage. CSS controls the style of elements by using various selectors. Selectors can be types of elements like body, p, img, h1, etc. They can also be tied to id's (this isn't super common since id's are unique to a single HTML element per page) or classes. Classes are CSS's best friend in my personal opinion. You can create a class that certain elements can inherit with the class="" attribute of literally any element! Look through your html code and you should see a class name for our footer. Now let's examine our CSS code in depth.
html {
background-color: #1b1b1b;
color: #ffffff;
}
main {
background-color: #424242;
padding-bottom: 4.5rem;
}
h1,h2,h3,h4,h5,h6 {
padding: 1rem;
background-color: #6d6d6d;
text-align: center;
border: 0.5rem solid black;
margin: 1rem;
}
img {
margin-left: 1rem;
border: 0.5rem solid red;
border-radius: 50%;
box-shadow: 15px 15px #1b1b1b;
}
ul li {
color: darkorange;
}
ol li {
color: pink;
}
p {
transition: 1.0s;
margin-left: 1rem;
}
p:hover {
color: lime;
transition: 1.0s;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 4.5rem;
text-align: center;
background-color: #1b5e20;
background-image: linear-gradient(140deg, #4c8c4a 0%, #1b5e20 50%, #003300 100%);;
}
.footer a {
text-decoration: none;
color: darkturquoise;
}
Let's Break it Down into Elements Again!
HTML, Main and Header Selectors:
html {
background-color: #1b1b1b;
color: #ffffff;
}
main {
background-color: #424242;
padding-bottom: 4.5rem;
}
h1,h2,h3,h4,h5,h6 {
padding: 1rem;
background-color: #6d6d6d;
text-align: center;
border: 0.5rem solid black;
margin: 1rem;
}
The html selector references the entire webpage. Here we set the background-color of the page to a dark grey color, and the text color to white for the whole page. Then we set a different background-color for anything in the main area of the page. Padding-bottom adds extra space to the bottom of our main content to account for our fixed footer later on.
In CSS you can use multiple selectors at once by separating them with commas. Here I've said all 6 sizes of headers should have padding on all 4 sides and have another different background-color. The text should be centered and all the headers should be surrounded by a black 2 pixel thick solid border.
That was alot at once so take a breather and save these changes. Open your index.html file in a web browser and see how it changed the page! Change the background-color and text colors, change margins, paddings, etc. See how it affects the layout of the headers on the page. When you're ready move on to the next chunk!
Img, ul, ol and li Selectors:
img {
margin-left: 1rem;
border: 0.5rem solid red;
border-radius: 50%;
box-shadow: 15px 15px #1b1b1b;
}
For our creepy elmo gif I've added a red border and a border radius. Border radius can be used even without specifying a border. I use this CSS trick to round the corners of the blog "cards" that you see on this webpage! Finally I added a box-shadow. Box shadows need a distance for X and Y to extend the shadow out to as well as a color. With all CSS you can specify colors with Hexadecimal like i've done, with rgb(0-255, 0-255, 0-255) or rgba(0-255, 0-255, 0-255, 0-1). The RGB method uses 256 bit colors, RGBA is the same except with an "alpha" transparency value of 0 through 1.
ul li {
color: darkorange;
}
ol li {
color: pink;
}
We talked about multiple selectors, but what if you want to only select elements within another element? A great example of this is how I've used the selectors for ul and ol with a secondary selector of li. This means only apply the text colors to the li elements inside of ul or ol with their own colors!
This is another good stopping point. Take a break, save your work, refresh your index.html file and see what happens. Change the border-radius and box-shadow attributes. My style choices are definitely not for everyone! Style it however you want!
P Selectors and :Hover :
p {
transition: 1.0s;
margin-left: 1rem;
}
Transition is a really cool css attribute. CSS can do timed transitions from one style to another. Here theres a timed transition of one second whenever an p element on the page is normal. Why wouldn't it be normal? Well we can tell if a user is hovering over the paragraph without any JS needed!
p:hover {
color: lime;
transition: 1.0s;
}
The :hover add on to an element as a selector in CSS means that this style is only applied if the user is hovering over that element. On desktop this means if the mouse moves over the paragraph it should change the text to lime green. This transition to lime green from the default text color should take 1 second. Then when the mouse stops hovering the text goes back to the default color with another 1 second transition. On mobile the hover effect is triggered on a tap or long hold on an element since there is no "mouse" to hover with.
We're almost done now! The last chunk is all about how to make our footer stay at the bottom of our screen now matter how long the page is.
Footer and .footer Selectors :
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 4.5rem;
text-align: center;
background-color: #1b5e20;
background-image: linear-gradient(140deg, #4c8c4a 0%, #1b5e20 50%, #003300 100%);;
}
I briefly mentioned it earlier, but so far all of our selectors have been by element type, what about those class names? In the CSS chunk above we see a . preceding the class name. This is how class names can be used as selectors in CSS. The most important pieces of the .footer style that keep it held in place are the position, bottom and left attributes. The height of your footer should match the padding-bottom size we set for our main element earlier!
I also added a cool background gradient to the footer. The linear-gradient is sometimes not supported in older browsers so you should always have a background-color too! Learn more about making and customizing linear-gradients here.
footer a {
text-decoration: none;
color: darkturquoise;
}
Kind of a lame one to end on, but super important nonetheless. The text-decoration attribute affects if underlines, bold, italics, etc will be applied to your text. By default all anchor tags (a) are colored blue and underlined. Aesthetically this looks bad and we can easily change that.
That's the end of Part 3 of learning how to make your own website from scratch. Stay tuned for part 4 where we get into some basic javascript! If you missed part 1 and part 2 or want to read any of the other blog posts please click the links or use the navigation bar at the top of this page. See you next time!