The CSS i want for my DIV doesnt work

Question

Im a newbie in html/css, I'm working on something for school. I did different things with DIV id, and then a # in my external css sheet and it all worked, i created a nice lay out. Now i want some parts of the text in italics, red and other in regular. I thought of wrapping the parts that needed to be italic with div. But this time it doesnt seem to work. Does someone know what i'm doing wrong? The other DIVS do work:

IMPORTANT NOTE: All the CSS has to be in a external CSS sheet. I dont know why but its mandatory in school. So I cant do DIV style=". It had to be with the #

HTML:

<div id="navigation">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="nieuwsartikel.html">Nieuwsartikel</a></li>
            <li><a href="sfeerverslag.html">Sfeerverslag</a></li>
            <li><a href="column.html">Column</a></li>
        </ul>
    </nav>
</div>

<div id="content">
    <article>
        <h1>
            De Groot spreekt over informatieoorlog
        </h1>

<div id="italic">
    Aan de bar van het duistere bestofte cafeetje in Amsterdam zit ze, Naomi de Groot. Bijna onherkenbaar, vermomd door middel van een paarse pruik en een enorme zonnebril. Nederlands meest bekende complottheoriste kijkt wantrouwend naar haar bestelde glas cola, ze schuift het aan de kant en pakt uit haar tasje een fles met zelf gefilterd water. ‘je kan niet voorzichtig genoeg zijn’ fluistert ze. Ik kan niet wachten om haar te interviewen over haar gedachtes en visies met betrekking tot internet privacy.
</div>

My CSS:

#content h2
{
    color:#000;
    font-size: 160%;
    margin: 0 0 .5em;
}

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

#italic
{
    font-style:italic;
    color:red;
}

#footer
{
    background:#ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

This might help http://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic — Josh, Oct 29 '13 at 19:22
Appears to work fine in a [fiddle](http://jsfiddle.net/EkWET/), perhaps something else on your page is overriding your italic styling? Also you should definitely use `class` not `id` for this. — jbabey, Oct 29 '13 at 19:24

score 1 · Answer 1 · answered Oct 29 '13 at 19:30

This should work http://jsfiddle.net/VyeU7/

Basic css rules:

Html tag defines styles for that tag, e.g.

div
{css here}

A leading dot defines styles for all elements with that class, e.g.

.yourclass
{css here}

A leading hashtag defines styles for elements with that id (as a rule an id should only apply to a single element)

#element_id
{css here}

score 0 · Answer 2 · answered Oct 29 '13 at 19:23

0

You're missing a closing </article> and a closing </div> tag in your "content" div.

Also, if you want something in italics, you can just wrap it in <em> tags.

answered Oct 29 '13 at 19:23

glomad

5,539
2
24
38

The italics styling for `` elements is technically dependent on the browser's built-in styling IIRC, although I think they all give italics styling to it. – ajp15243 Oct 29 '13 at 19:25
I cant put because all the css must be in an css stylesheet. I dont know why, but its mandatory in school. – Cmddude Oct 29 '13 at 19:26
1

`em` is *not* for italicizing text in styling. `em` is for placing *emphasis* on text in the markup. In most cases that emphasis renders as italicized text, but that is not guaranteed. Styling should be kept in the CSS, not in the markup. – David Oct 29 '13 at 19:27
@ajp15243 is correct, but all browsers for now and the foreseeable future treat `` with italics by default. But you can always specify `em { font-style: italic; }` in your CSS and meet your teacher's requirements – glomad Oct 29 '13 at 19:28
@David You're correct. It is for placing emphasis on text in the markup. And it currently renders as italicized text in 100% of cases where the user agent stylesheet has not been overridden. If you want to be completely sure, you can specify font-style:italic in your own CSS. But wrapping text in `` serves the purpose of emphasizing text both *on-screen* and in *screen readers*. If you want italics purely for decoration, then use some other element to wrap your text and style it in italics. But for most cases, `` is correct. – glomad Oct 29 '13 at 19:39

score 0 · Answer 3 · answered Oct 29 '13 at 19:25

If you are only wanting to style the text and it is being italicized to add emphasis, you should consider wrapping your text in an em tag, like so:

<em>Aan de bar van het duistere bestofte cafeetje in Amsterdam zit ze, 
 Naomi de Groot. Bijna onherkenbaar, vermomd door middel van een paarse 
 pruik en een enorme zonnebril. Nederlands meest bekende complottheoriste kijkt
 wantrouwend naar haar bestelde glas cola, ze schuift het aan de kant en pakt uit
 haar tasje een fles met zelf gefilterd water. ‘je kan niet voorzichtig genoeg zijn’
 fluistert ze. Ik kan niet wachten om haar te interviewen over haar gedachtes en
 visies met betrekking tot internet privacy.</em>

CSS:

em {
   color: red;
}

since em tags are usually italicized by the browser as the default style, you can choose to make the style rule explicit or let the browser decide.

score 0 · Answer 4 · answered Oct 29 '13 at 19:26

0

to include certain styles for certain paragraphs, you need to use a "class" not an id

so do

.reditalic
{
    color:red;
    font-style:italic;
}

then everywhere you need it just do

<div class="reditalic">the text</div>

or

<p class="reditalic">the text</p>

etc.

answered Oct 29 '13 at 19:26

AwokeKnowing

7,728
9
36
47

1

While classes are generally better than ids for styling best practices, there's no reason an id can't be used. – ajp15243 Oct 29 '13 at 19:27
yes there absolutely is. You are only supposed to use an id ONCE. – AwokeKnowing Oct 29 '13 at 19:28
And the OP did not post all his code, as you can see by the missing ending tags – AwokeKnowing Oct 29 '13 at 19:29
That's quite an assumption, when a typo would also explain the missing ``. – ajp15243 Oct 29 '13 at 19:30
and the missing ??? Even if so, the OP said " I thought of wrapping the parts that needed to be italic with div". PLURAL. parts. so it should be a class. – AwokeKnowing Oct 29 '13 at 19:31
@AwokeKnowing Chill out, there's no need to explode on a Q&A site... he could be wrapping multiple parts as children of a single `
` to which an italics style can be applied. And I've seen worse typos.
– ajp15243 Oct 29 '13 at 19:33
hey man, no meanness intended. I just did not want the OP to get more confused simply because you didn't read his post well and made assumptions about his code. :) – AwokeKnowing Oct 29 '13 at 19:36
@AwokeKnowing I am making no assumptions. I am merely offering alternate explanations that are equally valid to your own explanations as to why OP's code is the way it is. – ajp15243 Oct 29 '13 at 19:38

score 0 · Answer 5 · answered Oct 29 '13 at 19:33

Your HTML code is just fine as i can see now :) You just have a little typo in your css:

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

should be :

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

voilá, everything will work.

jsFiddle

Succes verder!

score 0 · Answer 6 · answered Oct 29 '13 at 19:34

You have a syntax error in your CSS. It's at the end of a long line so it's difficult to see:

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

Notice the extra closing curly brace. This is probably causing the browser to ignore all CSS rules (or otherwise misinterpret them) after this error. Just get rid of the extra brace:

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

Works here (combined with closing your HTML tags, of course).

Note: When you're experiencing odd behavior with your markup/styling then the first thing you should do is validate them.

The CSS i want for my DIV doesnt work

6 Answers6