We can use Cascading Style Sheets (CSS) elements to provide design/style to an HTML or
an XHTML page. Since web-pages are (fairly) visual, a good web-page design would
go a long way in increasing the usability of your web application.
Becoming familiar with CSS allows you to do just that!
When we add a CSS style, we should broadly keep two things in
mind. First is the selection of an element (or elements) where we apply the
style. Second, is the CSS design that we would apply to the selected
element (or elements).
With that, let us see a simple example. The example (provided below) contains one CSS rule
that specifies designs
for font and color to paragraph (<p>) elements. What this rule says is that
if we have any <p> element on the HTML page, then the two design elements
would be automatically applied to them. Since the design is applied to all <p> elements
on the page, we do not have to add this design individually for each <p> elements.
This makes adding design in CSS far more scalable.
p {
font-family: Verdana, sans-serif;
color: blue;
}
CSS is all about rules. Fortunately, they are different than the ones that our parents
ask us to follow! When adding style to a page, we can have a large number of
CSS rules; they these rules would look similar to the one above.
Each CSS rule has several components. It is important to understand those. For that, let us
use the following figure to get to know the building blocks. This figure
breaks down the above CSS rule into its constituent elements.
Figure: Elements of a CSS RuleIn the above figure, the very first member is the element where we are going to apply
the design; in this case it is the <p> (paragraph) element. It is the first token (or
tokens) before the opening
braces and is referred to as the selector (or selectors). Following the selector, we have a pair of braces
that contains two lines. Everything that sits between these braces is the selector block.
In the above example, the block has two lines. Each line is called a declaration.
A block can have as many declarations as needed.
Each declaration provides a value to a specific style property. Thus, we can see each
line as a property/value pair that is separated by a colon. Do not forget that each declaration
line ends with a semi-colon. Together, all of these make up one CSS rule.
In case you are wondering, the "font-family" property takes one or more font types,
provided in the decreasing order of priority. With this property, we are saying that we
would like to use the "Verdana" font as our first preference. If that is
unavailable, then we are okay with "sans-serif"! The "color" property sets the text-color to the "blue".
In fact, we can use the same rule and apply it to more than one element! If we wanted to
extend the above rule beyond <p> element, then that is as simple as specifying additional
elements in the selector list and separate them with commas. With that, let
us extend the above rule to include not only paragraphs (<p>) but also ordered lists (<ol>) and
unordered lists (<ul>).
