End User Computing

An Introduction to CSS • Sujana Jyothi • Research Lab1, Callan Building, • Department of Computer Science • sujana@cs.nuim.ie End User Computing

Recap • Slides from previous lecture are available at: • http://www.cs.nuim.ie/~Sujana/enduser.html • Today we will… • Use what we did on Monday to develop a webpage • 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: <title>…</title> • Header tags:<h1>…</h4> • Lists: <ol>…</ol>, <ul>…</ul>, <li>…</li> • Paragraphs: <p>…</p> • Hyperlinks: <a>…</a>. End User Computing

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

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

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

Example 1: Background and font colour • 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 End User Computing

Linking to a CSS file • 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 • <link rel="stylesheet" type="text/css" href="style.css" /> • This should be put inside the head tags in the HTML • <head> • ... • <link rel="stylesheet" type="text/css" href="style.css" /> • ... • </head> End User Computing

Example 2: Header tag • 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 End User Computing

Colours • 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 = #000000 • A link to help you choose colours is on the course page. End User Computing

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

Example 4: Hyperlinks • 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 ????? End User Computing

Styling the module page • 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 End User Computing

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.. • 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: ? End User Computing

Exercise 3.. • Now for the rest of the lab you will be creating your own webpage. • What you are to do is create your own styled webpagebased 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. End User Computing

Guidelines • 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: • http://www.w3schools.com/css/css_examples.asp • http://w3schools.com/css/css_reference.asp End User Computing

End User Computing