Introduction:

If you want to learn CSS and you are an absolute beginner, then this article is designed for you. This article won’t exactly go into all of the different CSS attributes but it will go into understanding the CSS concept and it will also introduce the coding in both HTML and CSS.  To fully understand this article it is recommended to have a good grasp on HTML.

Now with that said, lets go into what exactly CSS is, CSS stands for Cascading Style Sheets and it is used to define attributes for any HTML tag such as a div tag or p tag. If you didn’t understand that then maybe this perspective will help; imagine if you had a dozen cartoon characters and you had to define what colors all of their clothes are. Keep in mind that those characters had repeating clothes colors. Now if you did it the HTML way, then you have to write every single cartoon character’s attributes individually and things would get really repetitive but if you used CSS then you would have a separate list of attributes that is linked to all of the different characters and those attributes were defined in a class, such as “blue” or “green”. So instead of individually writing “shirt-color: blue; pant-color: blue; and shoe-color: blue;”  on every character all you have to do is write [class="blueclothes"] on every character that you want to wear blue clothes the same goes for any other color. One of the benefits of using CSS is that if you want to make a change to all of the HTML tags, or in this case cartoon characters, then you just have to change the CSS style attributes and that automatically changes all of the linked cartoon characters instead of doing it the the HTML way and individually changing every character. That is just a simple example so just think if you had 50 cartoon characters and you had to define more than just the color of their clothes, then the use of CSS would become 10x more important and effective.

The Code:

CSS can be written in three different places, #1 and the most popular and time effective is on an external .css file, #2 is embedded CSS which lies in the head of the HTML document wrapped in <style></style> tags, and the last method #3 is written inline (inside the HTML tag) using the style=”" attribute.

CSS Style Priority

You maybe be wondering what if there are two of the same styles but in different places such as inline or external, which one would have priority over the other. Well the priority goes like this; inline CSS has priority over embedded and external CSS styles. Embedded CSS has priority over an external CSS file. External CSS has priority if there is no inline or embedded CSS styles.

The Types of CSS Styles

CSS has 3 different types of styles, The first style is a universal style which is written with nothing before the style name such as “body” (which allows you to define the body tag on a HTML document) or “a” (which allows you to modify all of the anchor tags in the HTML document). A universal tag does not need to be specifically linked to tag in the HTML document since it is automatically linked to any tag which you defined in the CSS document. The second type of style is a class, which is defined by prefix of a period (.) before the name of the class for example “.blue”. A class can be used in a document as many times as you would like. A class can be linked to HTML tag by using the attribute for example, class=”blue”. The third type of style is an id which should only be used once per webpage, this style usually has specific attributes. An id is define in the CSS document like this “#greentext” with a pound sign (#) before the id name. An id is linked to HTML tag like so id=”greentext”.
This is what they look like in the CSS file or the HTML head.

body {
    //attributes go here
}
.blue {
    //attributes go here
}
#greentext {
    //attributes go here
}

This is what they look like in the HTML document

<p id="greentext">Hello! This text is Green!</p>

How to Assign Attributes to CSS classes

If you are familiar with styling an HTML tag, CSS has similar attributes. In HTML you would use the width=”500px” to define a width of a element. In CSS you would define a width of 500px like this width: 500px; Every attribute in CSS uses a colon after the attribute name (width:) and the specified attribute size or characteristic always ends with a semi-colon (500px;) so every attribute will look like this width: 500px;

What a Finished Style Looks like:

The below method is used for external and embedded style sheets.

.bluebox {
     background-color: blue;
     width: 500px;
     height: 500px;
}

The below method is for inline styles.

<div style="background-color: blue; width: 500px; height: 500px;">

Best Practices:

From my experience I have found it best to keep everything organized. For example I like to list all of my universal styles on the beginning of the document before the classes and ids. I also like to organize my styles (excluding the universal tags) in groups and have those groups listed in order of appearance on the page. For example, I usually list the header or navigation first and put the footer on the bottom of the style sheet.

I have found it to be highly convenient to  put comments on my styles defining what they are used for, well if it is not self-explanatory. You can comment using this code /* comment here */. Another recent organizational method I learned recently was to create a color guide. To create a color guide write a multi-line comment by using this method /* comment here */ and place the color codes with their definitions. Look below for an example. Just as a preference I like to place this on the top of the CSS file.

/*
COLOR GUIDE:
#12fdd3=Green
#121819= Dark Black
#12171d=Dark Blue
#00f0d0=Bright Pale Green
#676767=Gray
#e6e6e6=Light Gray
*/

Summary:

CSS is a faster, more efficient way to style HTML. It is used in most web sites today and therefore it is supported by nearly every browser that exists. CSS can be written in an external file with a .css extension, embedded in the head of HTML document using tags, or it can written inline in the HTML tag itself using the (style=”") attribute. The inline method has priority over embedded and external while embedded has priority over external. It is best use an external style sheet for most multi-page website and inline CSS is best for HTML emails. Oh and don’t forget organization is key. I hope you enjoyed this article. If you have any questions please feel free to contact me or leave a comment below.

Resources:

Here is a list of CSS resources to help you learn and write CSS
CSS Cheat Sheet
CSS reset
CSS Positioning
CSS box model and Internet Explorer
CSS ordered list tutorial
Replace Text with CSS background
CSS Sprites
CSS Menu with Image Sprites
CSS Typography Examples/Tutorials
CSS3
CSS Crimes you Shouldn’t Commit