An Introduction to CSS Sujana Jyothi Research Lab
An Introduction to CSS Sujana Jyothi Research Lab 1, Callan Building, Department of Computer Science sujana@cs. nuim. ie End User Computing
Recap • Slides from previous lecture 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: <h 1>…</h 4> Lists: Paragraphs: <p>…</p> Hyperlinks: <a>…</a>. <ol>…</ol>, <ul>…</ul>, <li>…</li> 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: color: font-family: } Element we're styling Attributes we're changing blue; (or #150 E 79; ) white; Helvetica, Verdana, Arial, sans-serif; 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 16 px Helvetica h 1 { background: color: font: } black; #007; 16 px Helvetica; End User Computing Hexadecimal Colour Range
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 (#ff 0000) 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 dark green dark blue white black = #ff 0000 = #00 ff 00 = #0000 ff = #ffffff = #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 h 2 { text-align: border: } center; 5 px solid black; End User Computing
Example 4: 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 it a { color: #FFFB 1 F; text-decoration: none; } a: hover { color: } #1424 FF; End User Computing On hover what would you add to get back the underline ? ? ?
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: #150 E 79; 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: 1 px 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 a redish border: background: width: 1 px solid #FF 80 AD; #005 D 72; ? 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 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. 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. w 3 schools. com/css_examples. asp http: //w 3 schools. com/css_reference. asp End User Computing
- Slides: 19
