Use CSS to style a web page from scratch
One of the best ways to get started when learning about web design and CSS is to get your hands dirty and style a simple web page from scratch.
- See a Demo: https://johndoenma.github.io/coursework/art128/simplewebpagewithcss/index.html
- View on Github: https://github.com/johndoenma/coursework/tree/master/art128/simplewebpagewithcss
- View on Codepen: https://codepen.io/kccnma/pen/ppQdmo
Video Lesson
Watch this old video below for a guided step-by-step demonstration of this assignment.
Let’s Code!
Get started by launching your favorite code editor (IDE)
Create a new HTML folder named “simplewebpagewithcss”
Inside of your new directory, copy-paste your simplewebpage.html file and rename it to index.html. Next, create another new folder named “css” and inside of it create a new file named style.css. This is the file that we will be editing. Once you are all set up, your local folder setup should look like this:
Start Styling!
Next, go line-by-line and write every line of CSS from the code below by hand. After each line, hit save then preview your changes in the browser by hitting refresh.
HTML
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Simple Web Page</title> | |
| <meta name="description" content="A simple HTML web page with sample markup and a linked CSS file for styling." /> | |
| <!-- VIEWPORT FOR MOBILE --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- FOR IE --> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <!-- MAIN CSS --> | |
| <link href="css/style.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <h1>This is a Simple HTML Web Page w/ Linked CSS</h1> | |
| <h2>A basic External CSS setup via a single style.css file</h2> | |
| <h3>This is an H3</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus urna neque, elementum et, auctor vel, vestibulum in, dui. Praesent laoreet. Aliquam semper ullamcorper augue. Integer vitae lorem. Suspendisse commodo. Donec vulputate. Nunc vel pede vel turpis consectetuer fermentum. Praesent a nisl eu diam luctus consectetuer. Phasellus at diam. Vestibulum turpis odio, bibendum interdum, adipiscing eu, facilisis id, erat. Nulla id magna id sapien molestie posuere. Nam faucibus. Donec commodo bibendum mi. Aliquam erat volutpat. Praesent felis mi, elementum ut, condimentum nec, nonummy at, enim.</p> | |
| <p>Integer sem velit, ornare eu, blandit ac, elementum sit amet, metus. Pellentesque in est elementum est cursus consectetuer. Pellentesque mattis purus id erat. Cras volutpat bibendum neque. Nunc a dui. Mauris a neque cursus lorem ultrices sagittis. Morbi ligula. Aenean venenatis justo id arcu. Cras pretium ipsum ut velit. Integer pulvinar. Curabitur magna arcu, molestie at, rutrum at, gravida vulputate, nisl. Sed ipsum orci, accumsan sed, aliquet vel, tempor quis, arcu. Donec aliquam. In nulla nunc, tempor eu, laoreet id, tincidunt sit amet, arcu.</p> | |
| <p>This is an unordered list:</p> | |
| <ul> | |
| <li>Eggs</li> | |
| <li>Milk</li> | |
| <li>OJ</li> | |
| <li>Cereal</li> | |
| </ul> | |
| <p>This is an ordered list:</p> | |
| <ol> | |
| <li>Cereal</li> | |
| <li>Eggs</li> | |
| <li>OJ</li> | |
| <li>Milk</li> | |
| </ol> | |
| <p>This is a link to <a href="http://google.com">google's web site</a>.</p> | |
| </body> | |
| </html> |
CSS
| /* BASE (Initital Setup) | |
| ===================================== | |
| #BASE TYPOGRAPHY | |
| #BODY | |
| #HEADINGS | |
| #PARAGRAPHS | |
| #LINKS | |
| ===================================== */ | |
| /* #BODY */ | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| color: #333; | |
| font-size: 100%; /* 16px; */ | |
| line-height: 1.5em; /* 16px x 1.5em = 24px */ | |
| background: #eee; | |
| } | |
| /* #HEADINGS | |
| Based on a Traditional Typographic Scale | |
| 48, 36, 24, 21, 18, 16 | |
| */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: .5em 0; | |
| } | |
| h1 { | |
| font-size: 3em; /* 48px / 16px = 3em */ | |
| line-height: 1em; | |
| } | |
| h2 { | |
| font-size: 2.25em; /* 36px / 16px = 2.25em */ | |
| line-height: 1.1em; | |
| } | |
| h3 { | |
| font-size: 1.5em; /* 24px / 16px = 1.5em */ | |
| line-height: 1.2em; | |
| } | |
| h4 { | |
| font-size: 1.3125em; /* 21px / 16px = 1.3125em */ | |
| line-height: 1.3em; | |
| } | |
| h5 { | |
| font-size: 1.125em; /* 18px / 16px = 1.125em */ | |
| line-height: 1.4em; | |
| } | |
| h6 { | |
| font-size: 1em; /* 16px / 16px = 1em */ | |
| line-height: 1.5em; | |
| } | |
| /* #PARAGRAPHS */ | |
| p { | |
| margin: 0 0 .5em 0; | |
| max-width: 35em; | |
| } | |
| /* #LINKS */ | |
| a { color: #39c; text-decoration: none; } | |
| a:hover { color: #069; text-decoration: underline; } | |
| a:focus { color: #39c; } | |
| a:visited { color: #39c; } |
When you are done, it should look like this:
See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.0
If you completed this assignment, great job!
Summary
Getting started with CSS is a little harder than HTML, but not much harder. Just like HTML, the more you code, the easier it will get as you practice writing code and building web sites.