CSS Basics / First Tutorial

Cascading Style Sheets (CSS) is a formatting language that separates the presentation or style of the web page from its content. With CSS a consistant 'style' can be applied across many pages.

Although this is an introductory tutorial I assume you are familiar with HTML and have developed web pages. If you are not familiar with the development of internet pages using HTML or you have never heard of CSS before you need to learn the basics of web page development else where. Basic web development

If we try to understand the fundamental rules of the CSS formating language there are very few concepts to learn.

• First, we must identify the particular object or objects that we are 'styling'. An object is any one or more HTML tags. We begin with < style > inserted in the Head section of the HTML. followed by the objects we intend to assign styling properties to. We identify these objects according to the following rules:
  
  

  • Select a single HTML tag.
     
           Tag_name {
                    style_property : value ;
    	        style-property : value ;
    	        etc...
    	        }
    			
    This is any HTML element tag we want to style.	Place each style attribute and its
    assigned value between curly braces. Separate the style attribute from its value with 
    a colon and follow each line of style properties with a semi-colon. Paragraph tags <p> might
    be assigned lightblue backgrounds and black text like this:
            
    		p   { background-color: lightblue;
    		      color: black;
    		      )  	
    
           		  
    
    

  • Select multiple tags 
    
           Tag1_name, Tag2_name, Tag3_name, etc..  { style goes between the curly braces }                                           
    	                                   
    Here we want several tags to have the same style. Note the separating commas ! 												     
    
    

  • Select a tag with a particular class name
    
           Tag_name.Class_Name,  etc..  { style goes between the curly braces } 
                                       
    Here we have identified the tag when its class="cLass_Name". We assign the class
    attribute to the tag like this -- for example < p class='class-name' >											     
    
    

  • Select all tags with the same class name.
    
            .class_Name,  etc..  { style goes between the curly braces } 
          
    Here we have identified a class and any tag that has class="CLass_Name" will be selected.
    Note the period in front of the class_name.												     
    
    

  • Pseudo classes such as :hover may also be styled.
    
             :hover  { style goes between the curly braces } 
          
    In most browsers only anchor tags with the :link, :visited, :hover pseudo classes 
    can be styled. These pseudo classes are not HTML markup tags they are implemented in the
    style language.											     
    
    

  • You can use the class_name and pseudo class together so that:
    
            a.class_name:hover  { style goes between the curly braces } 
               
    This can be very helpful in separately identifying anchor tags in menu elements from
    anchor tags in the HTML body.											     
    
    

  • Tag elements that have id='unique_name' can be styled using '#'
    
            #unique_name   { style goes between the curly braces } 
                   
    If the element has a unique name I am not sure you would ever want to create a 'style' 
    in the <style> section of the web page -- it probably makes more sense to place the
    style attributes directly into the tag element like this <p id='unique' style='color:red; font-size: 14px;' > .										     
    
    

  • Obviously different tag elements with identical #id_name can be styled the same.
    Different tag elements with the same #id_name can be styled differently.So 
    
     		  tag_name1#unique_name   { style goes between the curly braces } 
                
                      and......
    				  
    		  tag_name2#unique_name  { style goes between the curly braces } 
                          
    As I commented above, the #id is typically unique in web page design so that scripting languages
    can deal with a HTML element. Style is usually applied across web pages to many similar tags. The 
    object selection described here is inconsistant with the general purpose of CSS but perhaps it may
    be useful in solving some future design problem.								 		  
    
    

  • The final HTML element selection rules enable complex tag selection based on
    the tags parent child relationship to other HTML elements.
    
     		 body div.divname p { style goes between the curly braces }
    		 
    This style would only be applied to <p> tags within the <div> element that has the class
    name 'divname' that is within the <body> tag. All other <p> tags would not be assigned
    this style. Notice that there are no commas. If we added a comma after p we could list another tag
    that could share the style if it too was the child of the div class and body.								 		  
    
    

  The nine concepts discussed here are the basic formatting rules of CSS. If you create selection conflicts or import one style later than another the last style defined will generally take precedance.
  
  The selection rules can become complex and there may some exceptions to application of a rule but these nine rules are all you need to begin using CSS in your web pages.
  
  
• The attribute 'class' and the attribute 'id' were identified in the style section with the period and the number or pound sysbol. So that '.some_class_name' identified any tag with the class='some_class_name' and the '#some_id_name' identified any tag with the id='some_id_name'.
  
  Three comments may clarify the use of these attribute identifiers.
  
  
  • Class is the broader identifier and Id is the more specific. There is nothing to stop you from adding the same Id attribute to several tags on the same page but it is not encouraged. If you also add the same 'class' identifier to some of the tags you will find that the style properties of the 'id' attribute takes precedance over the 'class' properties.
  
  
  
  • The class attribute may have more than one name. Within a tag element you may have class='name1 name2 name3' each separated by a space. Then in the style section we can create a style for .name1 and separate style for name1.name2 and a third style for .name1.name2.name3 class. This has powerful effects and can produce complex results. Multiple class names for a tag element may result in style properties that are quite unexpected. We do not have the time or space to discuss this issue here.
  
  
  
  • The third comment relates to the 'name' attribute. Tag elements can have 'name' attributes and this attribute may identify the tag element for scripting or other purposes but it not recognized by the CSS formating language.
  
  
  
  
• Our next tutorial will deal with the attributes and values with which HTML elements can be styled after you have selected them.