Introduction to CSS Measurement Measurement 3 Measurement units - - PDF document

▶

Oct 11, 2022 211 likes •284 views

Introduction Introduction to CSS to CSS Lars Larsson Lars Larsson 1 XHTML tree model Today Today XHTML tree XHTML tree 2 CSS syntax model model CSS syntax CSS syntax Introduction to CSS Measurement Measurement 3 Measurement units

SLIDE 1

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Introduction to CSS

Lars Larsson Lecture #3

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

1 XHTML tree model 2 CSS syntax 3 Measurement units 4 Selectors 5 Colours 6 Fonts and text 7 Summary

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

XHTML tree model

Computer scientists love trees! However, we consider a tree to be a data structure consisting of nodes in a hierarchy. Nodes are related to each other as ancestors and offspring. Nodes without offspring are called leaves. Nodes without ancestors are called root nodes. Child nodes with a common parent node are called siblings.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

XHTML trees continued

There are many types of trees in computer science, but we will

nly deal with the kind that can be used to represent an

XHTML document. In this case, children are ordered. Thus, we can state that child A comes before child B. If the children were unordered, we would not be able to do so. This tree concept will be very important in both CSS and JavaScript.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

XHTML trees example

The following figure shows how we might represent a very simple web page as a tree. Think about the relationship between nodes!

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

CSS basics

The principle of CSS is to allow us to select certain elements in

ur XHTML tree, and declare new values for properties related

to the elements. For instance, we can find all paragraphs of text and justify them on both sides. To do this, we need to study the syntax of CSS.

SLIDE 2

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

CSS syntax

The basic syntax of CSS is as follows: selector { property: value; } We can specify any number of properties and values between the curly braces, in the declaration part. To apply the same declarations to many elements, we may write the selector part as a comma separated list.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

CSS example

Let’s look at the first example. We are using an external style sheet file (we’ll learn more about different ways to include CSS later). Open example-first.xhtml and look at the source of the XHTML file and the CSS file example-first.css. Don’t worry if you don’t understand everything in the code at this point!

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Inheritance

Note how all text was adjusted to the font-size property that we applied to the <body> section. This is an example of inheritance: elements inherit styles from their ancestors (remember the tree) – if there are more specific rules, these will be applied as well, possibly overriding the inherited ones.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

CSS placement

Style sheets can be either internal, external, or inline. Internal means that we provide the entire style sheet in the same file as the XHTML code. External style sheets are placed in a different file and, via a tag, included into the XHTML code. Inline styles are placed in the style attribute of the tag whose appearance we want to redesign.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Internal CSS

We place internal style sheets in the <head> section: <head> <style type="text/css"> h1 { color: red; } </style> </head>

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

External CSS

Say that we have our CSS in a file called style.css. It is included like this (again in the <head> section): <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> The <link /> tag links two documents together, and rel describes the relationship between them.

SLIDE 3

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Inline styles

If we want to give a specific single tag a style, we can do it like this: <p style="text-align: justify;">hello</p> This is very bad (what happens when you change your mind and you have to edit a large site?), and you should avoid it at all costs.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Comparison

External style sheets should always be your first option:

the XHTML source is smaller and easier to read,
redesigning a huge web site simply means that you alter

the CSS file,

we can define several style sheets and let the user choose

which one should be used,

we can display different style sheets based on media type,

which we will see during the next lecture and

CSS files can, in turn, include other CSS files, allowing you

to use a modular approach.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

CSS units of measurement

We have three types of units of measurement:

absolute units,
relative units and
percentages.

Percentages are the most straight-forward: p { font-size: 120%; } Percentages are relative to the reference element (the element itself or the containing element).

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Absolute units

We may use the following absolute units of measurement:

pt – a point, which is

1 72 of an inch.

pc – a pica, which is

1 12 of an inch (12 points).

cm – a centimetre.
in – an inch.
mm – a millimetre.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Relative units

Relative units may change depending on the size of the display

n which they are shown.
px – a pixel, useful for positioning elements precisely.
em – corresponds to the font size of the reference element:

if we use 20px font size for text, a header with size 1.5em would be 30px. The width of the letter m is used for reference.

ex – the height of the lowercase letter x.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Selectors

We have several selectors at our disposal:

* – universal selector: matches all elements,
Simple/type selector – matches all elements of the given

type (tag name),

Class and ID selector – used to select a subset of elements
f possibly the same type, based on their class or id values,
S1 > S2 – child selector: matches any element described

by S2 that is a child of S1 (poor browser support) More on the next slide!

SLIDE 4

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Selectors continued

S1 S2 – descendant selector: matches S2 such that it is a

descendant (may be a distant descendant) of S1,

S1 + S2 – adjacent sibling selector: matches any S2 such

