is1825 multimedia development for internet applications lecture 2: working with css rob gleasure...

IS1825 Multimedia Development for Internet ApplicationsLecture 2: Working with CSS

Rob Gleasure

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

IS1811

Today’s lecture Discussion of Continuous Assessment Part 2 Conceptualising a Website The CSS box model CSS borders and outlines CSS fonts Exercise with CSS

Assignment

Due Tuesday 10th March at 10.00am

Pick a music artist of your choice. You have been commissioned to design their website. This is essentially a brochure website, it need only provide information and advertise acts and events – it doesn’t need to take bookings.

Note, you can also copy/paste written information about acts, etc. from online sources. Note: you don’t need to spend hours writing reviews of jazz acts yourself, that isn’t the point of the exercise and won’t earn you marks.

Assignment

The main objective of this assignment is to demonstrate your competency with HTML and CSS. The marks available will be divided into two areas:

1. Quality of code, i.e. Parsimony – avoids long complicated workarounds done to

avoid using certain aspects of HTML or CSS (i.e. if a method we’ve covered is the best way of doing something, use it)

Complexity – makes use of an adequate breadth and depth of HTML and CSS functionality

Robustness – bug-free, consistent across multiple browsers

Assignment

Legibility Consistent spacing and indentation, adequate

comments, sensible file structure

2. Quality of style and presentation Layout – both within individual pages and across the site Appropriate use/choice of colours and imagery Appropriate presentation of content – includes proper

structuring of information and text blocks, as well as good choice of fonts

Cohesiveness and overall tone – focused towards an appropriate audience

Assignment

Most of all, it must appear professional!

No HTML editors may be used, only a text editor (e.g. Notepad, Notepad++) and a browser (e.g. Internet Explorer, Chrome, Firefox).

The website you create must: Contain between 4 and 8 pages

It may also contain a .txt or .doc file justifying choices of style

Conceptualising a Website

We spoke in the first term about the importance of design, both from a navigational perspective and from an aesthetic perspective

We also spoke about how a design is effective if it serves a purpose, i.e. is function-led, rather than technology-led

Thus, when we start designing we do NOT jump straight into coding up a page

We begin with a pen and paper or with a digital equivalent (this is sometimes called ‘wireframing’.

Conceptualising a Website

Begin by deciding what pages you feel you will need as part of your website

Then decide how these pages can be grouped and what specific pages must link to other specific pages

This should form the basis for the navigation around your site

Identify the group of pages likely to be of most interest to users This group may benefit from being placed within an ever-

present navigation mechanism (typically a navigation bar) Is there another group of pages likely to be of frequent interest?

If so, a second navigation ever-present navigation bar may be suitable

Conceptualising a Website

Now you can begin conceptualising the layout of specific pages

How does the grouping of pages impact on how those pages should be structured?

We know pages early on in the navigation process should contain less information, while more specific pages can contain more

Grouped pages should probably be structured to contain about the same amount of content)

Conceptualising a Website

What parts of the structure can be repeated across all pages to reinforce Repeatability and unify the site?

What parts of the structure can be changed?

From here, sketch out basic structures for your home page and any groups that you feel should share a structure

These should usually be kept ‘low-fidelity’ at first, i.e. rough designs based on how the Webpage breaks down into ‘boxes’

Try and get this part of your Jazz Website planned out this week!

CSS technology is a dedicated style component which plugs into HTML

It offer much more flexibility and control than regular HTML style atributes (which are being depreciated)

CSS can be located in four places Browser defaults External .css files Internal style sheets in the <head> of a HTML document Inline style inserted directly into HTML elements with the style

attribute

Last Class

HTML elements can usually be thought of as boxes this can help us make sense of their layout

The CSS box model contains 4 things Margins Borders Padding Content

From www.w3c.org

The CSS Box Model

When you set the width and height of an element, you are setting the width and height of the content area

The total width an element will take up on a page will be= width + padding + border + margin

These properties can usually be set as follows

p {height:100px;width:250px;padding:10px;border:5px solid gray;margin:10px;

}

The CSS Box Model

Sometimes we will want to apply some style to an area of the page, or a section of content, without wrapping that area or section of content in any particular HTML tagTo this end, we have two ‘empty’ tags built into HTML:

The <span> tag is used to apply style to pieces of text, e.g.

One word in this <span style=“font-style: italic;”> sentence </span> is italic

The <div> tag is used to create divisions on a page, such that styles may be applied to entire ‘panels’, e.g.

<div style=“background-color: 005500”> <h2> Hello World! </h2><p> It’s great to be here! </p>

</div>

Two HTML tags of note

The <div> tag is especially useful when you bear in mind the CSS box model

Being able to wrap a bundle of elements in a <div> tags allows us to ‘box up’ whole sections of the page

Note: Don’t forget that, in HTML tags are nested This means that this is legal:

