different and is a matter of server settings. The index.html file is a p age that opens by
default when someone visits your we bsite without exp licitly writing a file name at the
end of a URL.
Now, if you want to test yo ur pages, re name yo ur main page to
index.html and copy
all the files and directories to the aforementioned
localweb directory. Don’t forget to
start EasyPHP. When you do, you will find the Ea syPHP icon on the Windows taskbar,
beside the clock and date in the lower right corner of your screen. If you hover the
mouse pointer over the icon, the tooltip should say “EasyPHP (Started)”. I f you right-
click the icon, you will get a menu of options. It is very important that you do not open
your web pages by simply opening the files in a web browser. Instead, you right-click
the EasyPHP icon and select
Local Web from the menu. In place of file:// /C:/..., you
will now see the
127.0.0.1/... at the beginning of your web address in the browser’s
address b ar.
Mike: Can we try opening our last homework through a server?
Professor: Why not indeed! Just rename your homework file
index.html, copy it to
localweb, select Local Web from the E asyPHP menu, and here we go.
You will notice that index.html does not appear in the browser’s address b ar. By de-
fault, the Apache server is configured to hide nam es of files that it recognizes as default
index files.
The menu looks quite ugly, doesn’t it? You cannot expect it to look any different
because we’re looking at the browser’s default rendering of a <ul> element. I think
it’s time now to do some sty ling.
3.3 Introducing CSS
Professor: Our second lang uage in this course is CSS, which stands for Cascading
Style Sheets. The lang uage belongs to the group of so-ca lled style sheet lan guages,
whose job is to take care o f the presentation of structured documents, such as HTML
documents.
In a nutshell, CSS does just one thing: it tells the browser h ow things should look on
a screen, which is called styling. Just like HTML, CSS has its own syntax, wh ic h is
38 Meeting 3. Presentation
extremely simple. For example, if you want to paint something b lue, you simply say:
color: blue;
Or, if you want something 200 pixels wid e:
width: 200px;
The above are examples of a CSS declaration. A dec la ration is composed of a property
and a value, separated b y a colon (:) and terminated by a sem ic olon (;). A declaration
simply gives a certain value to a certain property.
Mike: I assume that there is a list of CSS proper ties we can use.
Professor: Of cou rse there is. You’ll find a short CSS reference at the end of this book
where you can find descriptions of some of the CSS properties and the values these
properties can assume.
Maria: How do you tell the browser wh ic h element it is wh ose color and width you
want to set?
Professor: There’s more than one way to skin a cat, actually. The simplest way is to
put the declaration in the right place inside the HTML document. Where would you
put it? Give it a shot.
Maria: Perhaps inside the e le ment I wanted to style?
Professor: Close, but not quite. Inside an element is where you put the element’s
content.
Mike: I recall that the class HTML attribute is used for styling, isn’t it?
Professor: It is, altho ugh you cannot use the class attribute for writing CSS declara-
tions directly. We are comin g close, though: a logical place to put a CSS declaration
is to write it as the value of an HTML attribute. Only the attribute is not class but
style. Both are global attributes and can be used on any HTML element.
For example, if you want the main heading text to look blue, you write:
<h1 style="color: blue;">God, I Feel Blue Today!</h1>
Don’t f orget to use quotes. Of course, you can apply more declarations at the same
time by simply writing one after the other, separated by spaces:
<h1 style="color: blue; width: 200px;">God, I Feel Blue Today!</h1>
Mike: Will a ll ma in headings in the document now bec ome blue and 2 00 pixels wide?
Professor: No, they won’t. And, for the most part, that’s not very convenient.
3.3. Introducing CSS 39
This kind of CSS declaration is called inline because it is written insid e the opening tag
of an element. In line CSS isn’t very usefu l. In order to set or change some property of
all the elements o f the same type on on e page, you must write a declarations for e ach
of the elements separate ly. If you have lots of pages, y ou will really work yourself up
into a lather to style all of the elements.
In practice, you will exclusively use CSS rules (also called styles). A rule co nsists
of a selector and a declaration block. A declaration b lock is simply one or more
declarations enclosed within a pair of curly brackets. However, the real secret hides
in a selector, which we are going to unravel later. For n ow, we’ll u se the simple st of
selectors, which is simply the name of the HTML element you want to style. H ere’s
an example of a CSS rule:
Selector Declaration Block
First Declar ation Second Declar ation
Property Value Property Value
h1 { color: blue; width: 200p x; }
With the h1 selector, you select all the main hea ders in a d ocument and apply the
declarations within the declaratio n block to all of them simultan eously, which saves
you a lot of work.
Mike: Where do we put a rule to make it work?
Professor: You have two possibilities. T he first one is c alled an internal style shee t,
meaning that y ou place CSS rules in the same document you’re styling. CSS rules
come inside a <s tyle> HTML element placed inside docu ment’s <head>. Most d e-
signers plac e <style> elements just b efore th e closing </head> tag. For example:
<head>
<!-- ...
Here come other metadata elements not shown
in this example. ... -->
<style>
h1 { /* Selector and opening brace */
color: blue; /* First declaration */
width: 200px; /* Second declaration */
} /* Closing brace */
</style>
</head>
In the above exam ple, I used comments to explain different parts of the rule. Note
that, inside a <style> element, you should write CSS an d not HTML code. Differ-
ently from HTML, a CSS comment starts with a slash-asterisk pair (/*) and ends with
an asterisk-slash pair (*/). A comment can, of course, span over multiple lines. Same
as in HTML, comments are completely ignored by the browser. Remember that you
can use comments—apart from clarifying parts o f complicated CSS code or making
general remark s ab out the code—also for temporarily switching off certain declara-
40 Meeting 3. Presentation
tions or rules you don’t want to delete c ompletely because yo u may need them back
in the future.
Mike: OK, fine. If I understood this correctly, then I still have to manually apply a
style to each and every page of my complete website. That’s still a lot of work, isn’t
it?
Professor: You’re p erfectly right. Even thou gh a rule will ap ply to many eleme nts on
the page, we still haven’t achieved much if the re are lots of pages. That’s one of the
reasons why internal style sheets aren’t very popular either.
The second possibility to include CSS rules is an external style sheet. This is a separate
plain text file containing one or many CSS rules, which you can inclu de in any H TML
document using a <link> HTML element. An extern al style sheet should not contain
any HTML code, so don’t include the opening and closing <style> tags. You can
name the file whatever you want, yet it is a good idea to use de scriptive names. Also,
be sure to use the
.css file extension. For example, you can create a plain text file
named
beauty.css con ta ining the next CSS code:
h1 {
color: blue;
width: 200px;
}
You include this file in your HTML document using a <lin k> HTML element, nor-
mally as the last child of the <head> element:
<head>
<!-- ...
Here come other metadata elements not shown
in this example. ... -->
<link href="/css/beauty.css" rel="stylesheet">
</head>
The href attribute specifies the URL of the desired external sty le sheet and can accept
absolute a s well as document- relative or r oot-relative URLs. The rel attribute names
the type of the linked resource and must be set to style sheet if you’re linking to an
external style sheet. If you want, you can include multiple external style sheets simply
by u sin g multiple <link> elements one after the other.
Mike: You saved the
beauty.css inside the css directory. Is that necessary?
Professor: Actually no. Yet, as your website grows, you’ll find it gr eat if you can
group files into different directories so you can manage them more easily. I created
the
css directory inside the website ro ot to h old all my styling files.
Consider now that you have tens or even hundreds of pages styled by the above rule.
If you change your mind a bout the width of the main headings, all you have to do
is change the value of the width property inside one single rule contained in the
3.3. Introducing CSS 41
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.