Curriculum
Course: CSS
Login

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1
Text lesson

How To Add CSS

Three Ways to Insert CSS

There exist three methods for incorporating a style sheet:

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

External CSS

By utilizing an external style sheet, you can alter the appearance of an entire website with just a single file!

Each HTML page should incorporate a reference to the external style sheet file within the <link> element located within the head section.

Example

External styles are specified within the <link> element, situated within the <head> section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be authored using any text editor and should be saved with a .css extension.

The external .css file should exclusively contain CSS code and should not include any HTML tags.

Below is an example of how the “mystyle.css” file appears:

“mystyle.css”

body {
  background-color: lightblue;
}

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

 

Note: Ensure there’s no space between the property value (20) and the unit (px):

Incorrect (with space): ‘margin-left:20(px):’

Correct (no space): ‘margin-left:20(px):’

 

Internal CSS

An internal style sheet can be employed when a single HTML page requires a distinct style.

The internal style is specified within the <style> element, situated within the head section.

Example

Internal styles are specified within the <style> element, which is located within the <head> section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

An inline style can be employed to apply a distinctive style to an individual element.

To utilize inline styles, append the style attribute to the respective element. The style attribute can encompass any CSS property.

Example

Inline styles are specified within the “style” attribute of the corresponding element.

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

</body>
</html>

 

Tip: Use inline styles judiciously as they forfeit many benefits of style sheets by mixing content with presentation

Multiple Style Sheets

If certain properties have been designated for the same selector (element) across various style sheets,

the value from the last parsed style sheet will take precedence.

Suppose an external style sheet contains the following style for the <h1> element:

h1 {
  color: navy;
}

Now, consider that an internal style sheet also contains the following style for the <h1> element:

h1 {
  color: orange;   
}

Example

If the internal style is declared subsequent to linking the external style sheet, the <h1> elements will appear in the color “orange”.

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
<style>
h1 {
  color: orange;
}
</style>
</head>

Example

Yet, if the internal style is specified prior to linking the external style sheet, the <h1> elements will be displayed in “navy”.

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

Cascading Order

When multiple styles are specified for an HTML element, they follow a cascading order of priority as outlined below, with the highest priority given to:

  1. 1. Inline style (within the HTML element)
  2. 2. External and internal style sheets (within the head section)
  3. 3. Browser defaults

Therefore, an inline style takes precedence over external and internal styles as well as browser defaults.

 

 

 

Previous
Next