Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do HTML and CSS work together?
Overview
HTML (Hyper Text Markup Language) is markup language which helps in creating the skeleton of the website and CSS (Cascading Style Sheet) is a styling language which makes the skeleton of the website more attractive by arranging in a proper order by putting the different style to the page. As in a human being the bony skeleton plays the role of the HTML and the properties of the human being such as color, height, size and many other properties plays the role of CSS.
So when a user requests a page from the server, the server sends the response in the form of static files which contain HTML and CSS files. On the user browser firstly the component of the page is loaded with HTML and CSS as styling of the page, this all process happens in nano-seconds (ns) so the user who is sitting on the browser is unable to see the changes that reflect to the page.
Importance of HTML
We can say that both HTML and CSS are dependent on each other, as we cannot use the CSS without HTML and HTML also cannot be used without CSS. As if there will be no HTML elements or tags on the web page so how we will implement the CSS styling.
Importance of CSS
CSS (Cascading Style Sheet), as you can see that there are millions of web pages found on the internet. All the web pages are designed so neat and clean with great animation to increase the user experience, so all these things can be achieved with the help of CSS.
Adding CSS to HTML
There are three ways to add the CSS style sheet to the HTML page:
Internal style sheet
Inline styling
External styling
Internal Style Sheet
Internal Style Sheet: This type of styling can be done on the same HTML page inside the head tag. It consists of opening and closing tags inside which the styling of the page is done. We will understand the internal styling with an example.
Example
<html>
<head>
<title>Internal styling</title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p>tutorialspoint.com</p>
</body>
</html
Inline styling
This type of styling is done within the HTML element or tags itself. It is helpful when we have to change the styling of specific tags. This styling is done inside the style attribute which takes the CSS property as “Key-Value” pair. So when a component is rendered the styling is also rendered with it. To learn more about this an example is given below.
Example
<html> <head> <title>Internal styling</title> </head> <body> <p style="color: green;">tutorialspoint.com</p> </body> </html>
External Styling
The external styling is the best type of styling majorly for the big projects, as the styling of the elements is done in the other file rather than the same HTML file. To use this styling for the pages, a tag is used in the HTML page with the two attributes “rel“ and “href”. The “href” attribute contains the location of the CSS file. So when a page is loaded the CSS which is linked from the link tag also gets loaded to the page.
Example
index.html <html> <head> <title>Internal styling</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>tutorialspoint.com</p> </body> </html>
style.css
p{
color: green;
}
In the above examples, we have seen three different types of implementation of CSS, so when these code will be run on an IDE there will be no change in the output of the code. All the above three codes will give the same output.
Conclusion
The best way to add the CSS to the HTML is by using external style sheets. As it will be easy from the developer point of view to make changes to the styling of the component of the web page. We can put the link tag in the head or after the body tag. The advantage of putting the styling to the head is that as HTML loads from top to bottom. So in that case the CSS for the page will be loaded and will be implemented to the browser as soon as the HTML loads. The side effect of putting the styling after the body tag is that the HTML skeleton will load first without the CSS which will decrease the user experience of the page. We can conclude that both HTML and CSS are necessary parts of the frontend application.
174 Views
