So this week, as promised everyday around 4PM(UTC) We’ve posted a new cheatsheet for a particular subject. They’ve already helped so many people and I hope, as a website developer, they can help you too.

The cheatsheets themselves just contain the tags for code, no explanation apart from sone that do contain a small caption next to them. A very good skill to have during developing online is to look at code and be able to reaad what it does without breaking it down. For example…

<?php wp_login(); ?>

Means This is the Wordpress Login Text

Many langauges make sure you can do this by just looking at the tag themselves. Here whats we’ve covered this week on pureelite

1. HTML + XHTML Cheat Cheets
2. CSS Cheatsheet
3. MySQL Cheatsheet
4. AJAX Cheatsheets
5. PHP Cheatsheet
6. Ruby on Rails Cheatsheet
7. Wordpress Cheatsheet

So if you’ve enjoyed reading them, please comment and tell other people about them!

So yesterday we provided you with the best XHTML and HTML cheatsheets out there. Well now you’ve learnt and refreshed your memory about the code, your missing style. Style is  amust in this world, if you want to attract people, visitors and customers. Everyone is looking for something nice, friendly and compact to they’re needs.

CSS is the answer for inline styling. The “stylesheet” is where the css is kept and mostly inless its embeded its an external file thats mapped using one line of code.

Css-cheat-sheet-v2 – The CSS Cheatsheet

Every few weeks I feel compelled to buy and read the popular magazine “Web Designer” here in the UK. Each Week I feel myself saying “These people dont know what they’re talking about”. They obvisouly do to my dispair but I have to ask you all something. This weeks issue is on CSS and they have interview some CSS Masters! These People are:

Trenton Moss
Eric A Meyer
Stephanie Sullivan
James Mitchell
Chris Mills
John Kakoulides
Greg Rewis
Natalie Downe

I am a well respected website designer and developer and I have never heard of any of these people, thats saying something because i am nearly everywhere (worth being).  So upon reading the magazine I got to the CSS Masters tip pages. I dont know about you if your reading this and your a web designer but some of these things I learn in the first few weeks. I have made a quick list of their tips:

Pseudo Classes
Multiple Pseudo Classes
Making CSS SEO Friendly
Central Content
Cascade Frames
Javascript Selectors (Thats a real tip)
Multiple Backgrounds
CS4 CSS Live View (Standard Product Feature)
Text Shadow
Blockquotes
Advanced Blockquotes (Advanced meaning a  background)

To me in a professional opinion thats a completely pointless feature in the magazine, I had to just ask you….

What makes people a CSS Master?

Theres currently  a discussion going on that is about the process of making a website, every developer has their own method. Mine is very simple but the points below are an excellent way to make and plan a website. Many websites take alot more, thinking and people to make so the process can get switched or messed a round a lot. Please comment with your methods.

1. Do your research – What is the purpose of this site? Who is it for? etc. Become the website.
2. Write your content – Finding a decent copywriter will pay off here.
3. Work out the page structure for the website – Basically a sitemap. Knowing the content will help at this stage.
4. Code your content in semantic (X)HTML – Don’t think about the layout or styling at this point; just content!
5. Start brainstorming and sketching layout designs – Knowing the content will help immensely at this stage.
6. Modify your (X)HTML to contain any classes, ids and structural elements you may need when writing the CSS.
7. Code any behavioural JavaScript elements – It’s helpful to do this without any styling on the website at first.
8. Code any backend elements in your desired language – PHP, Ruby, etc.
9. Code your CSS and insert images – This is where you make the site look how you designed it.
10. Go back over anything that is still left – Tweaking and finishing any JavaScript that relied on styling. Finishing backend coding. Adding any structural elements you forgot about.
11. Profit!

Many people are still using tables for websites and many of my clients don’t know about the power of tableless designs. Tables are old news and they should only be used for what they are made for. If anyone is confused as to what they should be used for they are typically for, showing data from a search or research. It is usually a test of one item tat has multiple results.

