Where do I enter the CSS [Archive] - Dynamic Drive Forums

View Full Version : Where do I enter the CSS

bigzan

07-06-2008, 04:04 PM

I am completely new to this and would like to know what part of the page I enter the CSS and where I enter the HTML

allahverdi

07-06-2008, 04:14 PM

Welcome to css bigzan.

I don't know good css tutorials, but try this: http://www.w3schools.com/css/

For your question. This is our page:

<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
</html>

You can enter css: between <head></head> tags and <body></body>

Also you can import a css file. To import it you need to write it between <head></head> tags:

<link rel="stylesheet" href="yourfile.css" />

Change yourfile.css to your css file.

If you have any other quesions post here. I'm glad to answer them :D

jscheuer1

07-06-2008, 04:25 PM

Technically speaking style belongs in a style section in the head, or in an external stylesheet linked to the head, or in an inline style attribute of an HTML tag. Browsers will usually error correct if stylesheets appear in or linked into the body. But as I say it is technically not allowed, so some browsers may ignore them there.

JasonDFR

07-06-2008, 04:51 PM

I would recommend that you DO NOT place any CSS in your (X)HTML files. Instead "link" a separate css file to your (X)HTML files.

Look at the following XHTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title></title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="en" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/ico" />

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

</head>

<body>

.......

This line: <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> is saying that all of the CSS for this page resides in a file called "screen.css". In this case the "screen.css" file would be placed in the same directory on your web server as the file that holds the above code.

in your .css file you do not need any html tags, DOCTYPE info, or anything else, other than the CSS. CSS comments look like: /* COMMENT */

The following CSS might be inside of the "screen.css" file:

/*
LINKS
-------------------------------------------------*/

a:link, a:active, a:visited {
color: #0000ff;
}

a:hover, a:focus {
color: #000;
text-decoration: underline;
}

.external {
background: url(/images/ex_link.gif) no-repeat right top;
padding-right: 10px;
}

.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}

.clearfix {display: inline-block}
.clearfix {display: block}

.strong {
font-weight: bold;
}

/*
STANDARD FONT FAMILY
-------------------------------------------------*/

body { font-family: Verdana, Arial, sans-serif;}

/*
BODY
-------------------------------------------------*/

body {
background: #fff url(/images/bg.gif) top center repeat-y;
color: #151515;
font-size: small;
min-width: 965px;
}

/*
WRAPPER
-------------------------------------------------*/

#wrapper {
background: #fff;
color: #151515;
width: 965px;
margin: 0 auto;
}

And that's it!

Good luck!

jscheuer1

07-06-2008, 08:05 PM

I realize that due to the current vogue in XHTML, it's sometimes unavoidable. However, it is almost always a bad choice, and if it can possibly be avoided, it should be. The most stable current standard is HTML 4.01 strict.