Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between HTML and CSS
In this post, we will understand the difference between HTML and CSS. HTML provides the structure and content of web pages, while CSS handles the visual styling and presentation.
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>
A web page with a title "My title", a heading "Heading", and a paragraph with "Sample Text" appears with default browser styling.
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.
Example
An example of CSS syntax −
p {
color: pink;
text-align: left;
}
HTML and CSS Combined
The above examples when combined together implements both HTML and CSS on a single web page. The CSS goes inside the <style></style> tags. You can also use an external stylesheet −
Example
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<style>
p {
color: pink;
text-align: left;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Sample Text</p>
</body>
</html>
A web page with a blue centered heading "Heading" and pink left-aligned paragraph text "Sample Text" appears, demonstrating the styling effects of CSS.
Key Differences
| HTML | CSS |
|---|---|
| Defines structure and content | Defines styling and presentation |
| Uses markup tags | Uses selectors and properties |
| Cannot be used in CSS files | Can be embedded in HTML or external |
| Static content creation | Visual enhancement |
Conclusion
HTML provides the foundation and structure of web pages, while CSS enhances the visual appearance. Together, they create well-structured and visually appealing websites.
976 Views
