codyc4321 codyc4321 - 1 month ago 12
CSS Question

using div inside p tag loses my styles

I have a page where I want to represent a url to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have

index.html:

<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>


styles.css:

body {
background: #f0f0f0;
width: 80%;
margin: 0 auto;
}

h1 {
text-align: center;
margin-top: 35px;
margin-bottom: 60px;
}

p {
font-size: 20px;
font-family: sans-serif;
}

.cl {
margin: 38px;
padding: 25px;
background: #f8f8f8;
font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size: 12px;
}

.fake-url {
color: blue;
}


Most recently I had tried using
.fake-url
in the div,

<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>


and after that I did

p, p div {
font-size: 20px;
font-family: sans-serif;
}


enter image description here
Any help appreciated, thank you

Answer

I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.

And as someone mentioned above, you have an extra ; inside the div's class

Comments