Looking for an easy way to learn CSS? Chances are, you are not going to be able to open up your phone book and find any listings for CSS training. Luckily, there are several web designers and developers who publish tutorials that should help you out. Here are some basic CSS training resources.
Web Design and CSS
CSS is an essential element of website design. Cascading style sheets (CSS) are used to define styles to web pages. Without these styles, a web page would look like a bunch of twisted jumbled words, and nothing more. CSS styles website text, pictures, photos, etc, and arranges everything on the page the way you see it. Here are some basics CSS examples and links to further your learning.
Example 1 - Calling CSS as an external stylesheet
THE CSS
#csstutorial { <——– #csstutorial refers to a div. “{” is a bracket, which contains the styling for everything within that div.
font-size: 12x;
font-weight: bold;
color: black;
text-decoration: underline;
} <——— Always make sure to close CSS using “}” bracket.
NOTE
The above CSS is simply some defined style settings. However, they mean nothing until they are applied to some text, or HTML. Here is an example of the HTML markup for the above CSS:
THE HTML FOR THE CSS
Bla bla bla, CSS code is easy to learn once you understand the basics <——– This is your HTML text
THE FINAL RESULT
Bla bla bla, CSS code is easy to learn once you understand the basics
Note that the final result is 12px in size, black in color, bold, and underlined, as we defined it using CSS
Example 2 - Direct CSS Tags
The above CSS is about as difficult as it’s going to get (most of the time). If you can understand that, you are on your way to learning CSS.
Example 2 of our online CSS course will demonstrate direct CSS tags.
Some CSS traits can also be called using direct tags within the HTML markup. Rather than having the CSS and HTML separate, like the above example, you can use quick tags to mark text within HTML. Here is an example.
THE HTML
bla bla bla
Note
The and are quick tags. They will underline the text that they contain.
THE FINAL RESULT
bla bla bla
CSS Style
Note all the things that we did to the text from example 1. We defined the font size, made the text bold, made the color black, and underlined it. Aside from these simple styles, you can do tons of other things as well. Here is an example of another common style elements:
border: 1px solid #CCC; <——– This creates a 1px solid line border that’s gray in color all the way around the defined div.
border-right:2px dotted #006699; <——– You can also define just a right border, left border, bottom, or top. Notice this would be a dotted line border, rather than solid. The #006699 represents a shade of blue, which is different from the #CCC gray example above.
Further references
Hopefully, the above examples gave you a better understanding for how CSS works. This was just a brief online CSS course in fundamentals. Often it is best to learn by example. If you want to check out more styles that you can apply to CSS, W3 Schools has a great reference sheet which you can view here .
Want to learn all three ways you can apply CSS? Check out our article on How to Use CSS Underline .
Want to see an example of how CSS and HTML work on a website? Check out this article on creating a drop down menu .
