Blogs Web CSS How To

How To Add CSS

By Tim-Bo Tolbert, posted on Mar 28, 2024

CSS stands for Cascading Style Sheets, and it is the scripting language that is used to style a web page and/or various HTML elements within a web page. CSS is used to describe how HTML elements are to be displayed on a web page, as well as how multiple web pages can be displayed on a web site.

How To Insert CSS

There are three main ways to insert CSS for styling HTML elements and web pages:

Inline: Used to apply a unique style to a single instance of a single element.
Internal: Used to apply a unique sytle to all instances of specific elements on a single web page, and to that individual web page itself.
External: Used to apply a unique style to all instances of specific elements and web pages on one or more web pages within a web site.

A web page can use one, multiple, or all three of these ways to apply styling to that web page and its elements.

Inline CSS

An inline CSS style may be used to add or apply a unique style to an individual HTML element within a single web page.

The inline CSS style can contain any CSS property, and may be used on any individual HTML element.

Note: It is important to note that an Inline CSS style will override the Internal and/or External CSS styles for an idividual element within a single web page.

An example for specifying an Inline CSS to individual HTML elements:

CSS

<!DOCTYPE html>
<html>
<body>

    <h1>This is a normal heading element</h1>
    <p>This is a normal paragraph element</p>

    <h1 style="color:blue;text-align:center;">This is a heading element that has inline css style applied to it</h1>
    <p style="color:red;">This is a paragraph element that also has an inline css style applied to it</p>

</body>
</html>

Internal CSS

Internal CSS styles may be used on individual web pages, and are embedded within that web pages head section. Internal CSS styles are useful for quickly styling all elements of a specific element type with the same style within that one web page.

The Internal CSS style is defined within a <style> element, and should be placed inside the head section of a web page.

Note: It is important to note that an Inline CSS style script may override some or all of the Internal CSS styles for one or more individual HTML elements on that one web page.

An example for applying an Internal CSS to a web page:

CSS

<!DOCTYPE html>
<html>
<head>
<style>
	
    body {
      background-color: linen;
    }
    
    h1 {
      color: blue;
      margin-left: 40px;
    }
    
    p {
      color: red;
      margin-left: 40px;
    }
	
    </style>
</head>

<body>

    <h1>This is a heading element that is being styled from the Internal CSS script</h1>
    <p>This is a paragraph element that is also being styled from the Internal CSS script</p>
	
    <p style="color:green;">This is a paragraph element that is overriding the Internal CSS script with its own Inline CSS style</p>

</body>
</html>

External CSS

Applying External CSS is very similar to applying an Internal CSS, except that the styling script itself is saved into an external ascii-text file with a css file extension (*.css) on the web server.

Each HTML web page that uses the External CSS file must include a reference to that file by using a <link> element, which should be placed inside the head section.

This External CSS approach not only allows for multiple web pages to use the same style throughout the web site (which provides a more professional consistant look and feel throughout the site), but it also allows for quickly changing the style of all web pages that use it by simply editing the one *.css file, otherwise you would need to edit each and every web page individually and change all Internal and/or Inline CSS styles separately.

Why would someone want to have multiple External CSS files for just one site? A good example of having multiple site wide External CSS styles is for applying Themes, where you could have one External CSS file for each Theme. In this way, based on the time of year, your header script could be written in such a way to link to a different Themes External CSS file for the current Holiday or Special Event.

Note: It is important to note that any Interal and Inline CSS style scripts may override some or all of the External CSS styles.

An example for specifying an External CSS to one or more web pages:

customStyle.css


    body {
      background-color: linen;
    }
    
    h1 {
      color: blue;
      margin-left: 40px;
    }
    
    p {
      color: red;
      margin-left: 40px;
    }

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="customStyle.css" >
</head>

<body>

    <h1>This is a heading element that is being styled from the External CSS script</h1>
    <p>This is a paragraph element that is also being styled from the External CSS script</p>
	
    <p style="color:green;">This is a paragraph element that is overriding the External CSS script with its own Inline CSS style</p>

</body>
</html>

Order Matters

When applying both Internal CSS styles to a web page that also links to an External CSS file, the Internal CSS style element should be placed after the link elements within the head section of the web page, otherwise the style scripts within the External CSS file might override the style scripts of the Internal CSS script for a given element. The order they are listed in does matter when listing multiple styles for the same element type.

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)