Learning Outcome 1:
Understand the fundamentals of Cascading Style Sheets (CSS)

Student submissions on totton.org/e/LO1a.html

CSS cheatsheet

References

https://www.citethisforme.com/cite/website

Jednet.co.uk, (2016). LO1 Understand Web architecture and components. [online] Available at: http://www.jednet.co.uk/Web/LO1.html [Accessed 13 Jan. 2016].

 

P1 explain how HTML files access CSS

Task 1: create a Web page called accessCSS.html

as a part of your site that will demonstrate to new Web designers certain aspects of CSS and JavaScript

• accessCSS.html will discuss and explain these methods of using CSS:

  external style sheet

  internal style sheet

  inline style

  other, (e.g. User Style Sheet, for example applied by users who have difficulty reading small text).

Your page will include examples of the first 3, together with an explanation of why they either don't conflict, or which stylesheet 'wins' and why.

W3 intro to style sheets

Student submissions on totton.org/e/LO1a.html

---

 

P2 explain the features of the box model for CSS

Task 2: create a Web page called box.html

as a part of your site that will demonstrate to new Web designers certain aspects of CSS and JavaScript

• box.html will discuss and explain these methods of using CSS:

• box model

  •  box

  •  margin

  •  border

  •  padding

  •  content

  •  properties, (e.g. width, height).

    use at least 3 examples of boxes on your page and explain what each feature does.

    To do this you will need to give each div its own ID:

    In HTML, every element on your web page can be assigned a unique id attribute. This must start with a letter and not contain any reserved characters such as slash /

    It must be unique (only one item can have this label). It's a good practice to assign labels that describe the function of the element. For example, a <ul> that's used to markup a navigation menu might have id="navigation" or id="menu"

    You assign an id attribute to an HTML element when:

    1. You want to style that element differently to others of the same type, so that we can have 3 different box model examples by having 3 different divs tagged with IDs
    2. You want to be able to link to a particular element within a web page - this replaces 'named anchors' and can be seen here to quickly link to the programming notes part of a long Web page.
    3. You want to be able to directly access that element using Javascript.

    Washington.edu intro to the concepts of ID and class

    W3 Box Model specification

    reference list of box model CSS properties

    Student submissions on totton.org/e/LO1a.html

---

 

M1 discuss benefits of incorporating CSS in Web design

Task 3: create a Web page called CSSbenefits.html

• This will discuss how CSS makes it easy to make changes to multiple pages, keep consistency on each page and across pages from the same site
• reduce file size and improved loading time
• improve accessibility, CSS3 reduces need for JavaScript as some functions such as animation are included.
• allow more formatting options to HTML - such as space between lines of text, the option to remove the underscore from links, Webfonts

Student submissions on totton.org/e/LO1a.html