Unit 1 CSS Learning Objectives 5 2 3
Unit 1 CSS Learning Objectives: 5. 2. 3 Be able to use HTML and CSS to construct web pages
Cascading Style Sheets Cascading style sheets (CSS) are used to save work and improve consistency by controlling the formatting of multiple web pages. They are separate files that contain a series of rules that control the formatting of multiple web pages. Complete task 12. 3.
Setup Create a new document in Notepad++ and save it as stylesheet. css in your Practice Website folder. Open your index. html and page 2. html web pages and add the blue line between the <head> tags on each page. <head> <title>My webpage</title> <link rel="stylesheet" type="text/css" href=“stylesheet. css"> </head>
Styling Headings Add the style below to your new file, it will change the font of all headings that use the <h 1> tag. h 1 { font-family: “Arial”; } Save your changes and view your web pages in your browser. Add another style to set the font of the headings that use the <h 2> tag.
Hex Colour Codes Hexadecimal numbers are used to represent colours in css. Use this website to choose a suitable colour for your h 1 style. Add your chosen colour to your h 1 style like the example below. h 1 { font-family: “Arial”; color: #3333 CC; } Save your changes view the web pages in your browser. Complete tasks 12. 5 and 12. 11.
Background Colour Add a new style to set the background colour of your pages. body { background-color: #00 ff 00; } Save your changes view the web pages in your browser. Complete tasks 12. 5 and 12. 11.
Div Tags Div tags are containers that allow the formatting of blocks within a web page. Add a div tag to one of your pages using the example shown below. <div id=“mydiv”>This is a div. </div> Complete task 12. 16.
Formatting Div Tags Add the following rule to your style sheet and save it. #mydiv { width: 200 px; height: 50 px; background-color: #00 ff 00; } Save your changes view the web page in your browser.
Sketching Layouts In the exam you may be asked to sketch the layout of a web page based on some HTML code. This is a worked example <!DOCTYPE HTML> <html> <head> <title>Alan Turing</title> </head> <body> <h 1>Alan Turing</h 1> <img src=”alan. jpg”> <hr> <h 2>Welcome</h 2> <p>Welcome to the Alan Turing website. </p> </body> </html> Alan Turing Image Welcome to the Alan Turing website. Complete task 12. 17.
- Slides: 9