Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Style

Posted on 2014-11-19
4
Medium Priority
?
163 Views
Last Modified: 2014-11-20
Why some css attribute need # while some don't ? Any special meaning for "." in css ?


<style type='text/css'>
       <!--
       legend {
         font-weight: bold;
         font-size: 1.2em;
         margin-bottom: .5em;
         }
       #wrapper {
         margin: 0;
         padding: 0;
         }
       #field {padding-bottom: .5em;}
       .errors {
         font-weight: bold;
         font-style: italic;
         font-size: 90%;
         color: red;
         margin-top: 0;
         }
        -->
     </style>
0
Comment
Question by:AXISHK
  • 2
4 Comments
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 600 total points
ID: 40454379
'#' is for 'id', '.' is for 'class'.  'id's are supposed to be unique on a page because they are also used by javascript.  'class' is a general style that can be applied to many elements.  Tutorial here: http://www.w3schools.com/css/default.asp
0
 

Author Comment

by:AXISHK
ID: 40455078
"ul li"   and "ul li.level2" - what does it mean ? Tks
 
      ul li {
         list-style: none;
         font-weight: bold;
         padding-top: .5em;
         font-size: 1.2em;
         }
       ul li.level2 {
         margin-left: -1em;
         font-weight: normal;
         font-size: .9em;
         }
0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 1400 total points
ID: 40455250
"ul li" would apply to any "li" within any "ul" regardless of ID or CLASS assigned to them.  Getting more specific, "ul li.level2" would apply to any "li" within a "ul" only if that "li" has a class of "level2".  Remember that these will add to each other, not replace each other.

Like so:
<ul>
 <li>This gets the style from "ul li" only</li>
 <li class="level2">This gets the style from both, because it is an li AND it is an li.level2.  Because there is overlap in the styles, this li will have list-style: none, font-weight: normal, padding-top:.5em, margin-left:-1em and font-size: .9em</li>
</ul>
0
 

Author Closing Comment

by:AXISHK
ID: 40456506
Tks
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question