HTML vs CSS – HTML and CSS Syntax Differences

If you also want to start learning web development and start making fascinating websites. Then, HTML is one of the essential aspects of building a website, and it’s the first thing you will encounter as you start building a website. Once you have made the basic structure of your website using HTML, then CSS comes into the picture. We use CSS to beautify the basic layout of our website. In this article, let’s see the HTML vs CSS syntax differences.
Let’s dive in.

What is HTML?

When we start to develop a website, the first thing to do is to make up the layout of the website. HTML is one of the tools used to make up the basic structure of our website by using various tags. We can do multiple tasks using HTML, such as making a table, a form, etc.

We use HTML tags to build a website’s basic structure. There are many HTML tags available. Some commonly used are div, p, heading tags ( h1 – h6), table tags, etc.

The latest version available today is HTML5. Some of the main features introduced in HTML5 are the introduction of vector graphics, semantic tags, nav tag, progress tag, etc.

HTML syntax explained

We will understand the syntax of HTML using a sample HTML program by describing everything used to write the program.

<!DOCTYPE HTML>
<HTML>
<head>
<title>This is the title of our first Html program</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1>This is the main heading of our program</h1>
<h2>This is the sub-heading of our program</h2>
<p>This is a sample HTML program.<span id="link"><a href="https://codedamn.com/learn/html-css"> Click Here </a>to browse codedamn's HTML and CSS course.</span></p>
</body>
</html>Code language: HTML, XML (xml)

This program will run on a browser (google chrome, Mozilla firefox, safari, etc.). First, we will see the output of our program and then discuss the format and tags used in the program.

Output:-

Let’s discuss all the tags used in the program one by one.

!DOCTYPE HTML tag:-!DOCTYPE tells the browser what type of document to expect and treat accordingly. !DOCTYPE HTML tells the browser that this is an HTML5 document.
HTML tag:-The HTML tag is used at the start of an HTML document and closes at the end of the HTML document.
Head tag:-head tag contains information about our programs, such as the title of the program and meta tags (ex-author, description, keywords, etc.). The link tag is also inside the head tag. It links our document with an external resource (image, style sheets, favicon, and so on).
Body tag:-All of our main HTML code should be inside the body tag. There should be only one body tag permitted in the whole HTML document.
H1 tag:-This tag consists of the primary heading of our HTML document.
H2 tag:-This tag consists of a secondary (sub-heading) of our document. Heading tags goes from h1 – h6 and signifies the more to less important heading.
P tag:-Used to write a structured combination of content (text, image, links, etc.)
A tag:-Used to create a hyperlink. A web address or URL inside the href attribute. Many attributes are available such as target, rel, download, etc.
Span tag:-It is a container tag. We can insert a group of other elements inside it. It is very much similar to a div tag other than that it is an inline tag.

What is CSS?

While we made up the structure of our website using HTML, our website looks obsolete in terms of looks. CSS solves this problem by adding colors, animations, formatting, etc.

The latest version of CSS available is CSS3. CSS3 includes the addition of many new features. Some of the commonly used are CSS grid, flexbox, responsive web design, etc.

CSS syntax explained

We can include CSS in our HTML program in three types
We will understand the syntax of CSS by applying styles to the above-made sample HTML program.

We can include CSS in our HTML program in three types-
Inline CSS, Internal CSS, and External CSS. We are using external an External CSS file named sample.css for the styling of our HTML document.
We will understand the syntax of CSS by applying styles to the above-made sample HTML program.

body {
    background-color: yellow;
}

h1 {
    color: red;
}

h2 {
    font-style: italic;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p {
    font-size: 20px;
    color: magenta;
}

#link {
    font-weight: bold;
}Code language: CSS (css)

We will see all the CSS properties used in the styling of the above HTML document. Before that, here is the final output of the CSS styling written.

Output:-

Let’s discuss the styling done above.

The body element is selected & a background color yellow is applied.
The main heading (h1) element is selected & its text color changed from black to red.
The font style and font of the sub-heading (h2) element changed from Normal and Arial to italic & Segoe UI simultaneously.
The paragraph element is targeted and given a font size of 20px and a font color of magenta.
The span element with the id link targeted and its font weight changed to bold.

Resources to follow

A guided course is always helpful when learning HTML & CSS. A well-structured course helps you learn faster and learn the topics used in the real world, rather than only learning the theoretical portion. I recommend you follow Codedamn’s HTML and CSS fundamentals course to start learning HTML vs CSS differences and later learn the Advanced HTML5 & CSS3 course. Plenty of good projects are available on Codedamn to validate your HTML and CSS learning.

Conclusion

In this article, we learned about HTML vs CSS syntax using a sample program. There are plenty of tags available in HTML to structure your layout. You can use multiple CSS properties to style your HTML document. I hope this article helped you to understand the syntax differences between HTML and CSS.