Difference between HTML and CSS

HTML

HTML stands for HyperText Markup Language and is used to create web pages and websites and web applications, which means we can create static web pages. Html is a scripting language, and the pages are saved using the .html extension.

Html is used to define the structure of any web page or web application, or website. The basic structure contains a head section, body section, and footer section for any web application.

Html is the basic and first building block while developing any website. The main part of HTML is the tag, so it can also be called a basic unit of the HTML page.

In HTML, several tags are used for several different purposes. These tags provide display information to the browser, meaning each tag has predefined display information, e.g., <a> tag defines a hyperlink that is used to navigate to other web pages. There are different attributes and elements in HTML, and each element has an opening and closing tag.

Advantages: -

• Html is easy to use, learn and write, and supported by all browsers.
• It is fast to download because the text is compressible.

Disadvantages: -

• It can be used only to create a static and plain page.
• Also, it has limited styling capabilities.

Example:

Code:

<html>
<head>
<title> The title of web page</title>
</head>
<body>
<h1>This is h1 tag</h1>
<p>This is paragraph tag </p>
</body
</html>

Output

In the above example, with the help of HTML tags, we have created a simple static web page that contains a head, body section, and some tags like heading 1 tag and paragraph tag. The h1 tag makes the heading in bold, and the paragraph tag enters the statements on a new line.

So, this is the basic structure of a web page.Html files can include CSS code and files, but the reverse cannot be done.

Not only that but also HTML is free to use and is not case sensitive, which means tags can be written in upper case as well as in the lower case.

It is also platform-independent because it works on both Linux and Windows, etc.

CSS

CSS is an acronym for Cascading Style Sheet, which is used to style our documents or web pages that are created using HTML. It makes our web application look presentable with its properties, including layout, background color, etc.

CSS is used for controlling the styling of web pages.

The style sheet is saved using the .css extension when creating an external sheet for designing our web pages.

The World Wide Web Consortium(W3C) maintains CSS and is used for multiple styling pages with the same specifications.

We can use CSS inside HTML, but vice versa is not possible.

CSS has selectors and declaration blocks, and there is an id selector (#), a class selector(.), and the universal selector (*).

There are 3 types of CSS:

1)Inline CSS: Styling for particular element/attribute is mentioned inside any tag.

2)Internal CSS: Styling of elements is done inside <style> tag which is inside <head>tag.

3)External CSS: Styling of elements is defined in another file which is of .css extension and is linked in the html file using <link> tag.

Advantages: -

• It saves a lot of time due to its flexibility and easy maintainability.
• It can set and update styles for many documents at once.
• CSS is used for the presentation of web pages.

Disadvantages: -

• There are different versions of CSS, so that it might become confusing sometime.
• It works differently on different browsers.

Example: -

style1.css

* {
  background-color: #8fc560;
}
h1 {
  color: blue;
  text-decoration: underline;
  font-family: sans-serif;
}
h2 {
  color: white;
}
h3 {
    color:pink;
}
p {
  font-size: 16px;
  font-family: Comic Sans MS;
}

Html file:

<html>
<head>
<title> </title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>The web page is css example<h1>
  <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
<p>This is a paragraph tag </p>
</body>
</html>

Output

In the above example, an external CSS is created and is linked to the HTML file.

In style1.css, different tags have different properties, like the h1 tag is set with text-decoration, colour, and font family. Not only that, but we can also set margin, padding, so on using CSS.