Include an External CSS File

There are three ways to apply CSS styling to an HTML document: inlining, embedding, or linking. To inline CSS, we simply add a style attribute to an element and add the desired styles as the value of that attribute; inline styles only affect the element on which they are an attribute. To embed CSS, we simply add a style element, usually inside the head of the document so that it is easy to find, and put the desired styles inside it; it does not matter where we put the style element, since it always affects the entire document. To link CSS, we use the link tag on a separate css file, as shown below; like the embedded style element, linking affests the entire document.

Below we have a Cascading Style Sheet (CSS) file named Scripture.css in the same folder as the html file IncludeCSS.html, which it is styling. Inside the style file are three class selector. Below those, we show the HTML output in the Output pane.

Scripture.css

.bible_heading {
  font-family : sans-serif;
  color : #404040;
}

.bible_div {
  width:700px;
}

.bible {
  background-color : #808080;
  color : #F0F0FF;
  padding : 10px;
  font-size: 15pt;
  width:auto;
}

IncludeCSS.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="Scripture.css" />
  </head>
  <body>
  <h1 class="bible_heading">Galatians 5:16-26</h1>
  <div class="bible_div">
  <p class="bible">"But I say, walk by the Spirit, and do not gratify the desires of the flesh. For the desires of the flesh are against the Spirit, and the desires of the Spirit are against the flesh; for these are opposed to each other, to prevent you from doing what you would. But if you are led by the Spirit you are not under the law. Now the works of the flesh are plain: fornication, impurity, licentiousness, idolatry, sorcery, enmity, strife, jealousy, anger, selfishness, dissension, party spirit, envy, drunkenness, carousing, and the like. I warn you, as I warned you before, that those who do such things shall not inherit the kingdom of God. But the fruit of the Spirit is love, joy, peace, patience, kindness, goodness, faithfulness, gentleness, self-control; against such there is no law. And those who belong to Christ Jesus have crucified the flesh with its passions and desires. If we live by the Spirit, let us also walk by the Spirit. Let us have no self-conceit, no provoking of one another, no envy of one another."</p>
  </div>
  </body>
</html>

Output

Galatians 5:16-26

"But I say, walk by the Spirit, and do not gratify the desires of the flesh. For the desires of the flesh are against the Spirit, and the desires of the Spirit are against the flesh; for these are opposed to each other, to prevent you from doing what you would. But if you are led by the Spirit you are not under the law. Now the works of the flesh are plain: fornication, impurity, licentiousness, idolatry, sorcery, enmity, strife, jealousy, anger, selfishness, dissension, party spirit, envy, drunkenness, carousing, and the like. I warn you, as I warned you before, that those who do such things shall not inherit the kingdom of God. But the fruit of the Spirit is love, joy, peace, patience, kindness, goodness, faithfulness, gentleness, self-control; against such there is no law. And those who belong to Christ Jesus have crucified the flesh with its passions and desires. If we live by the Spirit, let us also walk by the Spirit. Let us have no self-conceit, no provoking of one another, no envy of one another."