PAB ( Programming a Baby ).
CSS.
My first CSS doc.
This article belongs to one of my collections of articles with same reference.
This article is for people that:
Asuuming that you did read my previous article ; ).
I did an effort to make it the simple as possible, so everyone can understand, practice and accomplish it.
So I wish you will find this article useful.
Build a simple Web Page with Html and:
<html>
<head>
your head code here...
</head>
<body>
your body code here...
</body>
</html>
Look the Sample 1 to see how i make, using:
<html>
<head>
<title>My Title</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mc" id="d1">
Div Text1 here...
</div>
<div class="mc" id="d2">
Div Text1 here...
<img id="i1" class="mc" alt="image" src="">
</div>
<table class="mc" id="t1">
<tr>
<td>Table TD Text1 here...</td>
<td>Table TD Text2 here...</td>
</tr>
</table>
</body>
</html>
.mc {
}
#d1 {
}
#d2 {
}
#i1 {
}
#t1 {
}
Now with your notepad create a text document and rename it to "design.css"
Inside of it lets build the Class and the IDs that we gave in the Html document
//This is a CSS Class
.mc {
border-width:1px;
border-color:blue;
font-size:14px;
color:green;
}
//These are CSS IDs
#d1 {
width:200px;
height:100px
}
#d2 {
width:300px;
height:100px
background-color:red;
}
#i1 {
width:150px;
height:100px
}
#t1 {
width:400px;
height:200px
}
Got it?
Since we gave the "mc" Class to all elements then:
My advise if for you to always use 2 separate files (HML file and CSS file),
but if you prefer to have all the code into a single file (HTML + CSS), then you will need to do this instead:
This means that instead of doing this:
<html>
<head>
<title>My Title</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
...The rest of the HTML file with the body code from here
You would do this:
<html>
<head>
<title>My Title</title>
<style href="design.css" type="text/css" >
/*...Put the CSS code here instead*/
</style>
</head>
...The rest of the HTML file with the body code from here
<head>
<title>My Title</title>
<style type="text/css">
.mc {
border-width:1px;
border-color:blue;
font-size:14px;
color:green;
}
#d1 {
width:200px;
height:100px
}
#d2 {
width:300px;
height:100px
background-color:red;
}
#i1 {
width:150px;
height:100px
}
#t1 {
width:400px;
height:200px
}
</style>
</head>
<body>
<div class="mc" id="d1">
Div Text1
</div>
<div class="mc" id="d2">
Div Text2 <br />
<img id="i1" class="mc" alt="image" src="">
</div>
<table class="mc" id="t1">
<tr>
<td>Table Text1</td>
<td>Table Text2</td>
</tr>
</table>
</body>
</html>
Of course this is only the beginning of what you can make with Css, so keep reading my next articles about Css and easy learn how to do.
I keep links in the bottom of the page and i update them each time i finish a new article.