Ing Sistemas

Introduction to CSS

Introduction to CSS
Luka Abrus
Technology Specialist, Microsoft Croatia

CSS, or Cascading Style Sheets, have brought a completely new view on Web page
design and development. Using CSS you can completely separate text displayed on a
Web page (which is created in HTML code) and information that describes how to display
and present that text (which is defined usingCSS).
CSS has been introduced to solve problems and help you save time, while giving you
more possibilities in designing the way your Web pages look. Although this might be the
first time you’ve heard about CSS, you've already seen it in action many times before.
Here's one typical example: some Web pages highlight their links in a specific way. They
are in a different color than the rest ofthe text, but if you move the mouse over them,
they change color or become underlined. That has been done without touching HTML
code, but rather with using style definitions. We'll cover such an example later in this
guide.
To be able to follow this guide, you need to have some prior knowledge of HTML. We will
use HTML code as the basis and then build on it showing you what other capabilitiesyou
have when displaying and presenting page content.

What is CSS?
Since the beginning of HTML usage for web page creation, people have realized the need
to separate the way the page looks and the actual content it displays. Even the first
versions of HTML have supported different ways to present text using FONT, B (bold) or
I (italic) tags. Those HTML elements still exist today, but theircapabilities are far below
what Web pages should provide.
As we've already said, CSS enables you to separate the layout of the Web page from its
content. This is important because you may want the content of your web page to
change frequently (for example, a current events page) but not the design/layout, or
vice versa. It is a standard of the World Wide Web Consortium (W3C), which is aninternational Web standards consortium.
Practically, all the style and layout guidelines for a website are kept in CSS files that are
separate from the HTML files which contain the data, text and content for a website.
Simply put, when talking about displaying Web pages in the browser, HTML answers the
question "What?", while CSS answers "How?".
When using CSS, you are defining how to displayeach element of the page. You can, for
example, say to show all text in DIV elements in blue color, to have all links italic and
bold, etc. With CSS you can also define classes, which tell the browser how to display all
elements of that class.
Maybe you're asking yourself, why bother with CSS? Isn't it much simpler and faster to
define everything inside the HTML page? Using HTML tags andattributes, you can
modify the style of each element on your page.

1

Introduction to CSS
But what if you have a Web site with a larger number of pages, let's say 50? Imagine
the process of setting the style for each element on your 50 pages. And then, if later on
down the road you want to change the font style, you’ll have to manually go through
each file and change all the HTML elements. Youcan count on a very long, boring and
tiring process!
With CSS you can put all the information about displaying HTML elements in a separate
page. Then you can simply connect this CSS file with all pages of your Web site, and
voilà – all the pages will follow the same guidelines. Change the CSS file, and you have
indirectly changed all pages of your Web site. In addition, you get much greaterdesign
capabilities with CSS, as we will show in this guide.

How do I use CSS?
Let's get started with using style sheets. CSS data is actually plain text written in a
specific way. Let's take a look at the contents of a sample CSS file:
body
{
font-family: Verdana;
font-size: 9pt;
text-align: right;
}
div
{
font-family: Georgia;
}
.important
{
background-color: #ffffde;...