reading-notes

Class 5 - Design Web Pages with CSS

Example CSS for a Header

Recreate your wireframe, and work with your partner to identify what styles you can apply.
Label your wireframe with what colors go where.

CSS: sector {property: value;} make sure p:v are in formated in different lines so not all smushed together
Inline: inside an element tag <body style="background-color:red>
Internal: <style></style> at beginning code
External: separate style.css file need to link in html <link rel="stylesheet" href="style.css">
Inline overides other two. Styles declared later in document overides styles declared earlier.
Use * {border:1px solid black;} to show how much space an element is taking. * means to grab all.
Float element lets other elements invade selectors space h1{float:left;}
Can specify location before selector in css to narrow down what it applies to like nav li affects lists in nav section
Class: Groups attributes that are similar. ex <section class "can make up name of class"> then in css use the class selector which is a period .made up name
ID: Gives name to element that is unique no other element should have the same ID. Use ID selector #
Margin is space outside element

What is CSS
- Includes a selector {property: value;}
- CSS is divided into modules that have specific styling choices
How to Add CSS
CSS Color
CSS Reference
Myers Web Reset Stylesheet

What is the purpose of CSS?
- Cascading Style Sheets: changes how HTML elements are shown by adding style and manipulate HTML into something visually pleasing and readable.
What are the three ways to insert CSS into your project?
- External: creating a separate css file and use the link element.
- Internal: applies styles for multiple elements on a page. Used inside style element inside head section
- Inline: apply to a single element using style attribute
Write an example of a CSS rule that would give all “< p >” elements red text.
- P { color: read; }