Week Six (MGDP2050)
Lecture notes and exercises for Week Six of Web Design and Development II (MGDP2050).
No class session next week!
- Next class session is March 22 (Week Seven)
See also Week Five (MGDP2050) - Week Seven (MGDP2050).
Contents
Resource paths in HTML
In HTML, a resource path is a path to a resource.
An external style sheet is a typical example of a resource.
Browser tools
View Source
See View Source.
Inspect Element
In modern browsers, Inspect Element contains multiple features located under different tabs or menu selections.
Features include tools to view, and in some cases modify:
- HTML - view and modify
- CSS - view and modify
- Network traffic
- See the Inspect Element Console, which displays error messages, such as failed requests for external style sheets.
See Inspect Element.
Fundamental CSS Selectors
In CSS, a selector specifies the HTML elements which will be selected by the rule.
Fundamental selectors include:
HTML element selectors
HTML element selectors select elements based on element type.
An HTML element selector consists of the HTML element itself.
ID selectors
ID selectors select elements based on the ID attribute of a single HTML element.
ID selector rules begin with a pound sign, or hash mark (#).
Class selectors
Class selectors select elements based on the class attribute of one or more elements.
Class style rules begin with a period (.).
Other CSS selectors
A wide range of selectors are available. These include:
Compound selectors
Compound selectors select elements based on parent-child relationships.
The outer element is the parent, the inner element is the child.
A compound selector consists of two or more selectors, separated by spaces.
Compound selectors are processed by the browser from right to left. The element on the far right is contained by the element to its left.
Example:
- Select element(s) having class="example"
- Where these elements are contained by the element with id="main"
#main .example
<div id="main"> <p class="example">hello</p> </div>
Combined Selectors
A combined selector consists of two or more selectors, not separated by spaces
Selectors can be combined in a variety of ways
Example, select all h2 elements having class="attention":
h2.attention
This rule will affect:
<h2 class="attention">
It will not affect:
<h2>
It will also not affect:
<h1 class="attention">
Grouped Selectors
Use grouped selectors to assign two or more different selectors to a given declaration.
Use commas to separate grouped selectors.
Example, make all header elements blue:
h1, h2, h3, h4, h5, h6 { color: blue; }
Pseudo-classes
A CSS pseudo-class is a rule affect the state of an HTML element, or elements:
Examples:
- Style links when mouse pointer hovers over the link
- You can style other types of HTML elements on hover as well
- Styles for visited and unvisited links
- Styles for an element when it receives focus
Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
Examples:
- Style the first letter of an element
- Style the first line of an element
- Insert content before an element
- Insert content after an element
The cascade
The Cascade (CSS) refers to the way that CSS deals with multiple style rules:
- Rules combine, where they do not conflict
- One rule wins, when two or more rules conflict
- The winner is decided by the principles of the cascade
- The winner is said to have more cascade weight
Closest to the element wins
Some "rules of thumb" --
It is often (not always) the case that the style rule "closest to the element" wins in a conflict.
Inline style rules are inside the tag, so they win in many situations.
External style sheet rules are far from the element, so they commonly lose, because they have a low cascade weight.
See:
Media queries
Media queries use the @media rule to include a block of CSS rules only if a certain condition is true.
They are also known as conditional rules.
Media queries allow for style rules which affect some devices, but not others.
Media queries are used in responsive web design, where the condition is width of display screen.
- If the display screen meets the condition(s) specified by media queries, style rules inside that media query block apply
- If the display screen does not the condition(s) specified by media queries, style rules inside that media query block do not apply -- they are ignored
Bootstrap grid
The Bootstrap grid is Bootstrap's web page layout structure.
Grid principles
The Bootstrap grid is built on a twelve-column structure.
When you design columns, make them add up to twelve.
Grid CSS classes
Use the Bootstrap grid classes to create columns.
See Bootstrap grid.
Bootstrap and JavaScript
The Bootstrap grid does not use JavaScript.
But some other Bootstrap features do use JavaScript, including:
Exercises: in class
This exercise is similar to:
In your Local root folder, create a new folder named week6.
In this folder, create a new document named index.html.
- Make this similar to you home page and other exercise pages
Use the Bootstrap grid to create a page layout something like the screenshot below.
Exercises: for next week
Update your home page, and all your exercise pages, to use a Bootstrap navigation bar.
Project
In your local root folder, change the name of folder project to project-plan.
- Update your home page accordingly (so the link points to the renamed folder).
Create a new folder named project. This is where your actual project will go.
In your project folder, create a document named index.html. This is the home page for your project
- Use Bootstrap with this page.
- Do not use the custom CSS that you developed for your home page and other exercises
- Instead, create an external CSS file specifically for your project
