CODEWITHSUNDEEP
htmlcsscss-selectors
user2847948
user2847948

Reputation: 149

Inline CSS code is not being read

Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-) I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.

Another question. Should I open a New question? This question refers to the original block of code.

My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block. 

<!DOCTYPE html>
<HTML>



 <HEAD>
    <TITLE>Why I love learning HTML - Part 2</TITLE>
    </HEAD>

    Colors
    <BR>
    My favorite colors are:
    <BR>
    <UL>
    <LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
    <LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
    </UL

    </BODY>
    </HTML>

This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help

  <head>
    <meta charset="utf-8" />
        <title>Homepage</title>
        <style type="text/css">
        </style>
    </head>



 <body>
      .ul {
    margin:0;
        padding:0;
        color:#ff0000;
   }




 .li {
      display:inline;
      padding:0;
      margin:0;
      color:#000099;
   }
        <!-- Site navigation menu -->
     <ul>
        <li><a href="index.html">Home page</li></a> 
        <li><a href="EdEx.html">Education and Experience</li></a>
        <li><a href="pubs.html">Publications and Committees</li></a>
        <li><a href="links.html">Links</li></a>
    </ul>


    <h1>can't find the errors</h1>

   </body>
</html>

Upvotes: 2

Views: 465

Answers (5)

Tone
Tone

Reputation: 990

The correct way to do inline styling is to use the style attribute in your markup:

   <ul style="margin:0; padding:0; color:#ff0000;">

The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.

What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.

BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.

Finally, the recommended practice is to use external style-sheets, using the HTML link tag:

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

Here is your original code with the embedded styling in the correct place:

<head>
<meta charset="utf-8" />
    <title>Homepage</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        color:#ff0000;
    }

    ul li {
        display:inline;
        padding:10;
        margin:0;
        color:#000099;
    }
    </style>
</head>
<body>

    <!-- Site navigation menu -->
    <ul>
       <li><a href="index.html">Home page</li></a> 
       <li><a href="EdEx.html">Education and Experience</li></a>
       <li><a href="pubs.html">Publications and Committees</li></a>
       <li><a href="links.html">Links</li></a>
   </ul>
</body>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:

1. Putting your CSS in the right place

Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.

To fix this, simply move it all into that style element in your head:

<head>
    <style type="text/css">
        /* Styling goes here. */
    </style>
</head>

(For rendering purposes, styling should never be declared outside of the document's head either.)

2. Fixing your selectors

Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.

To target your ul and li elements, you'd simply remove the .:

ul { ... }
li { ... }

3. Validating your HTML

On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:

<li><a href="...">...</li></a>

To:

<li><a href="...">...</a></li>

Upvotes: 6

SLaks
SLaks

Reputation: 887245

That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.

Upvotes: 0

Banana-In-Black
Banana-In-Black

Reputation: 2557

Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.

Upvotes: 0

Tom Beech
Tom Beech

Reputation: 2389

you need to contain your CSS in 

<style> </style>

Also, make sure you put it in the head where possible

Upvotes: 1

Related Questions