Intro to CSS

Programmers

CSS stands for Cascading Style Sheets, but that probably doesn’t mean much to most of you, so allow me to explain what exactly this “language” does.

Every website is made of up 2D building blocks called DIVs. Each DIV is subsequently named and given characteristics such as background colors, text colors, text size, position on the page, etc. DIVs really are just like 2D legos, except they start out white and shapeless at the beginning and you get to define every aspect of them.

Every language has grammar so take a look at what CSS code looks like:

.divName{
 background-color:#FFFFFF;
 height:350px;
 width:20px;
 border-width:1px;
 display:none;
 padding:15px;
 }
 #divID{
 color:#000000;
 margin-right:3px;
 margin-top:10px;
 background:url(images/map.png);
 }

So lets translate that code into english.
There are two different types of DIVs in CSS. The first one is designated with the “.”, as seen before divName above. This one is a DIV Class. The second one is designated with a “#”, as seen before divID above. This one is…you guessed it, a DIV id. The different is really the obvious difference: You can have more than one div class on a page, but can only have one div id.

Sample Page:

<div class="DivClass"> This is the first div
 </div >
 <div class="DivClass">This is the second div with the same styles as the first div
 </div >
 <div id="divID" > This is the div ID
 </div >

When you’re using CSS on websites you are creating, you’ll need a stylesheet page (stylesheet.css) and a main page (index.html). The stylesheet page gets the first code section, the CSS code, and the main page (index.html) simply refers back to the building blocks on the css stylesheet page.

To include a stylesheet, add the following code:

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

to the main page (index.html) where “css.css” is the stylesheet you’re including. This can be named anything, as long as it ends with “.css”.

When you’re using CSS to customize a WordPress blog, you only get the CSS code page. So you’ll need to figure out which Div you’re editing (for example, the Div all of these words are included in is called “contenttext”) and then edit that Div. To change the background color of this page to grey, I would simply find “.contenttext” (not “#contenttext” because it is labeled a class in the coding) on the stylesheet and add “background-color:#999999”. (All colors in the web are designated by numbers)

I hope this post has helped introduce you to the basics of CSS and how easy it can be to use!

Comments