Your browser does not support JavaScript!
Upvotes Anonymous 0 User 0

How to Use a CSS File Instead of CSS in the HTML

If I have an HTML page with some embedded CSS styling:
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <style>
    #mytext {
        color: white;
        padding: 5px;
        background-color: darkgray;
        font-size: 30px;
        font-weight: bold;
        font-family: Arial;
    }
  </style>
  <div id="mytext">Hi, here is some text.</div>
</body>
</html>
I can remove the <style> section and put the contents in a style.css file:
#mytext {
    color: white;
    padding: 5px;
    background-color: darkgray;
    font-size: 30px;
    font-weight: bold;
    font-family: Arial;
}
and add a <link> tag in the <head> of the HTML document, that references style.css:
<!DOCTYPE html>
<html>
<head>
  <link href="style.css" type="text/css" rel="stylesheet"/>
  <title>My Page</title>
</head>
<body>
  <div id="mytext">Hi, here is some text.</div>
</body>
</html>
Now we have a stylesheet (CSS) file that can be shared by multiple HTML pages.


Was this helpful?

Comments

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License