1,000+ Views

DIY One-Page Website: Part 2/4 - CSS Basics

What you need: 1. A plain text editor (I recommend Notepad ++) 2. A browser to view your work In the previous lesson, we learned some HTML basics, which are essential when creating a website. Now I will teach you the basics of CSS, Cascading Style Sheets. CSS is the makeup of HTML, it's what makes it look beautiful and adds style. There are different ways to style your HTML, in your HTML file or on a separate ".css" that is linked to your HTML page. The latter is a more organized way of doing it and it is the method I will teach you. STEP 1: Create a file on Notepad ++ and save it as "style.css" in the same folder where you have "index.html". STEP 2: Go to your html file in the <head> </head> and link your CSS file using the following code: <link rel="stylesheet" type="text/css" href="style.css"> This will allow you to see the changes you make when adding the CSS code to "style.css" because it will be linked. STEP 3: Before starting the CSS, I wanted to add a couple more things to the HTML page. Links can be added as: <a href="#">Link 1</a> Where "#" is the address of the link. I'm using a hashtag as a placeholder. Add as many links as you'd like inside the body tag <body></body>. I'm adding 4. STEP 4: Go back to styles.css To style everything in the body tag in the html page, you put everything in this bracket: body { /* Put everything inside here */ } let's start by making a few changes in the body tag. CHANGE BACKGROUND COLOR To change the background color of the page you use: background-color: #00CCCC; The hex number is the color (I chose a blue). You can play around with the colors by choosing another hex here: ALIGN TEXT To align text to the center you simply use text-align: center; If you're noticing a pattern here, you are using a label, parameter and closing it with a semi-colon. CHANGE FONT I want to change the header 1 font (h1), the paragraph font (p), and the link font (a:link). In order to do this I create other brackets h1 { /* Heading 1 */ font-family: "Arial Black"; font-size: 40px; letter-spacing: -2px; color: #000066; } p { /* Paragraph */ font-family: "Arial"; text-align: justify; } a:link{ /* Unvisited Link */ font-family: "Arial Black"; color: #FFFFFF; text-decoration: none; font-size: 20px; } a:hover { /* Hovered Link */ text-shadow: 0 0 5px #999 } STEP 5: Refresh "index.html" to see the changes. There is so much more to CSS than I could put here in this card, for more examples go to
Cards you may also be interested in