Web Design and Development Implementation – CSS
Learning Intention I will learn how CSS can be used to change the appearance of web pages and web sites.
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
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
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.
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.
index.html site.css
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.
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.
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
Success Criteria I can use inline, internal and external style sheets to control the appearance of web pages.