HTML and CSS Session Two

Size: px

Start display at page:

Download "HTML and CSS Session Two"

Job Watkins
7 years ago
Views:

1 HTML and CSS Session Two

2 What We Will Cover Some HTML Review Create and Link a CSS File

3 Let s Review Everyone have file from last session -- first.html? We will quickly make a few more basic html files Open new blank file in your text editor

4 <html> <head> <title>my Second Page</title> </head> <body> <p> This is my second page </p> <h1>heading 1</h1> </body> </html> second.html

5 CHALLENGE Make another simple page and save it with a new name (example.html) Some suggestions (your own ideas welcome!): TITLE My Family My Pets My Hobbies My Favorite Books My Favorite Songs FILE NAME family.html pets.html hobbies.html books.html songs.html

6 Linking to other pages Linking to Other HTML Pages using <a href> </a> tags Open first.html in your editor Add this text somewhere in the body section <a href= second.html >Second Page</a> Name of the file you want to link to Text that will appear on webpage

7 Open first.html in your browser and try out the link

8 Let s add a link your other page and let s make them look neater by putting them in a list using <ul> and <li> tags <ul> <li><a href= second.html >Second Page</a></li> <li><a href= example.html >My Example Page</a></li> </ul>

9 Lesson 2:Creating and Linking CSS File

10 Open New Blank File in Text Editor p { font-family: Georgia, Times New Roman, Times, serif; This is a CSS statement called a rule it is telling the browser to set everything contained with a <p> tag to the fonts listed.

11 Open New File in Text Editor p { font-family: Georgia, Times New Roman, Times, serif; This is a FONT STACK. You can specify as many fonts as you like 3 or 4 is common Last font is generic You are naming several because the browser will look to user s computer for the font and if they don t have it it moves to next one in list. Times New Roman is in quotes because it s name has spaces

12 Save CSS File Save this file as styles.css put it in same folder with your html files

13 Linking Your CSS to Your HTML files Open first.html in browser Open first.html in text editor <html> <head> <title>my First Page</title> <link rel= stylesheet type= text/css href= styles.css > </head> <body> <p> This is my first page </p> Refresh first.html in browser

14 Open styles.css and add another style definition h1 { font-family: Helvetica, Arial, sans-serif;

15 Save CSS File Again and now refresh your browser to see how first.html has changed

16 Back to CSS File Should Look Like This.. p { font-family: Georgia, Times New Roman, Times, serif; h1 { font-family: Helvetica, Arial, sans-serif;

17 Let s Specify a Font Size p { font-family: Georgia, Times New Roman, Times, serif; font-size: 1.5em; h1 { font-family: Helvetica, Arial, sans-serif; font-size:3em;

18 Save CSS File Again and refresh your html page to see changes

19 Let s Specify a Font Color p { font-family: Georgia, Times New Roman, Times, sans=serif; font-size: 1.5em; color: blue; h1 { font-family: Helvetica, Arial, sans-serif; font-size:3em; color: red;

20 CHALLENGE Connect your other pages to the same stylesheet *HINT** You ll need to call the stylesheet in the header section of each page copy and paste is your friend!!

21 If you would like to override a style you can call something different inline on the page. Let s open second.html and change the color of the h1 tag to yellow <h1 style="color:yellow;">heading 1</h1>

22 Let s add some style to our list of links by defining some rules for <ul> tag in the stylesheet ul { border-style: solid; border-width: 1px;

23 Let s add some style to our list of links by defining some rules for <li> tag within our list ul li { border-style: solid; border-width: 1px; border-color: red; list-style-type: none;

24 Let s change the way our list of links displays This will put the links side by side. Lists are usually block items meaning they display one line after the next. ul li { border-style: solid; border-width: 1px; border-color: red; list-style-type: none; display: inline;

25 Let s add some style to our list of links by defining some rules for <ul> tag in the stylesheet This increases the space around the border of the list to 10 pixels ul { border-style: solid; border-width: 1px; padding: 10px;

26 Let s change the way our list of links displays This will add 10 pixels on the left and the right of each list item ul li { border-style: solid; border-width: 1px; border-color: red; list-style-type: none; display: inline; margin-right: 10px; margin-left: 10px;

27 Let s make our list look even nicer ul { border-style: solid; border-width: 1px; padding: 10px; border-radius: 10px; background-color: black; ul li a { color: white;

28 Using Style Classes Class selectors are used to change multiple HTML elements at the same time. There is a dot before a class name. e.g..text Syntax HTML: <p class="text"> Hello! How are you? </p> CSS: CSS:.text { color: red;

29 CHALLENGE Call the class.text somewhere else on one of your HMTL pages remember that it doesn t have to be in a <p> tag could also call it within a <h1> or another text related element. Then experiment changing the class back in your stylesheet and see how that changes your pages.

30 The DIV tag You can use the <div> tag to separate your page into sections and then use your stylesheet to help style those sections. Let s start by taking your second.html file and add some <div> tags that nest around some <p> text.

31 The DIV tag Until you identify some differences between the two div sections they don t seem to do anything. But here again is where you can put your stylesheet to work While we still have the second.html file open lets specify a style class for each <div> tag. Make one: < div class= main > and the other <div class= side >

32 The DIV tag Now we need to define how each of these classes for the DIV tag will differ Open your stylesheet and at the bottom put the following new code: div.main { float:left; width:600px; background:#9c9; div.side{ float:right; width:250px; background:#c9c;

{color:blue; font-size: 12px;}

{color:blue; font-size: 12px;} CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied: