19
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science [email protected]
End User Computing
An Introduction to CSS
Sujana JyothiResearch Lab1, Callan Building, Department of Computer Science
Recap
• Slides from previous lecture are available at:
http://www.cs.nuim.ie/~Sujana/enduser.html
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: <title>…</title> Header tags:<h1>…</h4> Lists: <ol>…</ol>, <ul>…</ul>, <li>…</li> Paragraphs: <p>…</p> Hyperlinks: <a>…</a>.
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
<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>
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 = #000000
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 5body{
color: white;background: #150E79;font-family: Helvetica, Verdana, Arial,sans-serif;line-height: 150%;/*space out the text by changing the lineheightcenter the text and encapsulate the text by forcing it to stay within 80% of the browser windowput 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:http://www.w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_reference.asp
