Download presentation
Presentation is loading. Please wait.
1
Lesson 4 – Introduction to CSS
14 January, 2019 Do it now activity Lesson 4 – Introduction to CSS
2
Homework Due: Web design
Learning objectives Homework Web design You now have the opportunity to wow the bands manager. Create a design on paper for the bands homepage (this is the first page the fans will see when they visit the website). You can create your own band or base it on an existing one. Due: This term your homework will be around a theme - Data Bit Nibble Gigabyte Terabyte
3
AIM Investigate how you add different sections to your webpages
Demonstrate different ways of referencing sources
4
Learning objectives Understand and use the following tags:
Sections, header and footer Create the following types of source path: Absolute Root Relative Document Relative
5
Learning outcomes By the end of this lesson you will be able to ....
ALL (Level 4) Select, combine and use internet services. Explain who the audience is when I am designing and creating digital content. MOST (Level 5) Construct static web pages using HTML SOME (Level 6) Justify the choice of and independently combine and use multiple digital devices, internet services and application software to achieve given goals.
6
Learning objectives Understand and use the following tags: Sections All the tags you have used so far were part of HTML version 4. In this lesson you will use a few tags that are new in HTML5. First the header and footer tags. Footer Break Section List Horizontal rule Header
7
Document Relative path: (relative to your profile.html page)
Learning objectives Understand and use the following tags: Sections Absolute path: <a href=" Root Relative path: <a href="about.html"> Document Relative path: (relative to your profile.html page) <a href="../../about.html"> The href property sets the file paths for link and anchor tags; src sets paths for images. There are 3 types of paths: absolute, root relative and document relative Absolute paths start with http and give the full address of a resource. They can link to resources on the same web site as well as other sites. For example: Link to Google Search <a href=" Search</a> Profile image <img src=" Relative paths are only for resources on your own site. Root relative paths start with the /after the site address; e.g. on codeavengers.com, profile images are accessed using the root relative reference: /images/profile1.png. Footer Break Section List Horizontal rule Header
8
AIM Investigate how to change the design of your page by writing your own CSS files
9
Learning objectives Understand and use CSS selectors to change how your webpage looks
10
Now you will write your own CSS code.
Learning objectives Understand and use CSS selectors to change how your webpage looks CSS Code HTML defines the content of a web page, and a separate language called CSS (cascading style sheets) defines how it looks. Up until now you wrote HTML, and added style to your pages by linking to a CSS file we created for you. Now you will write your own CSS code. We will start by using the <html>, <head> and <body> tags to make your code easier to understand Cascading Style Sheet Font Property background-color CSS rules lowercase
11
Learning objectives Understand and use CSS selectors to change how your webpage looks There are 2 ways to write CSS code. The 1st way is to write CSS and HTML in separate files, then link the 2 files with the HTML link tag. The 2nd way is to put CSS directly in your HTML code, in between style tags. HTML files have two sections, the head and body; the style tags containing CSS go in the head section, along with other things that are not shown on the page. Cascading Style Sheet Font Property background-color CSS rules lowercase
12
html { color: yellow; background-color: blue; }
Learning objectives Understand and use CSS selectors to change how your webpage looks html { color: yellow; background-color: blue; } Line 1 in the code above selects the content of the html tags, i.e. the whole page. Lines 2 and 3 set the background-colour and text colour properties of the whole web page. The 4 lines of code below is called a CSS rule; each rule has 2 parts. Line 1 is the selector; it selects which parts of the HTML page are styled by that rule. Lines 2 and 3 are a list of CSS property names and values. Cascading Style Sheet Font Property background-color CSS rules lowercase
13
Learning objectives Understand and use CSS selectors to change how your webpage looks A CSS rule that starts with html { will set the style of the whole web page. A rule that starts with h2 { will only set the style of 2nd level headings. A rule that starts with ol, p { will change ordered lists and paragraphs. html { color: yellow; background-color: blue; } What does this rule control the style of? Cascading Style Sheet Font Property background-color CSS rules lowercase
14
Learning objectives Understand and use CSS selectors to change how your webpage looks To give different style to each element, add more CSS rules. For example, the following CSS code has 2 rules. Lines 5 to 7 set the background colour of the heading (h2) to green. Lines 1 to 3 set the background colour for the rest of the page to orange. html { background-color: orange; } h2 { background-color: green; } What does this rule control the style of? Cascading Style Sheet Font Property background-color CSS rules lowercase
15
Learning outcomes I can … ALL MOST SOME
(Level 4) Select, combine and use internet services. Explain who the audience is when I am designing and creating digital content. MOST (Level 5) Construct static web pages using HTML SOME (Level 6) Justify the choice of and independently combine and use multiple digital devices, internet services and application software to achieve given goals.
Similar presentations
