, ,

The problem is the exacting details.

There are a few things in CSS which must be learned and which must be done exactly right. This is a problem for people who are not naturally good spellers, because some of the key words must be spelled precisely and the punctuation must also be precise. A single tiny mistake and it won’t work right. Putting a colon (:) where a semicolon (;) should be will screw things up, and they are on the same computer key.

The solution is to memorize the details perfectly.

What is working for me is to find the absolute essential things that must be done, and then write these things out on a 3×5 note paper without looking at the source code. The method is to write the code until it can be written perfectly without looking at the source. After doing this I wait an hour doing some other distracting activity, and then without looking write it out again. That hour long pause puts the information into long term memory.


Some of these code things do have lots of options and people deep into the coding experience will complain that this method is an oversimplification of a complex system. Yes it is over-simple; however, this method does produce a functioning CSS modified HTML document without looking at any outside source. It could be written on a piece of paper and scanned with OCR and still produce a functioning CSS web page. Once you can reliably do the basic code, then it makes sense to start adding on other things from the huge list of special commands, because you will understand what they are doing. There are some informative CSS tutorials, but they pile on so much example material it is difficult to learn the essentials. Here are the essentials.

Memorize the simplest possible working CSS page

In NOTEPAD type an html document and save it.

<html> <head> </head> <body>Hi</body> </html>

Save as hi.htmland click that file to view it in your default browser. That is a working super-simple html document, but it works and without the ability to do that line you can’t do anything. So, get out a 3×5 note pad and write it out, several times, until you can do it with absolute reliability from memory. Once you are perfect with that, memorize a little more.

<html> <head> <title>This is Hi. </title> </head> <body> <h1>Headline for Hi</h1> <p>Hi this is some text 1</p> </body></html>

Save again as hi.html and view your progress by clicking the document file. This only added your title to the Title-bar at the very top of your browser page, plus a headline and some text. With nothing more than this, you can now write out a basic text html document, so learn that perfectly.  Now for the simplest CSS you need to add the following line after the head marker. So memorize it too by writing it down repeatedly until you can do it perfectly the next day without looking back.

<link rel="stylesheet" type="text/css" href="your1st.css">

Now put all of these memorized pieces into a complete unit.

<html> <head> <link rel="stylesheet" type="text/css" href="your1st.css"> <title> This is Hi. </title> </head> <body> <h1>Headline for Hi</h1> <p>Hi this is some text 1</p> </body></html>

Save again as hi.html and click to view your progress. There will be no change this time because it needs a CSS document to link to, but it will link to a CSS document we named your1st.css in the html document above. To create that CSS document, open a new NOTEPAD and type:

h1 {color:red;} p {color:green;}

Save it as your1st.css because that is the arbitrary name we gave it in the html document above, and click to view your progress. The html code in the first document, hi.html links to the coding in the css document, your1st.css and converts the headline with the h1 to red and the paragraph line with the p to green.

CSS example

This is CSS as basic as it gets — learn it perfectly and then build upon it.

When you can do these few things perfectly, without looking anything up, you understand the basics of CSS. There are many wonderful things it can do with HTML and CSS but you must know these basics before you can do any of them.