Introdução ao CSS

Introduction to CSS

1

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 using CSS). 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 of the 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 capabilities you 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 their capabilities 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 an international 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 display each 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 and attributes, you can modify the style of each element on your page.

Introduction to CSS

2

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. You can 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 greater design 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; border: thin black ridge; font-family: Franklin Gothic Book; } It is actually completely readable – this style sheet defines that all content within the HTML BODY element will use font Verdana with size of 9 points and will align it to the right. But, if there's a DIV element, the text within that will be written in font Georgia. We're also using a class named "important" (classes use "." notation, which we will cover later on). All elements of this class will have a set background color, a border and will use Franklin Gothic Book font. As you see, style definitions for a certain element or class are written inside curly braces (“{ }”) and each line ends with a semicolon “;”.

Now is the perfect time to explain the scoping of styles. All CSS definitions are inheritable – if you define a style for BODY element, it will be applied to all of its children, like P, DIV, or SPAN elements. But, if you define a style for DIV element, it will override all styles from its parent. So, in this case, the DIV element text would use

Introduction to CSS

3

font Georgia size 9 points and would be aligned to the right. As you see, DIV style definition for the font family has overridden BODY style definitions. This goes on – if you have a DIV element which is also of class "important", the class definition will override DIV style definitions. In this case, such DIV element would have a background color set, a border, it would use font Franklin Gothic Book size 9 points and be aligned to the right. Here are the elements that would be affected by the sample CSS file. <html> ... <body> Body text goes here. Lorem ipsum dolor sit amet. <div>Div text goes here. This text is written in a different font.</div> Body text continued. <div class="important">This is very important!</div> Body text continued. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </body> </html> And, of course, the browser would show this content as follows.

Let's go to the next step – how to connect a CSS file with an HTML page. Go ahead and open Microsoft Visual Web Developer 2005 Express Edition (you can download and install it from http://msdn.com/express/vwd). Select File | New File and choose “Style Sheet” from among the Visual Studio installed templates. Copy and paste the CSS sample above into this file and save this file as “style.css” into a folder on your

Introduction to CSS

4

computer. Now select File | New