Many people only use CSS inside tables to show and style data. For example when getting data from an SQL they echo it as a class. Although this is adequate for some developers, many developers these days prefer to use pure CSS and table less designs.

What is CSS?

Pureelite definition
CSS stands for Cascading Style Sheets a CSS file contains all the style information for a file. Separated inside the file to div’s, tags and classes. A div is typically a box and then classes are used to style the information inside the div. Div’s are read by having a hash symbol infront of the name your specify. Classes are specified by having a “dot” infront of the name you specify.

Wikipedia Definition
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).

Div Syntax

#nameofdiv { property: value; }

Class Syntax

.nameofclass { property: value; }

Tag Syntax

nameoftag { property: value; }

Each rule of CSS has a property and a value. The way you set these out is strict. It always has to follow the Syntax. Although many developers shows their CSS in files differently. Below are some examples of a Div called “div” with a value of 100 pixels height and width.

^{#div { height: 100px; width: 100px; }}

^{#div {
height: 100px;
width: 100px;
}}

^{#div {
height: 100px; width: 100px;
}}

The way you show out your CSS doesn’t matter and you need to devise a way that works for you. Below are some of the most common properties, Although the ones below are some of the most popular there are loads more. Click here for a list.

Height
Width
Float
Box
Border
Background
Background-color
Background-image
Color
Text-decoration
Z-index
Margin
Padding
Position
Font-Family
Font -*
Text-align

There are three different versions of CSS, CSS1, CSS2 and currently in development CSS3. CSS1 was the first official use of CSS in the development industry. This version of CSS only had basic use properties like, font, color and tables. CSS2 saw the introduction of more positioning properties, also it introduced the different media types of files. CSS2.1 saw the removal of many properties that browsers had managed to comply with, meaning that the property wasn’t needed anymore. “June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007”. CSS3 is currently in development and W3C are keeping a working draft sheet of the features that it posses. Click Here

All modern designs on the internet today are powered and set out by a “CSS Document”. CSS stands for Cascading Style Sheets and are universally used for designing. Many websites used tables to set out areas and then they used to add properties to the tables to have backgrounds and effects ect…

A few things to know about CSS:

• Styles create how HTML output looks
• The styles are stored in a “style sheet” (.css)
• External stylesheets are easier and faster to use

History

CSS was created to solve a problem as HTML tags were being added by the browser companies to make the pages more “stylish”. Introducing Styles in HTML 4.0 solved this problem.

Setting out a style sheet

Firstly open your preferred editor and create a blank css sheet. This is as easy as opening a notepad file and saving it as “FILENAME.css”.

This is the syntax for a CSS Element:

TAG { PROPERTY: VALUE;}

Example: #box { width: 100px;}

If you have multiple properties for one element you set it out like this:

TAG  {
PROPERTY: VALUE;
PROPERTY: VALUE;
PROPERTY: VALUE;
PROPERTY: VALUE;
}

Then after this on the next new line you can start listing your next element. Remember that every developer has their own style of writting CSS, as long as it is validated it is fine. Here are two links to examples.

Style 1 and Style 2

Properties

There are many properties but you can acheve the same effect using multiple different properties, every developer has their own choice as to what tags and properties they like to use, again as long as it validates it is deemed professional and correct. See a list of all the CSS2 properties Here

Using a style

As shown above in the syntax above the “TAG” could either be a “Class” or “Div”. Div’s are always started with “#” so for a div called “box” the tag would be “#box”. For a class also called “box” it could be “.box”. Although you can add styles to tags like “<ul>” you do not need “.” or “#”.

Please make sure you have the HTML file referred to your external stylesheet:

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

To use a div in an HTML file: <div id=”box”>CONTENT</div>
To use a class on text or any other tag add ( class=”box” )
In this instance we have a class and div defined in our stylesheet both called “box”

That is everything you should need to know about CSS to make a basic stylesheet. More tutorials on CSS will come soon