Videos
The titleImage ID is for the <div> surrounding the image, not the image itself. At the moment, you are trying to find an element with a #titleImage selector inside an image tag.
For the titleLink, the ID is the element, so you can do this instead:
a#titleLink { ... }
However, you'd typically only have one ID on a page, so you could just target the title link by doing this:
#titleLink { ... }
The webpage title should be working as intended. However, I'd still recommend just using the ID. An element with relative positioning doesn't really appear different unless you've given it some style declarations:
#webpageTitle {
position: relative;
top: 10px;
left: 10px;
}
Hope that helps.
Remove the space in the selector.
img #titleImage means: any element with id titleImage and an <img> element as ancestor
img#titleImage means: an <img> element with id titleImage. That's what you want.
yeah, like this:
#one #two {
color: purple;
}
will select for:
<div id="one">
<div id="two"></div>
</div>
this is really not necessary though, because you are only supposed to have one id of the same name per page, so the selector #two {} would be fine by itself.
Yes, you can do that; it's perfectly valid. But it's also generally pointless, given that an ID has to be unique within a page, so just selecting the single ID ought to always be sufficient to select exactly the element you want; you shouldn't need any additional parent selector to qualify it, whether another ID or a class or anything else.
I can see one use case for it, where you have an element with an ID that is dynamic in where is appears in the page that could appear in different locations for whatever reason, and you want it to look different according to where it in the page it appears.
For that, it might be valid to have #id1 #id2 selector. But it's probably a fairly rare use case, and even for this usage, classes might be a more appropriate tool for the job.
If you have to, can you just toss it in there above your block? I'd really like to know what kind of system you're working with that limits you to not being able to edit the stylesheet...
<style type="text/css">#an1:checked + div {display: block !important;}</style>
<div class="span3">
<label for="an1">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>
Oh and for the record :checked is a pseudo-selector and can only be executed from within a stylesheet so what you're asking is impossible.
Edit: There's is a way you could do this.. again not favorable but it does the trick.
<div class="span3">
<label for="an1" onclick="document.getElementById('an1').style.cssText = 'display: block;'">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>
jsFiddle Example
Yes you can add selector in inline style.
here is example code
<a href="http://www.google.org/"
style="{color: #900}
:link {color: #00f}
:visited {color: #F00}
:hover {outline: 1px solid #333333}
:active {background: #00f}">...</a>
another example
<p style="{color: #090; background-color:#FF00AA; line-height: 1.2}
::first-letter {color: #900}">...</p>
Here is Documentation
but main disadvatage is not support all browser.
#navigation .navigationLevel2 li
{
color: #f00;
}
This will also work and you don't need the extra class:
#navigation li li {}
If you have a third level of LI's you may have to reset/override some of the styles they will inherit from the above selector. You can target the third level like so:
#navigation li li li {}
you should use id #footer and class .page1, .page2, .page3 etc. - it is a better attempt because you still got the same footer (so ID should be the same) and you just want to change something (which can be done using different classes)
EDIT: and a quick tip from me: be carefull of setting width: 100% and border: 1px solid black because border isn't computed in item's width unless you set box-sizing: border-box property
what do I mean is that if you have a 1024px wide screen, your footer with css that you have presented will be 1026px wide with 2px cropped on the right side
When you refer to an id or class in css, you must use the full name of the class or id you are selecting. For example, when you want to refer to a div element that has id="someid" you must write #someid { in your stylesheet to reference this div by id.
Anyway, you're thinking about it right but your syntax is a bit off. Here is what you might be looking for:
Copy/* common footer code goes here */
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
/* code specific for each page goes here */
#page1.footer
{
background-color: red;
font-color: white;
}
#page2.footer
{
background-color: blue;
font-color: white;
}
#page3.footer
{
background-color: white;
font-color: black;
}
Using two selectors in the same line is called selector chaining. In this case, you want to chain an id selector with a class selector.
Edit: Here is a jsfiddle.
Looking at your code, the obvious "bad habit" one could find is that the ids page1, page2, and page3 are all in the footer div of those pages, which is a bit confusing, as "page" doesn't exactly uniquely define a footer.
Make sure you only use one id of the same name on any page, and if you do use an id, it should describe that element uniquely.
As the others have said, it should be noted that recently it has become good practice to avoid using ids (except for javascript functionality). Using only classes whenever possible is now the standard. It's good to know how to preform selector chaining and of course proper syntax is always important.
It's perfectly fine to have inline CSS. Whether you should use inline CSS or simply set a unique ID for the page depends on the complexity and flexibility of the CMS you're using. Using inline CMS just means that you'll have to update the CSS from each individual page, rather than from a single source for all separate pages.
As for your second point, adding CSS to the head in a <style> tag is not bad practice. In fact, <style> is required to be a child of <head> in order to validate correctly. According to the HTML 5.2 specification, <style> can be a child of any element as long as it it scoped, though at the present date, Firefox is the only browser that can use the scoped attribute.
On top of this, using a <style> tag in the <body> could lead to a flash of unstyled content due to the way in which the page gets loaded. So if you use inline CSS, always do so in the head to both validate correctly, and improve user experience :)
Hope this helps!
In a word yes. For reasons of maintainability. You would be better using the cascading nature of css to target a style specific to a specific page than to have lots of inline styles.
For example, consider:
<body class="my-page">
<h1 id="myId">Title</h1>
<body>
<h1 id="myId">Title</h1>
h1#myId{ font-size:12px; }
body.my-page h1#myId{ font-size:14px; }
the latter style will have precedence. h1#myId would be global, yet on a specific page you can override this style. Is there no way to work out what template is in use, and adjust the body class?
you need this:
#ParentDiv label, #ParentDiv input { display: inline; }
A comma indicates a new selector statement.
Often, so that I remember what each of the selectors is, and to make it easier to see what elements are being selected at a glance, I will alphabetize and break the selectors on two separate lines like so:
#ParentDiv input,
#ParentDiv label {
display: inline;
}
Also, this should work just fine in IE 6/7/8, and is valid according to w3c.
For me, the above answer did not help me.
I wanted to style a table header so I had to append the table tag before the id like this:
table#table_id th {
width: 20%;
}I hope this will help someone down the line.