Today’s topic is How to Use CSS in HTML. HTML in itself is very static and simple, it cannot be used to create dynamic webpages. User interaction is not possible via HTML itself. For this, we need JavaScript which integrates very well with HTML.
How to Use CSS in HTML
Similarly, writing attributes for each element make the entire code spaghetti. To avoid this we use CSS(Cascading Style Sheet), which helps in separating the style partly from the HTML part.
CSS with HTML
Let us consider the following code example where we apply various styles to an element.
<p style="font-size:25px;color:red;">A journey of a thousand miles begins with a single step</p>
In this example we have used inline CSS, the problem is that whenever I need to create a similar element, I would have to rewrite all the styling parts with that element. The solution to this is to use internal CSS. Since we are now dealing with CSS, we will need to work with classes. Have a look at this example.
<head><style>.theitstuff{font-size:25px;color:red;}</style></head><body><p class="theitstuff">This is an example of how css can be used</p></body>
In the example above, we have created a <style> tag and inside that style tag, we have created a class called .theitstuff. It is important to note, that all CSS class names are accessed by the. specifier. After that, in the body section, we just gave our element a class attribute with the class name that we created. Now all the style code written for that class will be given to the element. This is very useful when you have to make changes in multiple elements that are similar.
JavaScript with HTML
JavaScript is a whole new world, it makes the User Experience more dynamic. To just give you a glimpse of how JavaScript can be integrated into your webpage here is an example. The webpage above displays an alert. This can be achieved with the following code.
<head></head><body><script>alert("Hey, This is a javascript example");</script></body>
You can see that we have placed a <script> tag right below the body and all the JavaScript codes go inside it. We shall study JavaScript as well, later in a JavaScript tutorial.
External CSS & Javascript
We have seen how CSS and Javascript are integrated into HTML, but eventually, for keeping your codebase clean and bringing modularity, you might want to have separate files for your CSS and js code. You can name those files as filename.css and filename.js for CSS and JavaScript respectively. These files don’t need to have the tags and you can just start writing the respective code for each. These files can then be used on the main page by inserting the following tags in the head section.
CSS
<link rel="stylesheet" type="text/css" href="filename.css">
JavaScript
<script src="filename.js"></script>
Conclusion
CSS and JavaScript can be used to make webpages more dynamic and easy to maintain. They are both individual languages that need to be understood in depth. I have only tried to explain how CSS and JavaScript integrate into HTML webpages. If you have any problems understanding this part, let me know in the comments section and I’ll be there for you.
