HOME HTML CSS Javascript PHP Laravel

HTML With CSS Styles

CSS Style

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 
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    h1 {
    color: red;
      text-align: center;
    }

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

    a {
      color: #3f51b5;
      font-size: 20px;
    }
  </style>
</head>
<body>

  <h1>This is a heading.</h1>
  <p>This is a paragraph.</p>
  <a href="#" target="_blank">This is a hayper link.</a>

</body>
</html>

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.