IS1825: Developing Multimedia Applications for Business Lecture 1: Introduction to CSS Rob Gleasure

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 folder i.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 Webpage e.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 PagesImages Page.htmlPicture.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 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 instance i.e. Inline style Internal stylesheets Level 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 tag inside the head tag. <link rel="stylesheet" type="text/css" href="mystyle.css" />

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: Lecture 7 page We’ll use this page to try out some CSS 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 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 <!-- h1 {text-transform:uppercase;} p {text-decoration:blink;} -->

Inline Styles Sometimes we only want to affect the style of a single element. Copy the following into the tag in lecture14.html, then save the page and refresh it in the browser We’ll use this paragraph to try out some inline CSS

Want to read more? CSS tutorials   Evolution of HTML 