Css/Html Help
Hello people :) i want to learn how to code a design. i have a Css book but it dont help, anyone could have have a look and see what i did wrong here: Index.html file:
"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
<head>
<title>Bandome</title>
</head>
<style type='stilius.css' media='all'>
p#desine1 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
p#desine2 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
</style>
<body>
<body bgcolor="#363636">
<p id='desine1'>
belekas
</p>
</body>
</html>```
Css sheet:
```markup/* CSS Document */
p#desine1 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
p#desine2 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
I am seriously green at this, all i can do is graphics :)
Okay lets check this over…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
<head>
<title>Bandome</title>
</head>
<link href="stilius.css" rel="stylesheet" type="text/css" />
<body>
<body bgcolor="#363636">
<p id='desine1'>
belekas
</p>
</body>
</html>
p#desine1 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
p#desine2 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
This should work.
AldarHawk wrote: Okay lets check this over…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
<head>
<title>Bandome</title>
</head>
<link href="stilius.css" rel="stylesheet" type="text/css" />
<body>
<body bgcolor="#363636">
<p id='desine1'>
belekas
</p>
</body>
</html>
p#desine1 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
p#desine2 {
padding: 10px;
hight: 200px;
border: 1px thin solid gray;
margin: 10px
background: white;
}
This should work.
What is this :o You didn't link the style sheet in the header… or the body… you linked it in the HTML tag… does that work?
This is a time where i do have to agree with spy (no offence, but to be honest, I don't always see it from your point of view),
compliance is what people want and is what we should have. Just because some people don't want to stick to solid and fair outlines, doesn't mean that browsers should suffer, especially now with smaller devices with less spare resources to deal with the mess.
so anyway, back to the OP's problem, ive done a couple of things to produce a working, valid page.
index.html :
<!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" xml:lang="en" lang="en">
<head>
<title>Bandome</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='container'>
<p class='desine1'>
belekas
</p>
<p class='desine1'>because I'm using classes, i can repeat the same p and have the same styling</p>
<p class='desine1'>classes are fun</p>
</div>
</body>
</html>
you will notice some changes, most of them are mentioned in the CSS code:
/* CSS document */
html, body {
background:#363636; /*set background colour here rather than as bgcolor */
margin:0; /*getting rid of any dodgy browser specific styling */
padding:0; /*same as above */
}
#container { /*container div to center and set width of elements inside */
width:500px; /*set width of container*/
margin:0px auto; /*centering the div (thats the auto bit) */
}
p.desine1 { /*used a class instead of an id so multiple instances can be styled */
padding:10px; /* your styles */
margin:10px; /* your styles */
height:200px; /* your styles (you spelt height wrong (missed the 'e')*/
background:white; /* you missed the semi colon off of the property before background */
border:1px solid grey; /* your styles */
}```
i hope this clears a few things up (the valid way)
*OK, didnt realise that indentation didnt work...sorry for the legibility*