1. IS1825 Multimedia Development for Internet Applications Lecture 2: Working with CSS Rob Gleasure R.Gleasure@ucc.ie http://corvus2.ucc.ie/phd/rgleasure/index.html

2. 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

3. Assignment Due Tuesday 10 th 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.

4. 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

5. 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

6. 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

7. 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’.

8. 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

9. 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)

10. 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!

11. 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 of a HTML document  Inline style inserted directly into HTML elements with the style attribute Last Class

12. 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

13. 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

14. 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 tag To this end, we have two ‘empty’ tags built into HTML: The tag is used to apply style to pieces of text, e.g. One word in this sentence is italic The tag is used to create divisions on a page, such that styles may be applied to entire ‘panels’, e.g. Hello World! It’s great to be here! Two HTML tags of note

15. The tag is especially useful when you bear in mind the CSS box model Being able to wrap a bundle of elements in a 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: But this is not… Two HTML tags of note (continued)

16. 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 outsete.g. border-style: solid;  Border Color This can be any coloure.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

17.  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)

18. From www.w3c.org CSS border properties

19. From www.w3c.org CSS border properties

20. You can also draw an outline around elements, outside the border edge (this is effectively a second border) From www.w3c.org CSS Outlines

21. Consider the following code 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; } Our page for lecture 15 We'll use this to try out some CSS Trying it out

22. 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

23. Backgrounds in CSS CSS background properties Taken from w3schools

24. 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 }

25. 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..

26. Text in CSS Text properties in CSS Taken from w3schools

27. 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; }

28. 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 listhttp://www.w3.org/TR/CSS2/fonts.html#generic-font- families From www.w3c.org CSS Font properties

29. CSS font-style and font-weight  Thes is mostly used to specify italic or bold text but can also set text as variations e.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

30. From www.w3c.org CSS Font properties

31. 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 tag, set the width of the first column to be 15% and the second column to be 85%

32. 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 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 http://www.ucc.ie

33. 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

34. Exercise You should end up with a page that looks like this

35. Want to read more? Links and references  http://www.w3schools.com/css/css_boxmodel.asp http://www.w3schools.com/css/css_boxmodel.asp  http://www.brainjar.com/css/positioning/ http://www.brainjar.com/css/positioning/