Search code examples
htmlcssexternalstylesheet

External style not picked by div element

I am relatively new to CSS so please let me know if there is a silly mistake on below. While trying out one of the examples on w3cschools I used the below code

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

and result was correct with a green border and text in grey background.

However while trying to do the same with an external css like below.

This code is in thumbnailTest.css

.dics{

    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;

}

This is the HTML 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
    href="C:\Users\Sam\Documents\workspace\test_project\cssTest\thumbnailTest.css">


</head>
<body>

    <div class="dics">This text is the actual content of the box. We have added a
        25px padding, 25px margin and a 25px green border. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</div>



</body>
</html>

The same output is not replicated it appear as plain text and no styling.

Although path to the css is correct also I have tried putting relative path it is not working

There is no issue with the css inclusion as it works for many other styles I have used but with Div it is not working

Here is the required workspace image

enter image description here

Solution

  • There was spelling mistake in referencing the css file. thumbnailTest.css => thumbnailText.css

    OP already edited based on the comment and solved his problem.