1 / 19

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…

fathi
Download Presentation

End User Computing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related