Solved

CSS Style

Posted on 2014-11-19
4
154 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 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 150 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 350 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 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