<div> <p></p></div>

But this is not…

<div><p></div></p>

Two HTML tags of note (continued)

Using CSS, you can set a number of properties in an element’s border The Border Style

This can be dotted, dashed, solid, double, groove, ridge, inset or outset e.g. border-style: solid;

Border Color This can be any colour e.g. border-color: #ff0000;

Collapsing Borders You can also specify no border properties at all using the

border-collapse property e.g. border-collapse:collapse;

CSS borders

Individual sides You can specify whether you want styles to apply to only the

top, bottom, right, or left,

e.g. border-left-style: solid;

border-top-color: #ff0000;

It is also possible to specify all the border properties in one property, Do this using the shorthand border

e.g. border:5px solid #ff0000;

Note: when using shorthand, the order must = width-style-colour

CSS borders (continued)

From

www.w3c.org

CSS border properties

From

www.w3c.org

CSS border properties

You can also draw an outline around elements, outside the border edge (this is effectively a second border)

From

www.w3c.org

CSS Outlines

Consider the following code

<html>

<head>

<style type="text/css">

body { background-color:rgb(210, 210, 155); }

h1 { color:rgb(40, 40, 75); }

p { text-indent: 20px; }

div { border-style: ridge; text-align: center; height: 250px;}

span { border-style:dotted; }

</style>

</head>

<body>

<div>

<h1> Our page for lecture 15 </h1>

<span>We'll use this to try out some CSS</span>

</div>

</body>

</html>

Trying it out

Backgrounds in CSS

The CSS background properties define the background effects of an element. This includes the ability to control the background colour of an element set an image as the background repeat a background image vertically or horizontally position an image on a page

Backgrounds in CSS

CSS background properties

Taken from w3schools

Backgrounds in CSS

E.G. To set a background colour:

body {background-color: yellow}

To set an image as a background: body

{background-image: url(‘image.jpg')

} To set an image repeated as a background:

body {

background-image: url(‘image.jpg');background-repeat: repeat

}

Text in CSS

The CSS text properties allow you to control the appearance of text. This means you can change the colour of a text increase or decrease the space between characters in a text align a text decorate a text indent the first line in a section of text

Among other things..

Text in CSS

Text properties in CSS

Taken from w3schools

Text in CSS

E.G. To set the text colour for h1:

h1 { color: #00ff00; }

To align the text in paragraphs: p { text-indent: 50px; }

To set the letter spacing across the page: body { letter-spacing: 2px; }

CSS font families There are a huge number of font families Generally, these can be divided into serif and sans-serif See http://www.w3.org/TR/CSS2/fonts.html#generic-font-

families for a list

From

www.w3c.org

CSS Font properties

CSS font-style and font-weight Thes is mostly used to specify italic or bold text but can also

set text as variationse.g. font-style: italic;

font-weight: bold;

CSS font size This can be used to make text bigger/smaller than the default

e.g. font-size:120%;

You can also use pixels (px) or the em size unit. The em unit is recommended by W3C but percentages work on pretty much every browser

CSS Font properties

From

www.w3c.org

CSS Font properties

Exercise

For this exercise, we’ll be working only with inline and default styles. Do not use any built-in HTML style attributes (apart from style)

Create a webpage called lab3.html Create a table on this page with 3 rows and 2 columns For this table

Set the width of this table to 80%, the border-collapse to ‘collapse’, the margin to be 0.5em

Add an outline which is 0.2em groove rgb(155, 205, 205) Using the <col> tag, set the width of the first column to be 15%

and the second column to be 85%

Exercise (continued)

Change the background-color of the cells as follows Set the top-left as rgb(150, 200, 200) Set the top-right as rgb(215, 190, 240) Set the mid-left as rgb(195, 180, 250) Leave the mid-right unchanged Set the bottom-left as rgb(180, 220, 220) Set the bottom-right as rgb(230, 195, 255)

Set the padding of each cell as 2em Add a <h1> to the top-right cell stating ‘Lorem Ipsum Dolor’, then

set the color of this heading to rgb(75, 80, 175) Set the vertical-align of the mid-left cell to be text-top Add 3 identical links on new lines to the mid left linking to

http://www.ucc.ie, each containing the clickable text Lorem and each followed by a line break

Exercise (continued)

Add a h3 to the mid-right cell with the words ‘Lorem Ipsum Dolor’ and make it color rgb(75, 80, 175)

Add the following text to the same cell (after the heading):Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Add a paragraph to the bottom-right, in which text-align is set to center, text-transform is set to ‘capitalize’, font-size is set at 110%, font-weight is bold, and make it color rgb(75, 80, 175)

Then add the text ‘dolor sit amet’ to this paragraph

Exercise

You should end up with a page that looks like this

Want to read more?

Links and references http://www.w3schools.com/css/css_boxmodel.asp http://www.brainjar.com/css/positioning/