Programming.a.baby - (Css) My first Css Doc
By pol1ce
Css - Article 2
This article is for people that:
- already read my previous article ( Programming.a.baby - (Css) Doc Including in Html)
Or
- people that know how to make some styling within Html
But i prefer to believe you did read my previous article ; )
...
Create a Html doc
Build a simple Web Page with Html and:
- In the Doc's Head, Link to a Css doc called "design.css"
- Create some body Div elements, or Tables or whatever you want
- Give them a different ID for each one of them
- Give them the same Class, or if you wish, give it for some of them
Look the Sample 1 to see how i make, using:
- Two Div elements
- One Image
- One Table
Sample 1
<html> <head> <title>My Title</title> <link href="design.css" rel="stylesheet" type="text/css" /> </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>
Create the Css document
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
- First create the Css Class
- Then the Css Ids
- After, give them some properties like size, color, border...etc
I explain:
- In Css a Class starts with a "."
- An ID starts with a "#"
- After the Class or ID name you must open the tag with "{", write the properties and close it with "}"
Samples
- Check the Sample 2.1 were we only build the Class and IDs
- Then see the Sample 2.2 were we also give them some properties
Sample 2.1
.mc {
}
#d1 {
}
#d2 {
}
#i1 {
}
#t1 {
}Sample 2.2
.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
}Results
Got it?
Since we gave the "mc" Class to all elements then
- the text of all these elements will be "green" and "14px"
- the border of all hem will be "1px" and "blue"
We also gave different IDs to each elements, so:
- Each element will have different sizes
- one of them will have the background color "red"
Of course this is only the begin of what you can make with Css, so keep reading my next articles about Css and easy learn how to do
Next article we will talk about giving positions and proximity to your Html Body elements using Css
I keep links in the bottom of the page and i update them each time i finish a new article
More Articles
Next -->
Programming.a.baby (Css) - Object Position
<-- Previous
Programming.a.baby (Css) - Doc including in Html
Programming.a.baby - (Html5) Body Style
Programming.a.baby - (Html5) Body Elements
Programming.a.baby - (Html5) Meta Tags Robots
Programming.a.baby - (Html5) Meta Tags B
Programming.a.baby - (Html5) Meta Tags
Programming.a.baby - (Html5) Web Page Structure
Programming.a.baby - (Html5) Create a simple Web Page
.
Comments
No comments yet.
