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
Difference Between HTML and CSS
In this post, we will understand the difference between HTML and CSS
HTML
HTML refers to Hyper Text Markup Language. It helps create web pages and applications −
It helps define structure of web page.
It is a markup language.
It helps create static pages as well.
It helps display data.
HyperText helps define link between multiple web pages.
Markup Language helps define text document using tags, which gives a structure to the web page.
It has less backup and support options.
HTML can’t be used inside a CSS sheet.
It helps annotate the text so that a system can understand it and use it.
There are specific number of tags in HTML.
These tags are predefined.
Data is enclosed within tags.
Closing tags are not a necessity.
Example
An example of HTML −
<!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <h1>Heading</h1> <p>Sample Text</p> </body> </html>
CSS
The CSS is Cascading Stylesheet that helps style the web pages. It uses different styling features to achieve the same −
It uses ‘selectors’ and ‘declaration blocks’.
It can be an external file or an internal file, depending on the requirement in hand.
CSS can be used inside a HTML document.
It can be used to display data.
It has a higher backup and support in comparison to HTML.
An example of CSS −
<style>
p {
color: pink;
text-align: left;
}
</style>
HTML and CSS
The above examples when combined together implements both HTML and CSS on a single web page. The CSS goes inside the <style </style>. You can also use an external stylesheet −
Example
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<style>
p {
color: pink;
text-align: left;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Sample Text</p>
</body>
</html>
545 Views
