Inline CSS code is not being read - html

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>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>

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>...</li>
To:
<li>...</li>

you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible

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

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

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>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>

Related

Media query is not responsive

I am working on my first ever media query for a class and to me my code looks like the example we were given, but when I test it on Chrome using the developer tools, it is not responsive. I am just trying to make it so that the list will be vertical (block) when viewed on a phone and horizontal (inline block) when viewed on a bigger screen. Can anyone help me see what I did wrong?
body {
font-family: 'Ruslan Display';
}
ul {
background: #3399ff;
padding: 20px;
}
#favorites li {
background: #cce5ff;
margin: 5px;
list-style: none;
display: block;
}
#media(min-width:375px;
) {
#favorites li {
display: inline;
}
}
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet">
<meta charset="utf-8">
<meta name="description" content="My First Site for Web Fundamentals">
<title>My First Webpage</title>
</head>
<body>
<p>This is my very first attempt at putting info up on a Webpage using a a media query for responsive design. <br></p>
<p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p>
<ul id="favorites">
<li>My husband, Brian</li>
<li>My kids, Louis and Brady</li>
<li>My parents, Terry and Steve</li>
<li>My brother, Steven</li>
<li>My best friend, Missy</li>
</ul>
</body>
Remove the semi-colon from your media query param; this is invalidating your query.
#media(min-width:375px;)
should be
#media(min-width:375px)
When I tried to put your html into the snippet, there were html errors highlighted in red. You had break tags (<br>with forward slashes (</br>) that were being picked up as incorrect (the forward slashes are unnecessary). Also, the closing paragraph tag wasn't being recognised as being matched (that may be a shortcoming of stacksnippets, but still, it's good to close a paragraph after a block of text instead of using multiple br tags). The HTML errors probably contributed more to your issue than your css. The online w3c validator is a very useful tool for checking for html errors.. just a tip! .
Hope this helps

How do I apply CSS styling to a <div> block?

The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file

HTML 5- adding a navigation bar to a page

I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.
I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?
The HTML that I have for this is: (code updated 25/09/2013 # 17:40)
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
list-style-type: none;
}
#navbar ul li{
list-style-type: none;
display: inline-block;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</body>
</html>
Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...
I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?
Cheers!
Edit 25/09/2013
I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):
As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?
Your HTML is a little bit botched... you may want to review the purposes of tags like <head> and <body>. The following HTML will give you the desired effect.
See this working demo.
<!DOCTYPE html>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul {
list-style-type: none;
}
#navbar ul li {
list-style-type: none;
display:inline-block;
}
</style>
</head>
<body>
<center>
<img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
</center>
<div id="navbar">
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</div>
</body>
</html>
I've tried to indent things in such a way that you can easily remember what the layout of an HTML document looks like. As your page gets more complex, you might consider putting your CSS in a separate file -- say, stylesheet.css -- and including it by adding the following to the <head> section:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Best of luck!

Why does my external CSS not work in FF or IE, but does in Chrome?

When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.

Display:inline not working

I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.