CSS How To Use

  • Home -
  • Web Development
  • CSS
Previous
Next

How to Use CSS?

If a browser reads a style sheet, then the document HTML is formatted according to the style sheet information.

Three Ways to Insert CSS

Three ways are available to insert a style sheet:

  • External Style Sheet
  • Internal Style Sheet
  • Inline Style

 

How to use External Style Sheet?

We can change the look of an entire website with an external style sheet by changing only 1 file! Each page should contain a reference in the < link > element to the external style sheet.

  • In any text editor, an external style sheet may be written.
  • No Html tags should be included in the file.
  • With a.css extension the style sheet file must be saved.

 

 

Here is how it looks like "ourStyleSheet.css"


body {
    background-color: lightgreen;
}

h1 {
    color: black;
    margin-left: 20px;
}

 

Example:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ukacademe.com/Examples/CSS/ourStyleSheet.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is a heading

This is a paragraph.

 

How to use Internl Style Sheet?

If one page has a unique style, an internal sheet may be used.

In the <style> element, the internal styles are defined within the <head> section of an HTML page:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: green;
margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is a heading

This is a paragraph.

 

 

How to Use Inline Styles?

An inline style can be applied to a single element in a unique design. Add the style feature to the relevant element to use inline styles. The attribute style can include any CSS property.

​Example:


<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;margin-left:25px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is a heading

This is a paragraph.

 

How to Use Multipe Style Sheet?

When we used multiple style sheet then, If some properties are defined in different style sheets for the same selector (element), the last style sheet value is used.

Let's take an example:

Suppose that an external style sheet has a <h1> element style


h1 {
  color: black;
}

Then suppose an inner style sheet also has for the component <h1> the following style:


h1 {
  color: green;   
}

The <h1> components will be "green" if the internal style is defined after the link with the external style sheet:

Example:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ukacademe.com/Examples/CSS/ourStyleSheet.css">
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document combines an external and an internal style.</p>
</body>
</html>

output:

This is a heading

The style of this document combines an external and an internal style.

 

However, the <h1> elements will be "black" If the internal style is specified before the link to an outside(external) style sheet:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="https://ukacademe.com/Examples/CSS/ourStyleSheet.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document combines an external and an internal style.</p>
</body>
</html>

Output:

This is a heading

The style of this document combines an external and an internal style.

 

What is Cascading Order ?

Which style is used when more than one HTML element style is indicated?

In the following guidelines all styles on a page "cascades" into a fresh "virtual" style sheet, in which number one is the most important:

  • Inline style (inside an HTML element)
  • External and internal style sheets (in the head section)
  • Browser default

 

An inline style therefore takes the highest importance and overrides on external and internal style and browser defaults

 

Previous
Next

Course Reviews