Home | Computer | Difference between HTML and CSS

Difference between HTML and CSS

November 26, 2022

The basic difference between HTML and CSS is, HTML is a markup language that allows you to add formatting tags to text and images. CSS, short for Cascading Style Sheet, is a style sheet language that controls how these elements appear onscreen. Together, HTML and CSS make up the core building blocks of a website.

image showing the HTML vs CSS

HTML (Hyper Text Markup Language)

HTML is a markup language that is used to create a web page. Different tags are used to create web pages. HTML has three main elements:

  • Opening tag: The start tag is used to indicate the beginning of an element. It is wrapped with opening and closing angle brackets. For example, the start tag <p> is used to create a paragraph.
  • Data:  this is the data that appears on the output screen. 
  • Closing tag: The same as an opening tag, but with a forward slash before the element name. For example, </p> to end a paragraph.

CSS (Cascade Style Sheet)

CSS (Cascading Style Sheets) is a language used to style elements written in a markup language, such as HTML. It separates the content from the visual representation of the site.

The relation between HTML and CSS is strongly tied together since HTML forms the foundation of a site and CSS dictates its aesthetics. CSS is done through different methods like inline, internal, and external code.

The CSS property inline is when the CSS is placed within an HTML tag using the style attribute. It is known as inline CSS.

<!DOCTYPE html>

<html>

    <head>

        <title>Inline CSS</title>

    </head>

    <body>

        <p style = “color:#green; font-size:60px;

                font-style:bold; text-align:left;”>

            GeeksForGeeks

        </p>

    </body>

</html>

Internal CSS code: This method is best used when a single HTML document needs to be styled differently from the rest. In order for this to work, the CSS rule set should be placed within the HTML file in the head section. By doing this, the CSS will be embedded within the HTML file.     

An external style sheet is a separate CSS file that can be accessed by multiple web pages through the same link. The link to an external style sheet is placed within the head section of the page. By using an external style sheet, webpages can take advantage of the formatting capabilities of CSS without having to include all CSS code within the page.

HTML vs CSS

The difference between HTML and CSS is given below:

HTMLCSS
HTML stands for Hyper Text Markup Language.CSS stands for Cascade Style Sheet.
HTML describes the structure of the webpage.CSS is used to define the style of web pages by using different features like style, colors, etc.
It has no specific type for writing code.CSS has three types inline code, internal code, and external code.
HTML has different tags to develop web pages.CSS consists of selectors and declaration blocks.
It has less backup and support as compared to CSS.It has higher backup and support as compared to HTML.
We cannot do animation in HTML.We can do animation in CSS.
The HTML file is saved with a .htm or .html extension.The CSS file is saved with a .css extension.