that it is the next sibling (tree model!) of S1 (poor browser support)

attribute selectors – matching elements based on

attributes.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Class selector

We’ve already seen the class selector in action during the first

example. It allows us to select elements based on their class
attribute. The syntax is simple:

.classname { ... } tagname.classname { ... } The first matches any tag with the given class name, the second only tags of the specified type and the given class name.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

ID selector

In XHTML, we can provide elements with IDs using the id

attribute. Elements may not have the same ID, they must be
unique. We can apply style declarations using the following

syntax: #idname { ... } tagname#idname { ... } The difference between these two is similar to the class selector case. Since only one element on a given page may have a certain ID — when could the tagname#idname format be useful?

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Descendant selectors

Say that we have an unordered list containing hyperlinks. If we want to give these links a new style, without changing the ones in paragraphs of text, we may use the following selector: li a { ... } This will match only such <a> elements that are descendants of <li> elements.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Attribute selectors

We often want to select elements based on attributes:

tagname[attr] – selects all tagname elements that have

the attribute named attr set, regardless of its value

tagname[attr="value"] – only those named elements

where the named attribute has the given value,

tagname[attr~="value"] – named elements where the

specified value appears in the named attribute somewhere in a list of values, where the values are separated by whitespace,

tagname[attr|="value"] – named elements whose

named attribute starts with the value specified.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Selector examples

All those selectors can be a mouthful – let’s look at an

example. Note that we will not use all selectors, since browser

support is lacking for some of the more advanced. Look at example-selectors.xhtml and example-selectors.css now.

SLIDE 5

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Validation

Thankfully, the W3C has created not only an XHTML validation service, but one for CSS as well. We can use it to make sure that we always write valid CSS with correct syntax. The validator is available here: http://jigsaw.w3.org/css-validator/ Before handing in assignments or uploading a web page, always make sure that your CSS is valid!

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Colours

There are three main ways to specify colours in CSS:

by colour values in RGB (red, green, blue) format,
by one of W3C’s 16 standard standard colour names or
by one of 150 cross-browser colour names (will be

displayed correctly, but are not part of the CSS standard and fail validation).

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

RGB colour values

Colours in RGB format are specified in an additive way, and we specify the intensity of each of the components red, green and blue. Additive meaning that the colour black has intensity (0, 0, 0) and that white has the maximum intensity of the components. Intensity is a number between 0 and 255, thus giving us 2563 (about 16 million) different colours to choose from.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

RGB colour values continued

RGB colour values are represented in CSS either in this format: p { color: rgb(0, 200, 0); }

r, equivalently, in hexadecimal notation:

p { color: #00C800; } Use the one you are most comfortable with. Any image editing program will be able to tell you the RGB value of a colour in both formats, so use the palette to find the values you like. Play with this on your own, we do not have time to cover how the RGB model works in class.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Named colours

The 16 colours in the CSS standard are the most basic and common ones, such as red, white, black. Both these standard colours and the cross-browser compatible colours that fail validation (which means that you shouldn’t use them, just be aware of their existence) are available here: http://www.w3schools.com/css/css colors.asp

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Web-safe colours

Back when computer displays were not as advanced and could

nly display 256 colours at a time, a palette of 216 colours was

created – allowing for 6 shades of red, green and blue. While not something you really need to worry about these days for computer displays, it is good to remember that our images might look bad on other devices such as cellphones. Sticking to the basic 216 web-safe colours might in such cases be a good idea.

SLIDE 6

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Fonts and text

CSS contains an impressive amount of properties regarding font sizes and styles. We will not cover these here and now, just mention a few points worth noting. You should go to the following web site to find a complete reference on fonts and text properties: http://www.w3schools.com/css/css text.asp

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Font lists

When choosing a font to use, we may specify a list of fonts. Since not all computers have all fonts installed, we should always at least specify which general type of font we want to

use. The types are as follows:
serif – fonts that have “hats and tails” on letters, such

as Times New Roman

sans-serif – fonts with straight edges to letters, such as

Verdana and Arial

monospace – fonts where all letters are equally wide,

typically looking like typewriter text

cursive – fonts similar to handwriting
fantasy – decorative fonts

See example-fonts.xhtml for an example of these font types. Note that browser support for all of these may be lacking.

Introduction to CSS Lars Larsson Today XHTML tree model CSS syntax Measurement units Selectors Colours Fonts and text Summary

Summary

Today, we have taken a peek at how XHTML documents may be represented by a tree structure (this will be important later, when we do JavaScript), and some basics on CSS. We can change the appearance of fonts and colours of elements, and we know how to link CSS documents to XHTML. Next time, we study the incredibly important CSS box model, that lets us do basic actual web design!