End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

Recap Slides from previous lecture are available at: Today we will… i.Use what we did on Monday to develop a webpage ii.Begin using CSS End User Computing

Exercise 1… Create a webpage for this End User Computing module The webpage must contain Lecture Material, and Contact Details, plus links to relevant websites. You have 20 minutes to do this End User Computing

HTML = Structure The page should contain the following: a title an introduction course details contact details and a list of links HTML allows us to build this structure and we can give it a style later End User Computing

HTML tags to use You’ll need to use the tags talked about in Monday’s lecture e.g.: Title: … Header tags: … Lists: …, …, … Paragraphs: … Hyperlinks: …. End User Computing

Webpage Template End User Computing So we've created the page but it’s pretty dull!

Styling the page End User Computing We can style the page to improve its appearance

Styling webpages End User Computing Use Cascading Stylesheets (CSS) Specify the style of any HTML element CSS is quite easy to read and understand

Example 1: Background and font colour End User Computing The body tags contain the information displayed in the browser window Lets say you want to change the background to blue and the font colour to white… In a CSS file we can choose the element we want to style, body, and give it’s attributes, background and color a new value: body { background:blue; (or #150E79 ;) color: white; font-family: Helvetica, Verdana, Arial,sans-serif; } Element we're styling Attributes we're changing Set the attributes new values

Linking to a CSS file End User Computing All the CSS code should go into a file, which is usually called style.css. You need to add a tag to your HTML with an attribute that will tell the HTML you are using a style file This should be put inside the head tags in the HTML......

Example 2: Header tag End User Computing Lets try changing the header 1 tag to have a background that is black text colour that is dark blue font that is 16px Helvetica h1 { background:black; color:#007; font:16px Helvetica; } Hexadecimal Colour Range

Colours End User Computing Hexadecimal numbers have a range of 16. They run from 0-9,A-F. Colours in CSS can be defined using a colour name (red), an rgb value (rgb(255,0,0)) or a hex number (#ff0000)‏ With a hex number or rgb value the first two digits relate to red, the third and fourth relate to green and the last two relate to blue, i.e: dark red = #ff0000 dark green = #00ff00 dark blue = #0000ff white = #ffffff black= # A link to help you choose colours is on the course page.

Example 3: Header 2 tag End User Computing Lets try changing the text to be centred give it a border h2 { text-align:center; border:5px solid black; }

Example 4: Hyperlinks End User Computing Hyperlinks have many properties, such as if you have visited the link, if you are hovering over the link with a mouse. Lets change the links to a yellow colour remove the underline to a blue colour if you hover over it a { color:#FFFB1F; text-decoration:none; } a:hover { color:#1424FF; } On hover what would you add to get back the underline ?????

Styling the module page End User Computing Now we're going to go through, step by step how to style the new course page. Notice to style a page you change the CSS file not the html file

Example 5 body { color:white; background: #150E79; font-family: Helvetica, Verdana, Arial,sans-serif; line-height: 150%; /* space out the text by changing the lineheight center the text and encapsulate the text by forcing it to stay within 80% of the browser window put a border around the whole body */ font-size: 100%; width:80%; border:1px solid white; /* centre the body section by using the "auto" value we are stating that the left and right margin should be as large as they can */ margin-left:auto; margin-right: auto; } End User Computing

Exercise 2.. End User Computing 1. Style the header 1 tag by centring it – (text-align: ) giving it a border at the bottom – (border-bottom: ) and padding it at the top and the bottom – (padding-bottom: padding-top: ) 2. Create a box around the unordered list set it to be 80% of the allowed width (thats 80% of the body section) give it a greeny background and a redish border border:1px solid #FF80AD; background:#005D72; width:?

Exercise 3.. End User Computing Now for the rest of the lab you will be creating your own webpage. What you are to do is create your own styled webpage based around your favourite celebrity. First off gather your information, this should include A list of their fullname, date of birth, nationality and any else relevant. A picture if possible Links to websites about them or information about them. Then structure it with HTML Then style it with CSS.

Guidelines End User Computing It is always a good idea to indent your HTML and CSS, this means lining up all the start and end tags. If you use HTML you found elsewhere it will be obvious, you will need this lab to be able to do the assignment. Two handy pages you'll need are: