Digital Design
Day 3: HTML & CSS Part 2
Comprehensive Rules
- Eating allowed only 8am to 9am and during the break
- Students must wash hands before touching computers
- Students must clean up after themselves
- No open bottles around computers
- If there is an excess of crumbs in the room, or if anyone eats while an instructor is talking, no one will be allowed to eat in class
- Log out of computers and plug them in before leaving classroom
- Do not attempt to leave classroom until dismissed
- Everyone gets respect/no tilting on chairs/no Minecraft or Giphy/Leave no one behind
More HTML
- Anchor tags
- Classes vs ids
- Uses of divs
- Content wrappers
User Agent Stylesheets
- Each browser has a default stylesheet that it applies to HTML elements
- You've already seen the user agent Stylesheet for a few browsers
- What your HTML file looks like in Chrome without the CSS is the default style for Chrome
- Some user agent styles can be annoying, so for browser compatibility, as well as removing any default styles we may not like we need to do a CSS reset
Setting up a CSS reset
1. Go to www.meyerweb.com/eric/tools/
css/reset/.
2. In the CURRENT folder that you're working on, create a new file and name it reset.css and save it to the css folder.
3. Paste the CSS Reset from the website into reset.css.
4. At the TOP of styles.css, add the following:
5. Save styles.css.
@import url(“reset.css”);
CSS Syntax Review
- Rule set
- Block declaration
- Selector
#name p {
color: blue;
}Inheritance & Element relationships
- Let's say we have the following HTML code:
<body>
<div id=”main” class=”group”>
<h1>Page Title</h1>
<p>Nulla facilisi. Ut porttitor sollicitudin nisi, tempus
pulvinar nisl volutpat aliquet.</p>
</div>
</body>And the following CSS code:
Text
body {
color: blue;
}Inheritance
- Although the <body> element doesn’t contain any text itself, the text within <h1> and <p> will still have the blue color applied to them.
- This is because the color property is inherited.
- Because <body> in the HTML example contains the <h1> and <p> elements, they are known as the descendants of <body>.
- An element that contains other elements may be called the parent, and two elements at the same level (such as the <h1> and <p> in the example) are called siblings.
Grouping selectors
- If you want to select several different elements, you can apply a style to them all with one line, separating each element with a comma.
h1, h2, h3, h4 {
font-weight: bold;
}Combinators
- Combinators are used when you want to select elements based on their relationship to other elements
- In the example below, only <p> elements that are descendants of the <blockquote> element will be made italic
blockquote p {
font-style: italic;
}- Sometimes, a descendant combinator is not strict enough for your purposes. In that case, use a child combinator. In this case, only the <h3> element that is a child of <aside> will be bold
aside > h3 {
font-weight: bold;
}Attribute selectors
- Selecting elements with an attribute, regardless of its value. For example, <a title = "More Information"> and <a title = "Hello">. As long as it has a title, it will be selected regardless of value
a[title] {
color: blue;
}Pseudo-classes
- What does the prefix "pseudo" mean?
- Sometimes, a part of a web page isn’t made up of a physical element, meaning it can’t be
selected through the use of a normal selector- This is where pseudo-classes come in use.
- There are different types of pseudo-classes: dynamic, structural, etc.
Dynamic Pseudo-classes
- Dynamic pseudo-classes allow you to style an element when it is interacted with
- ex. when a user hovers over a link
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}- An unvisited link is underlined, and when hovered over, that underline is removed. When the cursor moves away from the link (and is no longer being hovered over), the underline is applied again.
- Get into groups of 2
- Work on one laptop
- Both people must type
- One person will type for half of the time, and we will indicate when to switch to the other person
- Attempt to re-create the webpage on the paper passed out to you
- Utilize the CSS properties reference sheet
- Look things up on the internet
- Remember: "Three before me"; ask 3 other teams before you ask the instructor
- You also must show evidence of consulting a search engine as well before asking an instructor
- Create a new project folder in your DigitalDesign folder
- NAME YOUR NEW PROJECT FOLDER A DESCRIPTIVE NAME, NOT "NEW_PROJECT_FOLDER"
- Create the following folders within your new project folder:
- assets
- css
- Create the index.html within the project folder
- Make sure you have the styles.css file within your css folder, as well as reset.css and have the correct import statement at the top of styles.css
- Make sure you correctly link the stylesheet and your index.html
- In terminal, navigate to your project folder, and then start up your server with the following command:
- python -m SimpleHTTPServer 8080
- In Chrome, in the url, type in localhost:8080
Digital Design Day 3: HTML & CSS Part 2
By ifang
