Skip to main content

CSS

Cascading Style Sheets(css) is used for style and arrange the elements in the web page. describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser.

Usage of CSS​

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements Internal - by using a <style> element in the <head> section External - by using a <link> element to link to an external CSS file

Inline CSS​

In this methord style is applied to a unique element in the html. An inline CSS uses the style attribute of an HTML element.

Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

A Blue Heading

A red paragraph.

Internal CSS​

Internal CSS can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.

Example
<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #root {
        background-color: #323330;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .CH {
        text-align: center;
        font-size: 25px;
        font-family: arial;
        color: white;
      }
      .CH span {
        color: #f0db4f;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="CH">
        <h1>coding<span>Habits</span></h1>
        <p>Great Profiles, Great Careers</p>
      </div>
    </div>
  </body>
</html>
Loading...

External CSS​

It is used to style different html pages. CSS is written external. To use an external style sheet, add a link to it in the <head> section of each HTML page.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="root">
      <div class="CH">
        <h1>coding<span>Habits</span></h1>
        <p>Great Profiles, Great Careers</p>
      </div>
    </div>
  </body>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is what the "styles.css" file looks like:

* {
  margin: 0;
  padding: 0;
}
#root {
  background-color: #323330;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CH {
  text-align: center;
  font-size: 25px;
  font-family: arial;
  color: white;
}
.CH span {
  color: #f0db4f;
}
Example
Loading...
info

The editor we have provided above does not require the <link> tag to link the styles defined in the CSS tab of the editor. All the styles from the CSS tab will be applied to the HTML document automatically as the file is attatched internally.

tip

you can attatch multiple CSS files to the HTML Document

CSS Colors, Fonts and Sizes​

The color property in CSS is used to set the color to text, the background of the webpage, and also to set the color of borders. The font property is used to set different fonts. The Size property is used to set size of the letters.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
        font-family: verdana;
        font-size: 300%;
      }
      p {
        color: red;
        font-family: courier;
        font-size: 160%;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

CSS Border​

Border can be set to every html element using this property.

example
p {
  border: 2px solid powderblue;
}

This is a paragraph

CSS Padding​

The CSS padding property defines a padding (space) between the text and the border.

example
p {
  border: 2px solid powderblue;
  padding: 30px;
}

This is a paragraph

CSS Margin​

The CSS margin property defines a margin (space) outside the border.

example
p {
  border: 2px solid powderblue;
  margin: 50px;
}

This is a paragraph

External style sheets can be referenced with a full URL or with a path relative to the current web page.

<link rel="stylesheet" href="https://www.CodingHabits.online/html/styles.css" />