Download presentation
Presentation is loading. Please wait.
1
Web Design and Development
Implementation – CSS
2
Learning Intention I will learn how CSS can be used to change the appearance of web pages and web sites.
3
Cascading Style Sheets
CSS is used to modify the appearance and style of web pages CSS can be used to ensure a consistent appearance and style across a whole website
4
CSS scope – in-line You can use in-line styles to change the appearance of one element of HTML. e.g. <h2 style=“background-color:red”>All About Me</h2> Would change the appearance of just the one h2 in the HTML above
5
CSS scope – internal You can use internal styles to change the appearance of a set of elements all on the same page. Use the <style> element inside the <head> section to apply styles to elements on the web page.
7
CSS scope – external You can use external styles to change the appearance of all the pages on a web site. Use the <link> element inside the <head> section to include the CSS file which contains the style information.
8
index.html site.css
9
CSS Priorities Styles will "cascade" by the following rules (number 1 has the highest priority): Inline style (inside an HTML element) External and internal style sheets (in the head section) Browser default Inline style (inside a specific HTML element) will override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.
10
CSS Properties Property What it does background-color
This changes the background colour of an element. font-family This changes the text shape. font-size This changes the text size. text-align Sets the position of the text. It can be ‘left’, ‘center’, ‘right’ or ‘justify’. color This changes the text colour.
11
CSS Selectors element – apply style to specific element types e.g. h1, h2, p id - use an id attribute and a # to identify a single element and style only that element class – use a class attribute and a . to identify a range of different elements and style them all the same
12
Success Criteria I can use inline, internal and external style sheets to control the appearance of web pages.
Similar presentations
