Throughout your life, you’ve undoubtedly been given multiple strategies for learning something. Well, similar to math and vocabulary, some techniques for learning CSS are more effective and efficient than simply consulting a site every time you need information.
Reword the Technical Definitions
One of the largest issues for many people is making sense of the technical definitions provided by most websites. For example, if you’re unsure what the "inherit" value for the "direction" property does, you’ll probably reference a CSS tutorial website. If that site is fond of technical definitions, you’ll find an explanation similar to “Specifies that the value of the direction property should be inherited from the parent element,” which is the definition provided by w3schools.com.
Yet that explanation won’t do much for a layman. However, if you can manage to make sense of the definition by putting it in your own words, it will be much easier to remember what the “inherit” value does. So instead of “Specifies the value of the direction property, etc.,” you can reword it to “If using the ‘inherit’ value for the ‘direction’ property, the words on the page will be read in the same way as it does in the element containing the ‘direction’ property.” Of course, providing an example always helps: “If a ‘div’ uses the direction property to make the text read right to left (div {direction:rtl;}), then I can make paragraphs inside the ‘div’ read the same way. All I have to do is use the code ‘div p {direction:inherit;}.’ That says that all paragraphs inside a ‘div’ will use the same text direction as the ‘div.’”
Use Your Own Vocabulary
Similar to technical definitions, the vocabulary in CSS is also relatively technical (e.g., the aforementioned “property” and “value”). For a while, I had trouble remembering the difference between “element,” “property” and “value.” Then I broke down the words and substituted words that made more sense to me. An element is just a part of something (hydrogen is a part of water). So in my head, instead of “element,” I use the words “HTML part.” That way, I always remember that “element” refers to the HTML part of the code.
“You learn by doing” is an established mantra used by countless teachers. One of the best ways to learn CSS is to craft a site from scratch – by yourself. Instead of copying and pasting code from various sites to achieve desired results, or using a template that already has most of the code intact, type each letter for each element (“HTML part”). Every time you type out a CSS property (what I call a “styler”) and declare a value for it, you’ll become more familiar with the property, the values that change it and what the result looks like. But if you copy and paste everything, you’ll only become familiar with copying and pasting and easily forget the purpose of each styler – and even which ones exist.
Numerous techniques for learning CSS are available from a wide variety of sites. But it’s crucial to make sense of CSS in your own head instead of always relying on the work of other people.
