Using HTML with CSS

External Stylesheet Use

Use the link attribute in the document's head:

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

You can also use stylesheets provided from websites via a content delivery network, or CDN for short. (for example, Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Generally, you can find CDN support for a framework on its website.

Internal Stylesheet

You can also include CSS elements internally by using the <style> tag:

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

Multiple internal stylesheets can be included in a program as well.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Inline Style

You can style a specific element by using the style attribute:

<span style="color: red">This text will appear in red.</span>

Note: Try to avoid this -- the point of CSS is to separate content from presentation.

Multiple Stylesheets

It's possible to load multiple stylesheets:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Note that later files and declarations will override earlier ones. So if general.css contains:

body {
    background-color: red;
}

and specific.css contains:

body { 
    background-color: blue;
}

if both are used, the background of the document will be blue.

Syntax:

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

Contributors

Topic Id: 4536

Example Ids: 15882,15883,15884,15886

This site is not affiliated with any of the contributors.