C4: Session 3
CSS Foundations
REVIEW
HTML Syntax
Can you spot all the errors in this block of code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Syntax Review</title>
</head>
<h1>Hello World!</h1>
<body>
<h2>There are errors in this code</h2>
<a href=https://youtube.com">Something isn't right...</a>
<li>Can you find all the errors?</li>
<li>Write down as many as you can find.</li>
<li>You got this!</li>
<p>Do you see <em>what's wrong here?</p></em>
<h2>Dog picture:</h3>
<img href="images/puppy.jpg" />
</body>
</html>
REVIEW
HTML Syntax
Can you spot all the errors in this block of code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Syntax Review</title>
</head>
<h1>Hello World!</h1>
<body>
<h2>There are errors in this code</h2>
<a href=https://youtube.com">Something isn't right...</a>
<li>Can you find all the errors?</li>
<li>Write down as many as you can find.</li>
<li>You got this!</li>
<p>Do you see <em>what's wrong here?</p></em>
<h2>Dog picture:</h3>
<img href="images/puppy.jpg" />
</body>
</html>
Concept:
CSS Foundations
CSS Foundations
Cascading Stylesheets (CSS)
- HTML defines the structure of a web page
- Which elements to use and where to put them on the page
- CSS brings in the style
- Text color and size
- Element borders and spacing
- Box shadow
- Animations
- ...and many more
CSS Foundations
CSS Foundations
CSS Foundations
CSS Foundations
How do I add CSS to my HTML elements?
Three ways:
- Inline Styling
- Internal Styling
- External Styling
CSS Foundations
1. Inline Styling
Used to style a single HTML element using the style attribute
<h1 style="color: red;">Using inline styles</h1>CSS Foundations
1. Inline Styling
Used to style a single HTML element using the style attribute
<h1 style="color: red; font-size: 12px;">Using inline styles</h1>CSS Foundations
1. Inline Styling
Used to style a single HTML element using the style attribute
<h1 style="color: red; font-size: 12px;">Using inline styles</h1>- Not recommended because inline styling gets really hard to maintain
-
When it is useful?
- One-off styling of an element
- Overriding default styles from a third-party library (usually because you don't have access to their CSS files)
CSS Foundations
2. Internal Styling
Add the <style> element within the HTML <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Foundations</title>
</head>
<body>
<h1>My Site Header</h1>
</body>
</html>
CSS Foundations
2. Internal Styling
Add the <style> element within the HTML <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Foundations</title>
<style>
h1 {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<h1>My Site Header</h1>
</body>
</html>
CSS Foundations
2. Internal Styling
Also not recommended because it is hard to maintain and no separation of concerns.
When is it useful?
- If you have just a single page with very few styles to add
CSS Foundations
3. External Styling (Most Recommended)
Link an external stylesheet (.css) to your HTML file
/* styles.css */
h1 {
color: red;
font-size: 12px;
}CSS Foundations
3. External Styling (Most Recommended)
Link an external stylesheet (.css) to your HTML file
/* styles.css */
h1 {
color: red;
font-size: 12px;
}<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Foundations</title>
<!-- link the stylesheet here -->
</head>
<body>
<h1>My Site Header</h1>
</body>
</html>
CSS Foundations
3. External Styling (Most Recommended)
Link an external stylesheet (.css) to your HTML file
/* styles.css */
h1 {
color: red;
font-size: 12px;
}<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Foundations</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>My Site Header</h1>
</body>
</html>
Concept:
CSS Syntax
CSS Syntax
CSS Properties
CSS Syntax
CSS Properties (Common)
| Property | Usage |
|---|---|
| color | sets the font color |
| font-family | sets the font type |
| font-size | sets the font size |
| font-weight | sets the thickness of the font |
| text-align | sets the alignment of the text |
| background-color | sets the background color of the element |
| border | sets the border style of the element |
| height | sets the height of the element |
| width | sets the width of the element |
CSS Syntax
CSS Syntax
For inline styling, it's simple
<h1 style="color: red; font-size: 12px;">Using inline styles</h1>CSS Syntax
CSS Syntax
For internal and external stylesheets, we use selectors
/* styles.css */
body {
color: red;
font-size: 24px;
}CSS Syntax
CSS Syntax
For internal and external stylesheets, we use selectors
/* styles.css */
body {
color: red;
font-size: 24px;
}
h1 {
color: blue;
border: 1px solid green;
}CSS Syntax
CSS Syntax
but problem....
CSS Syntax
CSS Selectors
You can define your own selectors using the class and/or id attributes on an element.
- IDs are used to identify a single element (a unique attribute)
- Classes are used to identify more than one
CSS Syntax
CSS Selectors
CSS Syntax
Advanced Selectors
Check out the tutorials on HTML Dog
Next Session
CSS Box Model
Margins, Paddings, and Borders
Building Container Elements