HTML & CSS References

HTML and CSS

HTML and CSS are fundamental technologies for web development and building web pages. Standing for HyperText Markup Language, HTML gives a web page its structure while CSS (which stands for cascading style sheets) gives web pages their visual layout. HTML and CSS are at the very core of most websites and web applications.

What Is the Difference Between HTML and CSS?

The main difference between HTML and CSS is that while HTML defines the structure of web pages, CSS is used to style those pages with a variety of different features. If we think of HTML code as the skeleton of a web page, CSS would be its skin.

Other differences between HTML and CSS include:

HTML consists of text contained within HTML tags, while CSS is made up of declaration blocks and selectors
Where HTML gives a web browser display information of various tags, CSS enhances that information to the browser by adding styling to those HTML tags
CSS can be used inside an HTML document, but HTML cannot be used inside a CSS sheet
CSS is used for presentation and visual effect — to manipulate colors, fonts, and backgrounds, add visual style to sites, prepare images, specify margins and borders, and much more — while HTML is not

How to Link CSS to HTML

There are three ways to link or add CSS to an HTML page: inline style, internal style, and external style.

Inline CSS

The easiest method for adding CSS to an HTML file, an inline style is applied to HTML documents through the style attribute. Inline styles can apply unique styles to HTML elements or a single HTML element. Any CSS property can be contained within the style attribute. It should be noted that because inline styles mix presentation and content, this method shouldn’t be used too frequently.

Sample Inline CSS

<!DOCTYPE html>
<html>
  <body>
    <p style="color:blue;text-align:center">
    This is a centered paragraph with blue text.</p>
  </body>
</html>

Internal CSS

If a single HTML page has a unique style, you can use an internal style sheet, which will be defined within the head section of an HTML page within the style element.

As you write HTML, you can place as many CSS styles as you want between the opening and closing style tags, before the body. Here is an example of internal CSS.

Sample Internal CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded Style Sample</title>
    <style type="text/css">
      h1{
        color: #0000FF;
      }
      h2{
        color: #00CCFF;
      }
    </style>
</head>
</html>

External CSS

An external style sheet is a text file containing only CSS style formats that will have the .css extension. External style sheets allow you to alter a website’s look by swapping out only one file.

External style sheets and HTML files are separate. External styles will be defined in the head section of HTML pages within the link element. External CSS files should not contain any HTML tags. You should also save your HTML file in the same folder as your .css file.

Sample External CSS

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

Learn HTML & CSS Today

Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform – no downloads or complicated setup required.

Free and fun
Designed for beginners
No download or setup required

Get Started