CSS can be coded along with HTML Programs. However, it is commonly used as a separate file, and called upon by the HTML files.
In this tutorial you’ll learn the basic method of coding in CSS.
To start, let’s create a basic HTML document:
Save this as test1.html. Open it to check how it looks. Since it is just a basic HTML coding you’ll see it some what un-formatted raw document with “My Test Page 1” written in it along with the title “My Test Page”.<html>
<head>
<title>My Test Page</title>
</head>
<body>
MyTest Page 1
</body>
</html>
The above CSS code makes the body of this page to have a margin of 0, that means no spacing along the sites of your webpage. The padding is set to 0, that means no padding. Color of the text is set to #FF0000(red) while background color is set to #000(black). While the default font family is Arial with 100% size.<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #FF0000;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
</style>
Now the question is, where does the above CSS script must lie to take in action?
And the answer is inside <head> tag.
See the code example below.
From all of the available CSS codes, we applied margin, padding, color, background-color, font-family, font-size to the body tag.<html>
<head>
<title>Test Page</title>
<style media="all">
body {
margin: 0;
padding: 0;
color: #FF0000;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
</style>
</head>
<body>
Test Page 1
</body>
</html>
Here is the magic done after adding CSS code:
When you are codding in CSS you’ll have to determine it first that for which thing the above CSS will work?
All the CSS coding will be useless when you don’t have title for it.
For example, we began with body { and finally ended with another braces }.
This means that any code lies between body {…………} will be applied to tag named <body>.
Well it was for the specific tag like <body>,<p> etc. You can also title it with . (dot). .titleofcode{………….} will be used for class. It is brought to work by using class parameter in specific tag, especially division tag (<div>).
For example,
.header {
background-color: #000;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
The above code can be brought to use by adding class parameter in <div> tag.
<div class="header">Test Page 1</div>
The .header CSS code will be applied to the division or part of HTML content where class parameter, header, is defined.Hope you got general ideas. Next time I’ll be here with the full tutorial to create a beautiful CSS based website.
Do you need to increase your credit score?
ReplyDeleteDo you intend to upgrade your school grade?
Do you want to hack your cheating spouse Email, whatsapp, Facebook, instagram or any social network?
Do you need any information concerning any database.
Do you need to retrieve deleted files?
Do you need to clear your criminal records or DMV?
Do you want to remove any site or link from any blog?
you should contact this hacker, he is reliable and good at the hack jobs..
contact : cybergoldenhacker at gmail dot com