IS1825: Developing Multimedia Applications for BusinessLecture 1: Introduction to CSS

Rob Gleasure

R.Gleasure@ucc.iehttp://girtab.ucc.ie/rgleasure/index.html

IS1825

Today’s class Directory navigation CSS syntax Inheritance in CSS Inline, Internal, and External CSS Exercise

Directory Navigation

We have already seen that HTML pages will often link to external pages and/or contain external images

Later in this lecture, we will also observe that, like images and related HTML pages, CSS data can be stored in separate external files

As such, this seems like a good time to have a look at how we navigate directories (folders)

Directory Navigation

Just as when we browse for files on the Web, we locate all files on our computer by referring to their URL (Universal Resource Locator) The only difference is that we don’t need to specify a transfer

protocol such as http when looking for files on our own machine

So far, we have been putting everything together in one folder (usually the desktop) and referring to any external files purely by their file-name this is actually a relative URL, i.e. we specify how to get to an external file from our current file location. When we just give a file-name, we are looking for files within the same folder

we can also use absolute URLs to locate external files

Directory Navigation

1. Relative URLs (Shows a partial address)

Relative URLs describe how to get to a file, relative to where we are now. To do this may require we move back out of the folder we’re in now and/or navigate through a series of other folders to get to the target file.

How do we do this? To enter a folder

i.e. the name of the folder followed by a forward-slash i.e. “/”

To retreat up one folderi.e. “../”

Directory Navigation

2. Absolute URLs (Shows the complete address)

The absolute URL of a file is its location on the computer. This is basically its address and is unchanged regardless of where you’re referring to it from, in the same way as the URL of a Webpagee.g.

“C:/Documents and Settings/All Users/Desktop/file.html”

Or more generically:“Root folder/next folder/specific folder/actual file.abc”

Note – make sure you use forward-slash, not back-slash

So if we have a file page.html in a folder Pages, and we want to reference Picture.gif in a folder Images…

1. What’s the absolute URL (assuming “IS4428” is the

root?)

2. What’s the relative URL from Page.html?

Directory Navigation

IS1811

Pages Images

Page.html Picture.gif

Directory Navigation

When would we use Absolute or Relative URLs?

Advantages of Absolute URLs Easy to move a website around within a machine Easier if you’re referencing something external to a machine

Advantages of Relative URLs Easy to transfer a web site from one machine to another Easier if you’re referencing something on the same machine

HTML 4.01

There are a number of versions of HTML HTML versions 1.0 and 2.0 were developed independently,

with W3C taking over to produce HTML 3.0 HTML 3.2 provided quite a large amount of in-built style

components, such as the <font> tag and the color attribute. These were relatively basic but their inclusion encouraged designers to neglect the more powerful, precise and robust CSS plug-in technology.

In HTML 4.0 all formatting can be removed from the HTML mark-up to CSS data – HTML style components are being depreciated

There is also XHTML, which is much stricter in syntax and HTML 5.0 is currently under development

We’ve been using HTML 4.01 transitional

Cascading Style Sheets (CSS) What are CSS?

Style sheets define how to display HTML elements Styles were added to HTML 4.0 to remove formatting from

HTML’s built-in (and limited) style components Multiple style definitions cascade into one All browsers support Cascading Style Sheets

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.

Note: If  the value is multiple words, put quotes around the Value, e.g.

p {font-family: "sans serif"}

CSS Syntax

If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a centre aligned paragraph, with a red text colour:

p { text-align: center; color: red }

To make the style definitions more readable, you can describe one property on each line, like this:

p {

text-align:center;color:red

}

CSS Grouping

You can group selectors by separating each selector with a comma. e.g.

h1,h2,h3,h4,h5,h6

{

color: green;

}

Here we have grouped all the header elements, such that headers will be displayed in green text colour:

Comments in CSS

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a comment */

p

{

text-align: center;

/* This is another comment */

color: black;

font-family: arial

}

Cascading Style Sheets

So how do we go about actually inserting CSS code into our HTML?

There are 4 kinds of style sheet

1. Default Style Sheets

2. External Style Sheet

3. Internal Style Sheet

4. Inline Styles

The default styles are set by the browser, so we will not be doing any altering to them per se. Nonetheless, it must be remembered that every HTML element has some style associated with them already.

Inheritance in Cascading Style Sheets When there’s a clash between style sheets, the style is used from

the more specific instancei.e.

Inline style

Internal stylesheetsLevel of priority

External stylesheets

Defaults

This means that, if an item has a style specified for it in an external style sheet, as well as in an internal style sheet, the style in the internal style sheet takes precedence

External Style Sheets

An external style sheet refers to an external file which has been written to accompany a page/set of pages

This is ideal when the style is applied to many pages.

Each HTML page using the style sheet must link to it using the <link> tag inside the head tag.

<head>

<link rel="stylesheet"

type="text/css"

href="mystyle.css" />

</head>

External Style Sheets continued…

The first thing we do is create a style sheet.

copy and paste in the following text

p {margin-left: 20px;}

body {background-color: rgb(188, 215, 246);}

Then we save the file as mystyle.css

External Style Sheets continued…

Next we open a new notepad and copy/paste in the following:

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

<body>

<h1> Lecture 7 page </h1>

<p> We’ll use this page to try out some CSS </p>

</body>

</html>

Now we save the page as lecture14.html in the same folder as mystyle.css

Internal Style Sheets

An internal style sheet should be used when a single document has a unique style

Internal styles go in the head element within a <style> tag See what happens if we copy the following into the head section of

lecture14.html, then save the page and refresh it in the browser

<head>

<link rel="stylesheet" type="text/css“ href="mystyle.css" />

<style type="text/css">

<!--

h1 {text-transform:uppercase;}

p {text-decoration:blink;}

-->

</style>

</head>

Inline Styles

Sometimes we only want to affect the style of a single element.

Copy the following into the <p> tag in lecture14.html, then save the page and refresh it in the browser

<p style ="text-transform:capitalize;"> We’ll use this paragraph to try out some inline CSS

</p>

Want to read more?

CSS tutorials http://www.w3schools.com/css/ http://www.tizag.com/cssT/

Evolution of HTML http://www.yourhtmlsource.com/starthere/historyofhtml.html