Using CSS as a beginner

Forum Home

FAQ

Memberlist

Profile

Register - Not registered yet? Got something to say? Join HTML Code Tutorial!

Using CSS as a beginner

HTML Help Forum Index -> Miscellaneous

View previous topic :: View next topic

Author

Message

sticks464

Joined: 31 Dec 2006
Posts: 2308

Posted: Sun Sep 20, 2009 8:31 am Using CSS as a beginner

CSS coding can sometimes become a nightmare, particularly if you are just starting to use it. One of the biggest problems beginning and even intermediate user have is getting Internet Explorer to display content like other modern browsers. This is the technique I use, it is not a set rule and each developer will have their own methods.

For starters you will need as a minimum of five (5) browsers installed on your computer to preview your pages. If your doing one website and never intend on using them again, they can always be removed with the exception of IE.
1). Internet Explorer
2). Firefox
3). Google Chrome
4). Opera
5). Safari (PC)

Once you layout your design either on paper or a graphics editor it's time to start your first page. An xhtml transitional doctype is the most forgiving for coding.

Code:

You will need three, yes that's right three stylesheets. So create three blank pages and name them respectively,
1). main.css
2). reset.css
3). iecss.css

A good set of reset rules can be found here.
Either copy and paste the rules onto the reset.css page or use the link on that page to save a copy to your computer.

This file is needed to reset browser defaults so each browser starts equally in rendering code.

Assuming you have created a folder to hold the assets you will use on your site (ie. scripts, for javascript files; css, for css files; images, for images), save the three files in the css folder. You can now set up the main.css file and the xhtml page with links to your css files.
Instead of having a separate link in the head section for the reset.css file, let's import it into the main.css page by adding an import rule as the first entry.

Code:

@import url("reset.css");

Now, on the xhtml page (which you should have saved as index.html) make a link to the main.css page so as older browsers do not recognize the link.

Code:

Now let's link to the iecss.css page which will contain rules specific to IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>

Let's write the first rule to get IE and the modern browsers together in their thinking. This will be for font-size since IE does not display fonts like the modern browsers. We will use em's and percentages for modern browsers however we have to use pixels for IE.
On the main.css page enter this rule immediately following the import rule.

Code:

@import url("css/main.css");
body {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.5;
}

To get IE to comply with this font size we have to convert em's to pixels. IE's default font size is 12 pixels and 1 em equals 12 pixels, so 1.2em would be 14 pixels. So on the iecss.css page the rule would be

Code:

body {
font-size:14px;
}

and this would be the only rule on this page at this time.

Depending on the complexity of the pages there may be more rules added to keep IE inline. For a simple page we can eliminate one stylesheet if one rule is all that's needed for IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>

Now all browsers will render the desired font correctly and look the same.
Once you start adding content to the index page if you want to know why the reset rules are necessary, go to the main.css page and turn off the reset page by deleting the link and viewing your page in different browsers (make sure you turn it back on using ctrl+z).

All font sizing is now inherited from the body font rule since it is the parent and all other elements inside the body are children (children inherit from parent).
To set font sizes for children so each browser renders them the same, we will use percentages (IE understands px and %, not em).
Examples:
h1...35px = 2.5em or 250%
h2...28px = 2em or 200%

How to get em's and percentages;
Default font size = 12px
Desired font size = 14px
Divide 14px by 12px = 1.16666 or 1.2 when rounded
Convert decimal to percent = 120%

To get margin and padding sizes based on the font size;
Set font size...14px
Padding desired...5px
Divide 5px by 15px = 0.357 or 0.36em
Convert decimal to percentage = .36%

(This is where a calculator comes in handy) And you thought math wasn't important in web design.

Display posts from previous:

	HTML Help Forum Index -> Miscellaneous	All times are GMT - 8 Hours
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Your Ad Here

DARFUR

Get a Stop the Genocide poster at SaveDarfur.org.
Also see Eyes on Darfur.

HOSTING / DESIGN

$1.99 Domain Registration
Cheap Web Hosting
Website Templates

MAKE MONEY

Sell Domain Names
Sell Website Templates

| | | | |