Difference between HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for creating web pages. HTML provides the structure, while CSS defines the style and layout. HTML is used along with CSS and Javascript to design web pages.

HTML (HyperText Markup Language)

HTML is the standard markup language used to create web pages. It structures the content by using elements such as headings, paragraphs, lists, links, images, and more. HTML elements are the building blocks of web pages, allowing developers to embed multimedia, create forms, and design the overall layout.

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.

Example: In this example, we will see the basic structure of an HTML document.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>w3wiki</title>
</head>
<html>

<body>
    <h1>Welcome to w3wiki</h1>
</body>

</html>

</html>

Output:

CSS (Cascading Style Sheets)

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 controls the layout, colors, fonts, and overall look of a web page. CSS is also recommended by World Wide Web Consortium (W3C). It can also be used along with HTML and Javascript to design web pages.

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.

Example: In this example, we will see the basic structure of an HTML document by using CSS also.

HTML

<html>
<head>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>

<body>
    <h1>Welcome to w3wiki!</h1>

    <p>This page has red background color</p>
</body>
</html>

Output:

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.