CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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

Difference Between HTML and CSS

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

Difference Between HTML and CSS

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.



ADVERTISEMENT
ADVERTISEMENT