HTML HTML stands for Hyper Text Markup Language and it is the language that is used to define the structure of a web page. HTML is used along with CSS and Javascript to design web pages. HTML is the basic building block of a website. It has different attributes and elements with different properties. Each element has an opening and a closing tag. We can also add images with the help of HTML.
Example 1: In this example, we will see the basic structure of an HTML document.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks</title>
</head>
<html>
<body>
<h1>Welcome to GeeksForGeeks</h1>
</body>
</html>
</html>
|
Output:
CSS: CSS stands for Cascading Style Sheets and it is used to style web documents. It is used to provide the background color and is also used for styling. It can also be used to style the font and change its size. We can also style many different web pages with the same specifications with the help of CSS. CSS is also recommended by World Wide Web Consortium (W3C). It can also be used along with HTML and Javascript to design web pages.
Example 1: In this example, we will see the basic structure of an HTML document by using CSS also.
<html>
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<h1>Welcome to GeeksForGeeks!</h1>
<p>This page has red background color</p>
</body>
</html>
|
Output:
Features of HTML:
- Structure: HTML provides the basic structure of a webpage, defining the layout and hierarchy of content using elements such as headings, paragraphs, and lists.
- Content: HTML is used to add various types of content to a webpage, including text, images, videos, and audio.
- Links: HTML is used to create links between different pages and websites, allowing users to navigate the web.
- Forms: HTML is used to create forms that allow users to input data, such as contact information or search queries.
Features of CSS:
- Style: CSS is used to define the visual style of a webpage, including fonts, colors, backgrounds, and layout.
- Layout: CSS allows for complex layouts, with the ability to position elements on a page and adjust their size and spacing.
- Responsiveness: CSS allows for responsive design, where the layout and style of a webpage can adapt to different screen sizes and device types.
- Animations: CSS can be used to create animations and transitions on a webpage, making it more interactive and engaging.
Similarities between HTML and CSS:
- Syntax: Both HTML and CSS use a similar syntax, with the use of tags and selectors to define elements on a webpage.
- Separation of Concerns: Both HTML and CSS follow the principle of separation of concerns, where HTML defines the structure and content of a webpage, while CSS defines the style and layout.
- Cascading: The “C” in CSS stands for “Cascading”, which means that styles can be inherited and overridden based on the order of the style rules and the specificity of the selectors.
- Integration: HTML and CSS are often used together, with CSS being used to style the elements defined in HTML.
Difference between HTML and CSS:
| HTML | CSS |
|---|---|
| HTML is a markup language used to define a structure of a web page. | CSS is a style sheet language used to style the web pages by using different styling features. |
| It consists of tags inside which text is enclosed. | It consists of selectors and declaration blocks. |
| HTML doesn’t have further types. | CSS can be internal or external depending upon the requirement. |
| We cannot use HTML inside a CSS sheet. | We can use CSS inside an HTML document. |
| HTML is not used for presentation and visualization. | CSS is used for presentation and visualization. |
| HTML has comparatively less backup and support. | CSS has comparatively higher backup and support. |
| HTML doesn’t allow animations and transitions. | CSS allows animation and transitions which helps to improve the UI. |
| HTML files are saved with .htm or .html extension. | CSS files are saved with .css extension. |
Conclusion:
HTML and CSS are both essential tools for building websites, but they serve different purposes. HTML provides the structure and content of a webpage, while CSS provides its presentation and layout. While they are often used together, it’s important to understand the differences between these two languages to create effective and visually appealing websites. With a strong understanding of HTML and CSS, web designers can create websites that are both functional and visually engaging.