Basic CSS principles

CSS or Cascading Style Sheets is a language used to describe how HTML elements should be displayed on a web page. For instance, CSS is often used to define common styling elements for a page or set of pages such as the font, background color, font size, link colors, and many other things related to the visual design of a web page:

<style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
       #map{ 
         padding:0;
         border:solid 2px #94C7BA;
         margin:5px;
       }
       #header {
         border: solid 2px #94C7BA;
         padding-top:5px;
         padding-left:10px;
         background-color:white; 
         color:#594735; 
         font-size:14pt;
         text-align:left; font-weight:bold;
         height:35px;
         margin:5px;
         overflow:hidden;
       }
       .roundedCorners{
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
       }
       .shadow{

         -webkit-box-shadow: 0px 4px 8px #adadad;
         -moz-box-shadow: 0px 4px 8px #adadad;
         -o-box-shadow: 0px 4px 8px #adadad;      box-shadow: 0px 4px 8px #adadad;
       }
</style>

CSS syntax

CSS follows certain rules that define what HTML element to select along with how that element should be styled. A CSS rule has two main parts; a selector and one or more declarations. The selector is typically the HTML element that you want to style. In the following example, the selector is p. A <p> element in HTML represents a paragraph. The second part of a CSS rule is one or more declarations, each of which consists of a property and a value. The property represents the style attribute that you want to change. In our example, we are setting the color property to red. In effect, what we have done with this CSS rule is to define that all text within our paragraph should be red p {color:red}:

Here is an example of a CSS rule:

p {color:red;text-align:center} 

You can include more than one declaration in a CSS rule as you see in the preceding example. A declaration is always surrounded by curly brackets and each declaration ends with a semicolon. In addition, a colon should be placed between the property and the value. In this particular example, two declarations have been made; one for the color of the paragraph and another for the text alignment of the paragraph. Notice that the declarations are separated by a semicolon.

CSS comments are used to explain your code. You should get into the habit of always commenting your CSS code just as you would with any other programming language. Comments begin with a slash followed by an asterisk and end with an asterisk followed by a slash. In this way, they are identical to block comments in JavaScript. Everything in between those markers is assumed to be a comment and is ignored by the browser:

/* 
h1 {font-size:200%;} 
h2 {font-size:140%;} 
h3 {font-size:110%;} 
*/ 

In addition to specifying selectors for specific HTML elements, you can also use the id selector to define styles for any HTML elements with an id value that matches the id selector. An id selector is defined in CSS through the use of the pound sign (#) followed by an id value.

For example, in the following code example you see three id selectors: rightPane, leftPane, and map. In ArcGIS API for JavaScript applications, you almost always have a map. When you define a <div> tag that will serve as the container for the map, you specify an id and assign it a value which is often the word map. In this case, we are using CSS to define several styles for our map including a margin of 5 pixels along with a solid styled border of a specific color and a border radius:

#rightPane { 
    background-color:white; 
    color:#3f3f3f; 
    border: solid 2px #224a54; 
    width: 20%; 
} 
#leftPane { 
    margin: 5px; 
    padding: 2px; 
    background-color:white; 
    color:#3f3f3f; 
    border: solid 2px #224a54; 
    width: 20%; 
} 
#map { 
    margin: 5px; 
    border: solid 4px #224a54; 
    -mox-border-radius: 4px; 
} 

This results in the following layout:

Unlike id selectors which are used to assign styles to a single element, class selectors are used to specify styles for a group of elements, all of which have the same HTML class attribute. A class selector is defined with a period followed by the class name. You may also specify that only specific HTML elements with a particular class should be affected by the style. Examples of both are shown in the code example as follows:

.center {text-align:center;} 
p.center {text-align:center;} 
 

Your HTML code would then reference the class selector as follows:

<p class="center">This is a paragraph</p> 

This approach is useful if you want to group the styling of several HTML elements which are of different types.

Note

There are three ways to insert CSS into your application: inline, or by using internal or external style sheets.

Inline styling

One way of defining CSS rules for your HTML elements is through the use of inline styles. This method is not recommended because it mixes style with presentation and is difficult to maintain. It is an option though in some cases where you only need to define a very limited set of CSS rules. To use inline styles, simply place the style attribute inside the relevant HTML tag:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Now let's put some emphasis on the cascading of cascading style sheets. As you now know, styles can be defined in external style sheets, internal style sheets, or inline. There is a fourth level that we didn't discuss which is the browser default. You don't have any control over that though. In CSS, an inline style has the highest priority, which means that it will override a style defined in an internal style sheet, an external style sheet, or the browser default. If an inline style is not defined then any style rules defined in an internal style sheet would take precedence over styles defined in an external style sheet. The caveat here is that if a link to an external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal sheet!

Internal style sheet

An internal style sheet moves all the CSS rules into a specific web page. Only HTML elements within that particular page have access to the rules. All CSS rules are defined inside the <head> tag and enclosed inside a <style> tag, as seen in the code example as follows:

<head>
     <style type="text/css"> 
        hr {color:sienna;} 
        p {margin-left:20px;} 
        body {background-image:url("images/back40.gif");} 
    </style> 
</head> 
 

External style sheet

An external style sheet is simply a text file containing CSS rules and saved with a file extension of .css. This file is then linked into all web pages that want to implement the styles defined within the external style sheet through the use of the HTML <link> tag. This is a commonly used method for splitting out the styling from the main web page and gives you the ability to change the look of an entire website through the use of a single external style sheet.

These are the basic concepts that you need to understand with regard to CSS. You can use CSS to define styles for pretty much anything on a web page including backgrounds, text, fonts, links, lists, images, tables, maps, and any other visible objects.

Note

That's a lot to remember! Just keep in mind that style rules defined further down in the hierarchy override style rules defined higher in the hierarchy.