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.
There are three ways to insert CSS into your application: inline, or by using internal or external style sheets.
