Show List
Tutorials > CSS > CSS Placement

CSS Placement

There are three ways to add the CSS style to an HTML element:

  • Inline : Style is added using the style attribute of the element
  • Internal: Style is added within the HTML page head section using the selectors
  • External: Style is provided using an external .css file using the selectors. Link to the css file is provided in the head section of the HTML.

Inline CSS sample

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="washington" title="Washington Title" style="box-shadow: 1px 1px 3px #222222; padding: 10px; margin: 10px;">
        Washington</div>
    <div id="montreal" title="Montreal Title" style="box-shadow: 1px 1px 3px #222222; padding: 10px; margin: 10px;">
        Montreal</div>
</body>

</html>
Output
Washington
Montreal

Internal CSS sample

<!DOCTYPE html>
<html>

<head>
    <style>
        .cityDiv{
            box-shadow: 1px 1px 3px #222222;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="london" class="cityDiv" title="London Title" >London</div>
    <div id="paris" class="cityDiv" title="Paris Title" >Paris</div>
    <div id="washington" class="cityDiv" title="Washington Title" >Washington</div>
    <div id="montreal" class="cityDiv" title="Montreal Title" >Montreal</div>
</body>

</html>
Output
London
Paris
Washington
Montreal

External CSS sample

index.html
<!DOCTYPE html>
<html>

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

<body>
    <div id="london" class="cityDiv" title="London Title" >London</div>
    <div id="paris" class="cityDiv" title="Paris Title" >Paris</div>
    <div id="washington" class="cityDiv" title="Washington Title" >Washington</div>
    <div id="montreal" class="cityDiv" title="Montreal Title" >Montreal</div>
</body>

</html>
styles.css (present in the same folder as index.html)
.cityDiv{
    box-shadow: 1px 1px 3px #222222;
    padding: 10px;
    margin: 10px;
}
Output
 
London
Paris
Washington
Montreal


Next: CSS Styles

    Leave a Comment

  • captcha text