CSS Essentials: Foundation for CSS2 Beginners

I'm sure you already heard about CSS (Cascading Style Sheet) many times before but now you need to know more about how to use it. Of course CSS is a must know language if you want to step up your site to the next level but not only its important for styling and coloring your site, CSS now is a lot more than just a styling technique. After CSS2 became reality it's became the main technique used across the board for structuring and designing websites. CSS2 contains all CSS1 features plus it adds new set of features that really forced everyone to look more into using it in a new way.

Quick advice, I recommend you make sure you master all HTML aspects first before you start digging into CSS.

HTML vs. CSS

As you may know HTML is a markup language used for building websites but technically it's used to structure website contents. CSS on the other hand is a scripting language used for formatting structure contents. This may sound a bit technical I know, but once you start using CSS you will understand, so let's go deep on CSS.

Internal & External Stylesheets

CSS is a piece of script added to the html file to style and format the webpage. This script can be added within the same html file or you can add your script on a separate file and define/link it to the html file.

If you add it within the html file then its called Internal Stylesheet. Internal scripting is placed between your tags as follow:

... < style type="text/css" >
CSS Content Goes Here
< /style > ...If you want to add your CSS externally [External Stylesheet] (Always Recommended) then you'll create a separate file with extension (.css) and add your script in it. Then within tags on the html file you can declare and link to the CSS file you want to style with, as follow:

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

Why this way is recommended though? Let's assume you want to change the color of all headers on a website that contain 10 html pages, all these pages link to one external CSS file that responsible for styling these pages. Because you used an external stylesheet you do not have to go into each html page, instead you'll change one line in a single file (.css file) in single trip. Imagine the pain if you need to go in and change all 10 pages one by one to change a small thing like this.

Inline Style. These is a way of a styling a portion of your page that you do not want the main CSS to handle. Inline style overrides styling done by the main stylesheet on your website. Here's an example

< p style="color: #ff0f0f;" > text < /p >

Syntax

The syntax for Cascading Style Sheet in straight forward consisting of 3 blocks:

Selector { Property: Value; }

Selector is the (x)HTML tag/element you want to apply style to. Property is the styles property name or type that you want to add to this element. Value is the style value tweaked high or low depending on the property applied and the effect desired.

Any element can have multiple properties; each property can have multiple independent values. Multiple properties are separated by semi colon; multiple values are separated by comas, as follow:

h1 { font-family:Verdana, Geneva, sans-serif;
color:#F0000;
font-weight:bold; }

Multiple Element Selectors. You can combine many elements to apply same style to them as follow:

h1, h2,h3 { font-family:Verdana, Geneva, sans-serif;
color:#F0000;
font-weight:bold; }

Classes

Creating classes enable you to apply different styles to same elements. Given you set your text all over the page to be blue as follow:

p { color:#00F; }

But you want a portion of multi occurrence of a specific word, sentence or section to be bolded, in this case you need to create a class on the CSS and add the class to your text, first you add the CSS class as follow:

.boldsentence { font-weight:bold; }

Then you add your class to the desired part on the HMTL:

< p > This is some blue text sentence < span class="boldsentence" > sentence < /span > some blue text some blue text some blue text. < /p >

Now, one of the merits of CSS is inheritance, given the last example; you specified a class to bold a sentence on a paragraph which has a style applied already to color it blue. Because of inheritance your sentence will be bolded plus it it's still colored blue.

Nesting a class within a styled element will apply both styles to the nested class plus the main style applied to the containing element, and this is one of major advantages of CSS as a scripting language.

IDs

IDs have some similarity to classes on the way it's using, but ID only used in a single element and applied once. ID is declared on the CSS as follow

# blockcontainer { width: 80%;
margin: auto;
padding: 20px;
background: #ffffff; }

Then used in the html as follow:

< div id="blockcontainer" > ... < /div >

Notice that ID begins with a (#) on the declaration while Classes start with a period (.).

Divisions vs. Spans

You noticed that we used "div" and "span" tags on the previous examples, if your not familiar with these tags already you may take them as a way of formatting your HTML, these actually are not CSS related theses are normal (x)HTML tags.

Divs are used to set up blocks within your HTML page, Divs can contains all type of tags within to declare sections of blocks on your code to apply style to. Whereas spans are inline elements that is mostly used to specify styles to small section of text or even links

Ok now you learned all the very basics of CSS that can build your knowledge of getting deeper into the core and logic of CSS, by now you can actually use what you learn to apply basic styles to your webpage.

The next step is advanced formatting and sectioning, to the magic of tags manipulation. Stay tuned for my next lesson of CSS Essentials series.