1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

Code (css)
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana, serif;

There’s no need though as you can use this CSS shorthand property:

Code (css)
font: 1em/1.5em bold italic small-caps verdana, serif;

Much better! Just a couple of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

2. Two classes together

Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:

Code (html)
<p class="text side">…</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

3. CSS border default value

When writing a border rule you’ll usually specify the color, width and style (in any order). For example, border: 3px solid #000; will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid; then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default color is that of the text color within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

4. !important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:

Code (css)
margin-top: 3.5em !important;
margin-top: 2em;

So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)

5. Image replacement technique

It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller and you’d like to be found for this phrase in the search engines. You’re pretty set on it being an obscure font so you need to use an image:

Code (html)
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

Code (html)
<h1><span>Buy widgets</span></h1>

Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:

Code (css)
h1 {
background: url(widget-image.gif) no-repeat;
}

h1 span {
position: absolute;
left:-2000px;
}

The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.

6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

Code (css)
#box {
width: 100px;
border: 5px;
padding: 20px;
}


This CSS rule would be applied to:

Code (html)
<div id="box">…</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

Code (css)
#box {
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
}

And the new HTML would be:

Code (html)
<div id="box"><div>…</div></div>

Perfect! Now the box width will always be 150px, regardless of the browser!

7. Center aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

Code (css)
#content {
width: 700px;
margin: 0 auto;
}

You would then enclose

Code (html)
<div id="content"></div>

around every item in the body of the HTML document and it’ll be given an automatic margin on both its left and right, ensuring that it’s always placed in the center of the screen. Simple… well not quite - we’ve still got the pre-IE 6 versions to worry about, as these browsers won’t center align the element with this CSS command. You’ll have to change the CSS rules:

Code (css)
body {
text-align: center;
}

#content {
text-align: left;
width: 700px;
margin: 0 auto;
}

This will then center align the main content, but it’ll also center align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box.

Hmmm… not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

9. CSS positioning within a container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It’s also possible (and often desirable) to position objects within a container. It’s simple to do too. Simply assign the following CSS rule to the container:

Code (css)
#container {
position: relative;
}

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

Code (html)
<div id="container"><div id="navigation">…</div></div>

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

Code (css)
#navigation {
position: absolute;
left: 30px;
top: 5px;
}

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it’s preferable to use positioning.

10. Background color running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

Code (css)
#navigation {
background: blue;
width: 150px;
}

Just one problem though: Because the navigation items don’t continue all the way to the bottom of the screen, neither does the background color. The blue background color is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same color and width as the left column. You would use this CSS command:

Code (css)
body {
background: url(blue-image.gif) 0 0 repeat-y;
}

This image that you place in the background should be exactly 150px wide and the same blue color as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background color won’t.

1.Check Your Website Content

• Is an image in your DIV Container one pixel bigger then your container’s dimension in your CSS file?


• Do you have a long text string that’s too wide for your container set width? (ie. a long URL?)

2.Check Your HTML Source

• Io Are you typing valid HTML code? Or are you making tiny mistakes that can impact your layout? eg.
  <div id=”wrapper”><p></div></p>
  


• Did you use id=”XXXX” instead of class=”XXXX” or vice versa?

3.Check Your Spelling

• Copy and paste element names from your CSS file to your HTML file. This avoids typing and spelling errors.


• Did you order your CSS correctly? Make sure wrapper2 is actually inside wrapper if you write the following code: #wrapper #wrapper2 {color:#ffffff; font-size:10px;}


• Did you make sure to include 6 characters in your hex color?

4.Check Your Syntax

• Are you forgetting brackets ({}) or semi-colons (;)?


