beauty.css file. The rule will automatically come into effect for each and every HTML
document that includes it.
Let’s br ie fly summarize what w e have just learned. There are three types of CSS:
inline, internal, and external. Because of the ir nature, the only really useful one is
external CSS. Inline and internal CSS may be useful for quick experimenting to see
how the design might look.
There’s another good reason why you should stick to externa l CSS. It is considered
good design if you ph ysically separate stru cture and content from presentation, which
keeps your code cleaner and easier to maintain. So, even if there’s only a single
element in stance you need to style, it is still a good idea to put styling in an extern al
style she et.
If you don’t have any questions, then I think we are ready to move ahead.
Maria: I have a question. How does CSS treat spaces? Are they important?
Professor: In CSS, spaces have pretty much the same role as in HTML. Spaces and
newlines are important to make code more readable to humans. For example, I like to
put each declaration on a separate line , slightly indented to the right, and with a space
after the colon between a property and its value. It is of course up to you how you
design your writing. T he im portant thing is that you f eel comfortable with the layout
of the code.
There is, however, one tiny restriction concerning spaces: you shouldn’t put a space
between a number and the corresponding un it. For example, if you need to write a
value of 200 pixels, the correct form is 200px, but not 200 px.
If you are in dou bt, it is always a g ood idea to validate your code. Just b ecause it
works in one browser, it doesn’t necessarily mean it is correct and will work in other
browsers as well. The same as for HTML, there exist onlin e validators for CSS. For
example, you can use th e one at
jigsaw.w3.org/css-validator.
Before you ask: CSS is case insensitive in all aspects und er its control. U nfortunately,
everyth ing is not unde r its control and there are situations where case matters. So,
same as with HTML , I suggest that you stick to lower-case letters and you’ll be fine.
3.4 CSS Values
Professor: We learned that the most basic building block of CSS is a declaration,
which assigns a value to a certain property. A question arises: which values are al-
lowed for which properties? To answer it, let’s take a closer look at d ifferent types o f
values defined by CSS.
CSS values are categorized into different data type groups, and only values belong-
ing to certa in data types are allowed to b e used for certain properties. There are, for
example, data ty pes like <color>, which is used w henever you want to set any color
property, or <len gth>, used for setting differe nt sizes and dimensions. Don’t get con-
fused by the angle bracket notation, w hich resembles an HTML tag. In CSS, a ngle
brackets are used to denote a data type.
42 Meeting 3. Presentation
Let’s start with the most basic <number> and <integer> data types. The first repre-
sents a number, either in teger or fractional, w hile the latter represents only an integer.
Examples of <number> values would be 42, 1.6, or -12.5, while <integer> values
are, for example 7, 99, or -10.
Two more data types that will be useful for us a re <length> and <percentage>, used
for specifying dimensions and relative values, respectively. The <length> data typ e
is compo sed of a <number> immediately followed by the length unit, like px or em.
Similarly, the <percentage> data type is composed of a <number> immed ia te ly fol-
lowed by the percentage sign (%). I already mentioned that there should be no space
between a number and the unit literal. Nor should there be a ny space between a num-
ber and the percentage sign.
Mike: How does that look in practice?
Professor: OK, here ’s an example. If you loo k up the font-size property in the CSS
referenc e on page 344, you’ll see that a possible value for that property is a positive
< percentage> value. Because you know that the <percentage> data type is defined as
a <numb er> immediately followed by the percentage sign, you know exactly that the
following a re all valid declara tions giving a value to the font-size p roperty:
font-size: 75%;
font-size: 12.5%;
font-size: 120%;
Maria: And what exactly is the effect of setting a font size to 120 percent? 120 percent
of what?
Professor: Of the parent’s element font size. I’ll explain more a bout that next week
when we talk about relative sizes in genera l. Let’s return now to CSS data types.
An interesting one is the <url> data type, which lets you specify the URL of a file.
Most usually, that will be a file containing gra phics of some kind. For example, if you
want a nice picture in the backgrou nd of an element, you declare:
background-image: url(/backgrounds/nicepicture.jpg);
You must use the url() fu nction a nd put the desired URL in parentheses. You specify
a URL in the same way as y ou specify a URL of the hre f HTML attribute: you can
use either an absolute or document- or ro ot-relative URL. Note that relative URLs are
relative to the URL of the style sheet and not to the URL of the web page.
In the above example, there are no quotation marks around the URL. However, if there
are any spaces within a URL, then quote s must be used. You can either use single or
double quotes:
background-image: url(’/backgrounds/nice picture.jpg’);
background-image: url("/backgrounds/even nicer picture.jpg");
3.4. CSS Values 43
It is a good pra ctice that y ou choose one ty pe of quotes and stick to them consistently.
Apart from data types like <url> or <percentage>, there is also a special type of
values, called keywords. Keywords are used for values that fall under none of the
standard CSS data types, such a s, for example, left, right, center, and justify,
used for horiz ontal text alignment. For example:
text-align: right;
Other examples of using keywords would be specifying colors (for example, blu e or
silver) or even sizes (for example, large for the font-si ze property).
Speaking of colors, there exists a <colo r> CSS data type, which is a little more com-
plex than those we mentioned so far. The most-often used meth od for sp ecifying color
is the RGB model in which red, g reen, and blue light are added together in various
intensities to produce th e desired color. The name RGB com es from the initials of the
three primary colors: re d, gree n, and blue. There are three ways to specify RGB colo r.
The oldest in use is hexadecimal, where each of the thr ee primary colors is given an
intensity as a hexadecimal value from 00 to FF, wh ic h correspond to decimal values
from 0 to 255.
Mike: Excuse me, what’s hexadecimal?
Professor: Hexadecimal (also base 16, or hex) is a positional numer al sy stem with
a base of 16. It uses sixte en separate symbols, which consist of nine digits 0–9
to r epresent values zero to nine, and six (lower-case or upper-case) letters A–F to
represent values 10 to 15. Depe nding on the position of a symbol, its value can be
multiplied by different powers of 16, in the same way as the digits in a base-10 sys-
tem a re multiplied by the powers of 1 0. For example, AB7 in hexadecimal equals
10 × 16
2
+ 11 × 16
1
+ 7 × 16
0
= 274 3 in decimal. A is 10 and B is 11, of cou rse.
Now, let’s try to mix some outer space blue:
color: #414A4C;
You need to prepend a hash sign ( #) bef ore the thr ee two-digit hex values to announce
that we are d ealing with hexadecimal values. In the above example, we added together
red, green, and b lue with the hex intensities o f 41, 4A, and 4C, respectively.
Maria: It seems that you need a lot of experience to be able to produce the color that
you want. Isn’t there an easier way?
Professor: Every serious graphics program will let you select a colo r using your
mouse on a visua l palette. You simply select the color you want and copy the RGB
values to your style. There are also m any free color-picking websites available, for
example,
www.colorpicker.com. You can also pick a color from a list like the one at
www.colorhexa.com/color-names.
If you are not comfortable with hex numbers, you can still use the RGB model usin g
either three <integer> values between 0 and 255 or three <percentage> values from
44 Meeting 3. Presentation
0 to 100. The integer number 255 corresponds to 100%. Instead of a hash sign, you
must use the rgb() function and list the color intensities inside pa rentheses, sep arated
by commas. That way, the same outer space blue can b e defined a s:
color: rgb(65, 74, 76); /* Integers */
or, using percentages:
color: rgb(25%, 29%, 30%); /* Percentages */
Note that you cannot mix <integer> and <percentage> values within a single rgb()
function.
Mike: You mentioned that keyword s are also used f or colors. Which are they?
Professor: There are many of them. Apart from the 17 keywords defined by CSS2,
most browsers now support all of the colors defined by the SVG standard. The 17
CSS2 colors are: aqua, black, blue, fuchsia, gray, green, lime, maro on, navy,
olive, orange, purple, red, silver, teal, white, and yel low. If you would like
to know more about colors in CSS, then you may want to read about CSS <color>
data type at
developer.mozilla.org/en-US/docs/CSS/color_value.
As you see, there are many ways to specify colors and they all work fine. For con-
sistency, I suggest that you decide on one of them and stick to it. For example, I
prefer using hexadecimal notation with an occasional u se of keywords only for ba-
sic colors like white, black, red, or yellow, f or example. It is more convenient and
self-explaining to wr ite color: yellow; th an color: #FFFF00;
Maria: I have noticed that some pages use a special effect so you can see through
colors. Is that difficult to produce ?
Professor: Not at all. You simply ad d transparency to the RGB model using a so-
called alpha channel, which specifies the amount of transparency as a <number>
between 0 ( completely transparent and h ence invisible) and 1 (fully opaque). You
cannot express this model in hex notation. In stead, you use the rgba() f unction with
either three <integer> or three <perc entage> values for RGB values. As the fourth
value, you sp ecify a <number> from 0 to 1 for the alpha cha nnel. For examp le , a
semitransparent green color will be declar ed a s:
color: rgba(0, 255, 0, 0.5); /* Green, half transparent */
All right, enough colors. Let’s move on.
Maria: Just a question. I understand that CSS selectors a llow you to select an element
to which you want to apply the color. But how do you control which part of an element
will ge t the color? I mean, in all your examples you only used the c olor property.
What if you want to color just text, or just background?
3.4. CSS Values 45
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.