CSS and HTML 5 – Adding CSS to HTML (External, Internal, Inline)

Eli the Computer Guy CSS and HTML 5

CSS can be added to an HTML document 3 different ways. You can use an External Style Sheet, dd CSS to the Head of the HTML document, and within the HTML tags themselves.

inlineCSS.html

<h1 style="text-align:center; color:red;">This is inline CSS</h1>

onPageCSS.html

<html>
<head>

<style>

body {
  background-color: yellow;
}

h1 {
  color: orange;
  text-align: center;
}

p {  
  font-size: 30px;
}
</style>

</head>

<body>

<h1>On Page CSS</h1>
<p>This is an example of on page CSS</p>

</body>
</html>

externalSheet.html

<html>
<head>

<link rel="stylesheet" href="style.css" />
</head>

<body>

<h1> This is H1</h1>

<p>this is bolded text</p>
</body>

</html>

style.css

h1 {
  color: blue;
  text-align: center;
}

p {
  font-weight: bold;
}

mixedSourceCSS.html

<html>
<head>

<link rel="stylesheet" href="style.css" />

<style>
p {
  text-decoration: underline;
}
</style>

</head>
<body>

<p style="text-align: center; font-weight: normal;">This is text created from multiple CSS sources</p>