CSS Beginner - Putting It All Together

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

You should already have an HTML file like the one made at the end of the HTML Beginner Tutorial, with a line that we added at the start of this CSS Beginner Tutorial, linking the HTML file to the CSS file.

CSS Tutorial by BH24

The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 80%;
 color: black;
 background-color: #ffc;
 margin: 1em;
 padding: 0;
}

/* By the way, this is a comment */

p {
 line-height: 1.5em;
}

h1 {
 color: #ffc;
 background-color: #900;
 font-size: 2em;
 margin: 0;
 margin-bottom: 0.5em;
 padding: 0.25em;
 font-style: italic;
 text-align: center;
 letter-spacing: 0.5em;
 border-bottom-style: solid;
 border-bottom-width: 0.5em;
 border-bottom-color: #c00;
}

h2 {
 color: white;
 background-color: #090;
 font-size: 1.5em;
 margin: 0;
 padding: 0.1em;
 padding-left: 1em;
}

h3 {
 color: #999;
 font-size: 1.25em;
}

img {
 border-style: dashed;
 border-width: 2px;
 border-color: #ccc;
}

a {
 text-decoration: none;
}

strong {
 font-style: italic;
 text-transform: uppercase;
}

li {
 color: #900;
 font-style: italic;
}

table {
 background-color: #ccc;
}

Teach Yourself  by BH24 HTML Editor Tool!