Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 3 Introduction to CSS

Size: px

Start display at page:

Download "Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 3 Introduction to CSS"

Blaise Booker
5 years ago
Views:

1 Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 3 Introduction to CSS

2 Last Time Looked at what CSS is Looked at why we will use it Used in-line CSS <p style = background: blue; color: red; fontfamily: times new roman; > Web Design Is Cool! </p>

3 Today Other implementations of CSS Embedded External Link Import CSS headings Lots of code

4 Introduction Cover 2 topics to do with headings Hierarchy Identity Do this showing all three types of CSS

5 Headings Catch our attention Give idea about the text Describe the structure of an article Convey the identity of the site you are designing

6 Embedded CSS Defined in the head section of each page, applied throughout its body: <head> <style> H1 { Background: red; Color: white; Font-family: times new roman; } </style> </head>

7 Task Create a page with embedded CSS Use it to define <H1> and <p> Add some in-line CSS to a <p> in the body Add other <p> with no in-line CSS afterwards Note the effects

8 External CSS Defined in a separate file; all your web-pages can reference this, one change instead of many Is a.css file not.html Can be specified by one of two methods: <link rel= stylesheet type= text/css href= mystyle.css /> or <style type = text/css title= currentstyle media= screen mystyle.css ; </style>

9 A1style.css This is just a name for your style sheet, it could contain: h1 { Color: blue; Text-align: center; Font-size: 20pt; } A separate specification for h2 and lots more

10 CSS definitions h1 { Color: blue; } Selector name of the element being defined Value the change that is being made # identifies an ID eg #main Referred to in HTML as ID= main. identifies a class eg.info Referred to in HTML as class= info Property the aspect of the element being changed.

11 Organising your website Pages.html Styles.css <link rel= stylesheet href= css/mystyle.css >

12 CSS Task Create examples of each, annotate them to show how the CSS links to the HTML You need Code snippets Screen-shots of the resulting web-page How do the two methods of accessing external CSS compare?

13 CSS Task - ideas In-line create three paragraphs in HTML, use in-line CSS to give the 1 st a particular style. No style for the 2 nd use in-line CSS to give the 3rd a particular style Embedded.everyp{ property:value; } #main{ property:value; } <div id= main > <p class= everyp > <p class= everyp > Change the style for headings <h1>, <h2>, <p>, a <div> called main, a class called everyp. Create elements using these in your HTML

14 CSS Task external Create an external style sheet (exstyle1.css) which changes the colour of <body>, change the style for <h1>, <div>, #main,.everyp Create two more HTML pages. Import exstyle1.css to one of the pages Link exstyle1.css to the other Edit exstyle1 take screen-shots of the resulting changes to your 2 pages.

15 Precedence Styles cascade through In-line takes precedence over embedded which takes precedence over external

16 Link or import? <link rel= stylesheet type= text/css href= mystyle.css > <style type= text/css title= currentstyle media= screen style.css ; </style> Both are standards compliant. Personal preference Import used for style sheets within style sheets

17 So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded }These are sometimes called External } block methods all the CSS is blocked together. <link rel= stylesheet href= mystyle.css > <style title= currrentstyle media= screen mystyle.css </style>

18 Next The box model Dimensions Content Padding Border margin

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks