What is CSS?
In the previous article on HTML, we saw that what is HTML, how we can use it. What are the most common HTML used and how to use them. We saw different heading tags, and paragraphs tags and forms, etc. But HTML is not the only thing used for designing a website. There are many other things, and among those, we have CSS, or a Cascading Style Sheet. Simply put, CSS is a way to add colors, backgrounds, to your boring looking layouts, as we are going to see in a minute.
1. What is CSS?
Cascading Style Sheet or CSS is a way to add style to the HTML elements, such as to the heading element, or to the paragraph element. HTML provides many tags to display bare elements, whereas CSS allows you to style them, change their color, font size, alignment and so on.
2. Types of CSS?
There are three types of CSS.
- Inline CSS
- Internal CSS
- External CSS
A – Inline CSS
Inline CSS is used inside of the HTML tags, using a special style tag. For example,
<h1 style="color:red;font-size:50px;">Heading number 1</h1>
We have used inline CSS to specify the font color and font size, using color and font-size properties of CSS, and as we can see, all of this is done, inside of the HTML <h1> tags.
B – Internal CSS
Internal CSS is used when you want to change the style of a single webpage. For that, we use the style tag in the head section of the HTML document, as follows :
<!doctype HTML>
<html>
<head>
<title>CSS</title>
<style>
h1{
color:red;
font-size:50px;
}
</style>
</head>
<body>
<h1>Heading number 1</h1>
</body>
</html>
As we can see from the above code and image, that there is no difference in the output of the heading tag. It has the same color and same font size, as when we used inline style. The difference is in the way, the style is added to the HTML tag. Before, we did it in the <h1> tag itself, but now for better readability, we did it in the head section of the HTML. All we need is to write <style> tag, add our h1 tag and write the same properties as we did earlier. Don’t forget to close h1 curly brackets and </style> closing tag, and you are good to go.
C – External CSS
External CSS files are used to style our HTML elements, but in their own separate files. We need to link HTML and CSS files together, in order for both of them to work. But once they are linked, you can make changes in your CSS file and it will display change on your HTML file output. There is a special tag <link> which links both files together.
HTML FILE
<!doctype HTML>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style-sheet.css">
</head>
<body>
<h1>Heading number 1</h1>
</body>
</html>
CSS FILE
h1{
color:red;
font-size:50px;
}
It is very easy to understand from the above code that, we used <link> tag to tell the HTML file, the name of the file, its relation (which is style sheet), and in turns it displays the <h1> tag using the properties defined in the css file. One thing to note is that, while html files extension is .html, css files extension is .css.
3. Selectors in CSS
In our example above, we used <h1> tag in our style file to change heading color. Because our webpage only contained one HTML and CSS file, it was very easy for us to use the <h1> tag in our styles file. But imagine, if we have around 5 – 10 pages, and each page have its own <h1> tag, how we are then going to select the <h1> tag from the index file. To solve this question, we need to use selectors.
There are three types of selectors :
- ID
- Class
- Pseudo-class selector
ID
ID selector is used, when you want to change styles for a single element, as it can only select one item at a time. ID makes use of ( # ) hash symbol in the CSS file.
Class
If you want to apply styles to multiple items on your website, you can use class selector for that. Dot (.) is used to tell the browser to apply CSS effects to elements with class selector used.
Psedo-Selectors
Unlike ID and Class selector, Pseudo Selectors are a special kind of selectors, which is used to define the internal state of an element.
For example.
– Change the background color of the text, when the mouse hovers over it.
– Style visited links differently than the none visited links
and so on.
4. Common questions
A. How to change color of the heading tag using CSS?
Before writing code to change color of the heading tag or any other CSS related thing, you need to know where are you going to write your CSS code. As mentioned above, you can write it within the tag, i.e. inline CSS, or in the same html document, i.e. Internal CSS, or you can also write in a separate file, i.e. External CSS.
If you have more than one HTML webpages, it better to write in a separate CSS file. But if you have only one page, you can write your CSS code internally.
For the purpose of this article, we are going to use internal CSS.
<!doctype HTML>
<html>
<head>
<title>CSS</title>
<style>
h1{
color:red;
font-size:50px;
}
</style>
</head>
<body>
<h1>Heading number 1</h1>
</body>
</html>Here we are using CSS properties within the same HTML file, thus the Internal CSS. To change the color of the font, you need to specify the element, for which you want to change the color, and then write color : and your favorite color after that.
B. How to change the background using CSS?
In order to change the background of your HTML page, you need to use CSS background property. Background property allows you to change the color of the background, or you can also use images for your background.
To change the background color of the body, you need to do the following:
body {
background-color: lightblue;
}To use an image for the background, you should do the following :
body {
background-image: url("bg-main.jpg");
}Here, we have used an image in place of the color, and it will render out images in your body ( visible section ) of the webpage.
C. What are the benefits of using CSS ?
CSS handles the way a webpages appears for the users. With CSS, you control the color and size of the texts, positioning of the elements, spacing and so on. Below are some of the benefits of CSS.
- Saves Time : You can write external CSS, and link it to all of your web pages. Then, if you need to change something, you can just edit that external CSS file, save it and it will automatically update across your website.
- Consistency : One of the most important benefit of using CSS is that it provides consistency across all of your webpages. For larger and even small projects, it is recommended to use an external CSS file. If you have an external CSS file, the layout and other designs are all updated from a single CSS source file, that’s why the layout remains same for all your website.
- Digital Marketing : These days a well structured website gets lots of traffic and if you have only text on your website, your potential buyer may close the website, if it seems boring to the buyer. If on the other hand, you have product images, reviews, video testimonials on your website, the buyer will feel safe browsing and searching for the required item. You can have your customer support officer talk to them, if they get stuck somewhere. All of this is possible, by the use of CSS.
D. How do I align a heading tag to the center?
To center the heading ( <h1> ) tag element on the website, you need to
add text-align:center; in your css.
h1 {
text-align: center;
}5. Conclusion
This is a very simple guide to CSS. It was written purely for absolute beginners in mind. It discusses the functionality, appearance and usage of CSS in website designing projects.
2 thoughts on “What is CSS?”