• Did you mistakenly forget to add the pound sign (#) before an ID or the period (.) before a class?

5.Don’t Use Padding/Margins with Width

• This is a common problem, especially with beginners. Padding or Margins combined with Width on the same element yield different results on different browsers. Example, this CSS:
  #wrapper { width:100px; margin:5px; padding:5px; }
  will appear different in Internet Explorer then in Firefox. This is especially critical if you’re using an image-dominant layout.
  

6.Check The Little Things

• Did you make sure to give your Div Container position:relative; before positioning a Div Container with position:absolute; inside it?
  

7.Allow Breathing Room

• Internet Explorer 6.0 will add a 3 pixel breathing room to some div containers, either use a build your website knowing that this can very well happen and mess up your layout.
  

8.Use a Validator

• You can use the w3c CSS validator or the validator built into the Web Developer toolbar (a Firefox Plugin) to scan your CSS and can help solve your CSS problem.
  


• Opening your CSS file in Adobe Dreamweaver can sometimes give you an idea where something went wrong.

9.Be Aware Of Some Browser’s Existing Problems

• You may spend hours trying to find the solution when the problem lies in the Web Browser, and example includes the Peek-a-boo IE6 bug.
  

10.Do Some Research

• Odds are you aren’t the only person that’s ever had the CSS problem you’ve described, use Google and type in keywords for your search you think others would use
  

A few simple guidelines you can make your life a lot easier.

Organise your stylesheets

How you divide up your stylesheets is very much a matter of personal choice. You do however need to decide on how you organise your stylesheets. I use a slightly modified veresion of the template that comes with Andy Budd's excellent book CSS Mastery. This has author details at the top and clear delineation of sections throughout. If your site is large one stylesheet may become unmanageable so break it down into chunks and use @import to pull stylesheets into the master.

Use universal selectors

Knowing where you are starting from is very important. Often you will be perplexed as to why padding has been applied by a particluar browser. For that reason I like to remove padding, margins and borders from everything using a universal selector. I then reapply padding, margins and borders to specific elements and know exactly where I am starting from

Code defensively

The more you code CSS the more you will become aware of browser inconsistencies. Take the double float margin bug in Internet Explorer 6 and below for example. This is where a left float is placed within a container and a margin is applied to the move it away from the left edge. IE gets it wrong and applies a double margin. To combat this and the need to hack I like to apply margins to everything within the left float rather than the float itself. This results in consistent display across browsers.

Note: Both examples assume the div is floated left within a container.

Example one - applying the margin directly to the div. This will result in IE misinterpreting it and probable hacking.

Example two - float the div left and then move everything in it away from the edge by 10px using a universal selector. No hacking needed

Avoid hacks

Hacking CSS is lazy and unless completely necessary should be avoided. With the release of IE7 may old skool hacks will cause problems. If you encounter a problem debug your CSS rather than hacking straight away. Understanding the nature of the problem is key to improving your skills. Most of the time you will be able to fix it without hacking. If you must hack put hacks in a separate stylesheet and comment clearly.

Use conditional stylesheets

If you have done more than 10 minutes of CSS you will realise that Internet Explorer is the most buggy of all browsers. Thankfully you can use conditional comments to manage the CSS that is served to IE. If I need it I have a stylesheet called ie6_and_below.css that targets older versions of IE. It allows me to manage CSS for older browsers quickly and easily.

Test, test, test

If you want to create robust CSS based layouts there is no way to avoid testing. Begin by outlining the browsers you want to support. Then create a test environment. Most browsers allow you to install multiple versions. For IE there is a handy .exe available that will allow you to install multiple versions on one OS. You will also need to test on a Mac. In fact I would recommend you buy a Mac and use it as your primary machine.

Comment your CSS

Almost every book ever written on coding advises commenting. Comments explaining why and how you did something will make maintaining the CSS much easier.

Read blogs

Stuffing your newsreader full of feeds is a great way to learn and develop. The web is an industry that actively shares knowledge so take advantage of this. If you find an interesting article or CSS fix through Google add the RSS feed to your newsreader.

Read the specs

If you really want to understand CSS there is no way of getting round reading the CSS specification documents. The good news is they are all free. You will learn a great deal from doing this so it is well worth it.

• CSS 1


• CSS 2


• CSS 2.1

Drink lots of tea

OK I'm English and I like drinking tea but there will be times when you simply cannot fix a layout bug however hard you try. At this point it is a good idea to put the kettle on. Relax, go and do something else and come back to it with fresh eyes. You will often find that the solution will come very quickly after a break.

In this guide I’ll be going through how to start out learning CSS. Hopefully by the end of this tutorial you will be much more comfortable using CSS to code websites.

CSS or cascading style sheets are used to style html or xhtml documents. The idea behind CSS is to allow you to dramatically change how a webpage looks without editing any HTML. CSS is normally stored in an external css file, this means that you can change how hundreds of pages look by changing some code in a single CSS file. It is a good idea if you have some experience with html or xhtml before you do this tutorial.

The Syntax

First of all I’ll demonstrate what the CSS syntax should look like:

selector{
property:value;
}
An example of some working CSS syntax is:

html{
color:#333333;
}
This would make the font colour of everything in the <html> </html> tags #333333.
You can define multiple properties for one selector as long as you seperate them with a semicolon (;).
For example:
html{
color:#333333;
background-color:#cccccc;
}
This would give the page a light grey (#cccccc) background with dark grey text (#333333).

The Selectors

There are three main types of selectors, the first type are the selectors that correspond to html elements such as body, p, li etc. Here’s an example of the p selector at work:
p{
color:#333333;
}
That would change the text colour of everything inside the <p> </p> tags on your web page.

Next we have classes. A class will allow you to name sets of styles, this means you can have two paragraphs that are styled differently in a single page. A class selector looks like:
.text_sample{
color:#333333;
}
In the example I called my class text_sample. You must always put the full stop before the name of the class as this tells your browser what you’re defining. Classes can come in useful when you want to style a number of elements differently. For example I might have two paragraphs, one that has dark grey text and one that has light grey text. My CSS would look like:

(Please note, you have to close the p tags, for some reason wordpress wont display them)

The great thing about classes is that you can use the same class as many times as you want in an html document. That brings us on to the final selector an ID.

I use ID’s to define the main parts of a layout, for example if a page has a wrapper div I would make that an ID. The other important thing to remember about an ID is that it should only appear on an html page once. To define an id simply use:

#divname{
selector:value;
}
Then to use it in your html document you would use the code:

#divname{selector:class;}
And that’s it for selectors!

Style Sheets

There are two ways of including a css in your pages. The first way is internally, you would do this by using the code:

The reason I don’t recommend using internal styles is because the whole point behind style sheets is to keep the styling and the actual html of the page separate and using internal style sheets would be defeating the object.

The next method of including css into your html is to use external style sheets. This consists of creating a file, which is normally called something like style.css and then including it inbetween the tags in your html file. The code for including a css file is:

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

Obviously you would replace “style.css” for the path and name of your css stylesheet.

That’s just about everything you need to know when you’re first starting out with CSS! My advice to you now is to sit down and practice what you’ve learned here. I’ll be adding some more tutorials soon so keep checking back!

If you like this site you could always sign up for my rss feed and if you’re feeling generous you could buy me a pint using that button on the top right of every page :

What is the relation of CSS and HTML?

HTML = Content
CSS = Representation
So HTML + CSS = content + Representation = Decorated webpage

What are the advantages of using CSS ?

• You can easily change the content in HTML file without having to worry about spoiling your layout which lies in CSS file.


• You can easily redesign your layout in CSS file without worrying about spoiling your content in HTML file.


• and there are some more advantages waiting you ahead! But that is enough for our first lesson about CSS!

As you guys know, I am CSS designer, I deal with the CSS codes and web design. I found that CSS is a useful tool to beautify your website. However, for those who don’t know CSS, it can be a bit complicated but once you know them well. You can make friends with them but maybe you need to leave your old friend (IE6) first… All right, today I am going to share some of the CSS tricks with you. Let’s learn something different today.

1. FONT

Usually, we beautify font with several line of codes like this :

Do you find the code is a bit too messy or too long? Here is my solution for them:

Will this cut down your coding time? The output will be:

Loon Design

Tips

• The order of the attributes are font: weight size/line-height family;


• 400 = normal and 900 for bold

2. Margin and Padding

Wondering what how to differentiate them? You check this site for details. We use margin and padding most of the time when we write up the codes. However, I am not to say the padding problem with IE6 ( seriously, I am having a bad time with IE6 during my work, may post it out later ) here but try to give you some tricks on how to make it in 1 line.
Normally, we code like this, we take margin as example :

but now we can make it in 1 line like this :

TIPS

• margin: top right bottom left;


• or when you have the same margin for the top and bottom, it become like this : margin: 10px 0;


• while margin: 0 auto; means vertically align.

3. Class and ID

the symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID

• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.


• We consider that it has the higher level than class. It is more specific.


• can be used and an anchor name.

CLASS

• Classes mark elements as members of a group and can be used multiple times.

4. Ignore by IE - !important

This is a trick to write something that ignore by IE but can be run in all browsers. The attributes before the !important will be ignored by IE.

There will be 20px margin for all browsers except IE which will have the 10px margin. This is useful when you doing some positioning adjustments and most of the time it is showing different result in IE browser.

5. Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

BLOCK

• Always begin on a new line.


• Height, line-height and top and bottom margins can be manipulated.


• Width defaults to 100% of their containing element, unless a width is specified.


• Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements

• Always begin on the same line.


• Height, line-height and top and bottom margins can’t be changed.


• Width is as long as the text/image and can’t be manipulated.


• Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

Adding colors with CSS

Color is what gives life to anything. Television has never been this interesting when it was still black and white. Same thing with websites. Most websites that do not have colors and backgrounds look dull, which leads the visitors away.

This lesson will teach you how to apply colors and background colors to your website.

CSS Color property

Color property is what describes the foreground color of an element. To give you a clearer idea, I will provide you with an example. Say, you want to change the font color of your header to blue. Whnnat you do is you apply the color property. You already know that the tag for header is You then make a code to set the color of the foreground. This is the code to use:

You can enter color values in three different ways.

• You can choose to use hexadecimal values such as the one used in the above example;
• you can use common English color names;

• you can opt to choose “rgb-values”. RGB is short for Red, Green, Blue. It is the color language of computers.

CSS Background color

Background color property is what describes the background color of elements.

To change the background color of the entire page of your HTML document, the background color property must be placed within the element, as this element contains all that is in your HTML document. This can also be applied to several other elements such as texts and headers.


As you see, you can change the background color of any element on your site - be it just text or entire text blocks:

Attributes are instructions of how elements in the HTML should look. Attributes can be anything from font-size to background-color, but this section describes how to effectively apply certain attributes to different elements.

ID’s

ID tags in HTML (<div id=”header”>) are tags which should only be used once per web page. Generally, you want to use an ID to denote the page structure, so you might have id’s for a web page of “header”, “content”, “sidebar” and “footer”, because you’re not going to have two headers or two footers for any one webpage. To assign a style to an ID tag in CSS, use:

Class

Unlike ID tags, class tags can be used multiple times. This is great when you want different parts of the design to look the same.
To assign a style to a class tag in CSS use:

HTML elements

You can apply a style to a particular HTML tag with CSS without using an id or class. For example, if you wanted to change every list (ul) to change from a dot to a square, you could simply do:

Generally you don’t want to apply a style to an element like this. One exception though would be the body tag because it only appears once. In the next paragraph though, you will see where using the general HTML element is appropriate.

Combining All Three

If you’ve played around with CSS before, you’ve probably created HTML like this:

If you have a lot of li elements, you’ll know it can get very annoying to type out class=”x” every time. But there is a way to simplify this. Instead use the following CSS,

And your HTML can become this:

The CSS applies the attributes for define in “.y li” for the li elements embedded in class “y”. Thus you get a cascading effect where you can affect elements inside certain elements. You can use this cascading affect for any combination of ID’s, class and elements. For example, you might use:

CSS styles are defined within the tag.

If you define the styles embedded within your current document you will find code similar to the following in your head content:

To use an external file, you would usually name the file something.css (choose an appropriate name), and then use the LINK tag to tell the page to use it. Inside the head of a document put this:

When you load your HTML file in any web browser whether it be Firefox, Internet Explorer or Safari, the browser will render the web page with certain style attributes already assigned. You can of course override these attributes with CSS, but if you don’t specify differently, the browser will render the page with certain attributes already applied. Each web browser has subtle difference in how they render a web page under defaults, but in general a web page will look the same.

For example, the dots for a list item or the font family is a default style of the browser. You have the power to make that dot into a square or that font from Times New Roman to Verdana. But if you don’t specify, the browser will assume it. Another default attribute that always fools a beginner is the body tag which has a margin.

CSS is an excellent addition to plain HTML. With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it.

With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.

Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.

INTRODUCTION

CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.

There are 3 types of CSS Styles:

• Custom Css(Class) Style create a customized style with the set attributes. These class styles can be applied to any tag.
• HTML Tag styles:
• Advanced CSS Selector styles:redefine the formatting for:

A particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) and pseudo-class styles (for example, a:link, a:hover, a:visited)

A specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair id="myStyle")