CSS means cascade style sheet. This tool is used for designing a straightforward HTML file. There are various ways to use it. We can directly put the CSS into the HTML. Also we can use link tag in the header of HTML file to link a css file. If we want we can also add this style into style tag into the header.
Extension of is this file is .css. By now we already show a basic html file structure in this post.
We can design using CSS, but we need to have selectors for this. We can use html tags as a selector. Also we can provide custom selector name. We usually do this on the basis of necessity. Now, how we can create a custom selector name in html! There are two ways we may have to create such names.
- Class name
- ID name
Here we will start with some simple examples for a better understanding.
Let’s start with designing using html tags. Here the selectors are simple common tags like p, h1, h2, img etc. After selecting the selector we have to put the second bracket with that. These second bracket will provide the space for making the declarations.
P {
color: black;
}
On above example the p tag is the selector and the second brackets are the declaration area for all the p tag. As I have declared for p tag so it will be applicable for all the p tags. The rest of the html tags will be used in the same manner.
Let’s discuss about the custom selector. The custom selectors are the class name or id name. so how to declare a class name or id name.
<div class=”classtest”> </div>
Or
<div id=”idtest” ></div>
If we want to call the class into css for declaring the styles then we have to put a dot (.) in front the class name, so that will look like below.
.classtest{
Put the necessary CSS codes in here.
}
Also it goes same to the id name. but we have to put a hash tag (#) in front of the id name.
#idtest {
Put the necessary CSS codes in here.
}
If we want to put the style into the style tag in header section then we just need to put the simple style tag there. The structure will look like below.
<html>
<head>
<style>
Put the necessary CSS codes in here.
</style>
</head>
<body>
</body>
</html>
Not only that we can put the style with in html. We call this inline style. But the problem here is it is hard to maintain in every aspects. So in modern tradition we follow the above three methods. But if you are interested to know how to do the inline CSS then the below example can be followed.
<html>
<head>
</head>
<body>
<div style= Put the necessary CSS codes in here.” ”></div>
</body>
</html>
So these are the methods we can do for providing style to a website. CSS have varities of properties for making a required design work.
On our next CSS related articles we will discuss about those.
