All CSS style rules are constructed using this general syntax

selector{

             property:value;

            ...

}

selector defines which elements the style will apply to.

property:value pairs define the styling.

More then one selector can refer to an element type. The same styling can be applied to multiple element types by using multiple selectors, separated by commas.

ID selectors apply to specific elements (usually major page divisions) on the page.

i.e.   #wrapper{ ....}

in the html code this would be referenced

<div id="#wrapper">

.....

</div>

An ID name can be used only once on an html page.  There can be multiple different ID's but #wrapper can be used only once in the page.

class names are when you want multiple items on a page to share the same style. A style class is used to style the class. A class refers to many items.

In the CSS code you proceed the class with a period. This lets the browser know that you are creating a class. i.e.

.classname{

            property:value;

          }

The classname must start with a letter and have no spaces.  It is case sensitive.

In the HTML portion of the code

Do not use the period when creating a class in html code. It would be class="classname" This goes in the opening tag of the element you want the class to apply the styling.

  An example might be <span class="hilite">x....<span>

Where the letters between to span would be treated with the properties of the hilite class created in the CSS code.

Some selectors may only contain the class name.  These are called generic class selectors. They can be applied to any tag.  They are not attached to any element. 

i.e.

For the CSS

.raised{

           border:solid 1px gray;

          border-radius: 5px;

          box-shadow: 5px 5px 5px gray;

         }

For the HTML

<img src="/jm1/location of the image" alt="Image name" width="200"  class="raised">

If one where to start the class with img.then class name it would apply only to images no other type of element. 

More then one class can be applied to an element as long as they are separated by a space within the " " marks.

 

Comments (0)

500 characters remaining

Cancel or