CODEWITHSUNDEEP
htmlcss
Squallz
Squallz

Reputation: 59

Defining CSS in HTML div?

I know I can do this:

  <head>
    <meta charset="utf-8">
    <title>Hello!</title>

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

but what if I am making JUST a div and I want to be able to style that div? (because I want to have the item itself, I don't want to touch the rest of that page)

I currently have: 

<div class="hbrmenu">
  <a href="#" class="hbr-toggle-btn"></a>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
  </ul>
</div>

and I want to be able to style .hbrmenu in another file (a css)

Thanks!

Upvotes: 1

Views: 61

Answers (2)

YATO
YATO

Reputation: 107

You have trouble expressing your question clearly. As far as I understand you want to have your hbrmenu to achieve another styling effects. If so, you don't need another css file. All you have to do is specify a CSS MEDIA RULE. For best results, create a html file then paste the code below so you can see the effect. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
    .class1{
    	/*add properties*/
    }
}
@media screen and (min-width: 720px) {
    body {
        background-color: red;
    }
    .class1{
    	/*add properties*/
    }
}
</style>
</head>

<body>
Background changes as you resize browser. 
</body>

</html>

Upvotes: 1

dippas
dippas

Reputation: 60563

I want to be able to style .hbrmenu in another file (a css)

You already answered your own question, you create a CSS file and link it in the head just the way you did it, then you style the div something like this:

.hbrmenu {
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
}
<div class="hbrmenu">
  <a href="#" class="hbr-toggle-btn"></a>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
  </ul>
</div>

Note if you are trying to do inline CSS either using style or inline attributes, keep it in mind that is a bad practice, so use an external file as mentioned above.

Upvotes: 2

Related Questions