In this article we will talk about CSS and learn how to style our website. We have discussed HTML and learned how to build web pages from very beginning. That is not enough for web pages, we must to style our web pages to make the better appearance of our websites. A website will have good number of users if it has nice and attractive appearance.
CSS Cascading Style Sheet is a language that used to style our html elements or documents. It describes that how an html document should be displayed in browser. We can describe text colour, size, weight, font family and many other properties that will change the appearance of that element or document in browser. Same like html files it also have .css extension to declare that what type of file it is.
Implementation of style code is very simple but it has multiple ways of implementation in website.
There are three ways to implement style
In this method we have to include style file in our html document. As we have discussed in earlier post that important information of our web pages would be in "<head></head>" tag, so our style file would be in head tag. To add a style file "<link>" tag is used with "href" attribute having the correct style file path.
<!DOCTYPE html> <html lang="en"> <head> <title>My First HTML file</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> </body> </html>
As you can see that we have use link tag to include style file in our document. Now our style file is linked and all the style properties defined in this file will be implemented in current document according to the selector. We can also use this single style file for other pages as well.
In this method we can add styles in "head" tag by adding "<style></style>" tag in it. By this method our styling will be applicable only for current document but we can include external style file to multiple documents or web pages.
<!DOCTYPE html> <html lang="en"> <head> <title>My First HTML file</title> <style> /* style code here */ </style> </head> <body> </body> </html>
This is much simpler but less beneficial way to style our document. Using this way we have to write css for each page separately which is very time taking and not a good practise.
This is not a professional way to write style code for our document. In this method we have to write style for each element which makes our code dirty and complex. In this way a "style" attribute is included in opening tag of an element and all the style code for this element will be written inside the attribute.
<!DOCTYPE html> <html lang="en"> <head> <title>My First HTML file</title> </head> <body> <h1 style="color: brown;">Hello world!</h1> </body> </html>
In above example we have write css for "<h1>" element which changes it's default colour to "brown".