HOME HTML CSS Javascript PHP Laravel

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files
  • HTML describes the structure of a Web page
  • HTML elements tell the browser how to display the content

How to use css?

There are 3 ways to write CSS in our HTML file

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS :

  • Before CSS this was the only way to apply styles
  • Not an efficient way to write as it has a lot of redundancy
  • Uniquely applied on each element and Self-contained
  • The idea of separation of concerns was lost

Inline css example

Edit it yourself 
<h1 style="color: red;text-align: center;">This is a heading.</h1>
<p style="border: 1px solid;padding: 5px;font-size: 20px;">This is a paragraph.</p>

2. Internal CSS :

  • With the help of style tag, we can apply styles within the HTML file
  • Redundancy is removed
  • But the idea of separation of concerns still lost
  • Uniquely applied on a single document

Internal css example

Edit it yourself 
h1 {
color: red;
  text-align: center;
}

p {
  border: 1px solid;
  padding: 5px;
  font-size: 20px;
}

a {
  color: #3f51b5;
  font-size: 20px;
}

3. External CSS :

  • With the help of tag in the head tag, we can apply styles
  • Reference is added
  • File saved with .css extension
  • Redundancy is removed
  • The idea of separation of concerns is maintained
  • Uniquely applied to each document

Internal css example

<head>
  <title>This is a page title</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Benefits of CSS :

  • CSS saves time.
  • Easy maintenance.
  • Pages load faster.
  • Solves a big problem
  • Superior styles to HTML.
  • Provide more attributes
  • Multiple Device Compatibility.
  • You can add new looks to your old HTML documents.
  • You can completely change the look of your website with only a few changes in CSS code.

CSS History

Year History
1994 First Proposed by Hakon Wium Lie on 10th October
1996 CSS was published on 17th November with influencer Bert Bos
1996 CSS became official with CSS was published in December
1997 Created CSS level 2 on 4th November
1998 Published on 12th May

Conclusion :

  • CSS was created to work in conjunction with markup languages like HTML. It is used to stylize a page.
  • There are three styles of implementing CSS, and you can use the External style to accord multiple pages at once.
  • You won’t go far without seeing some kind of CSS implementation nowadays since it’s as much of a requirement as the markup language itself.