Slides
CSS
- Cascading Style Sheets (CSS)
- CSS, by itself, does nothing.
- Responsible for determining how your HTML looks
Why Does CSS Exist?
- CSS formats your webpage. Without it, there is only content, and no structure or styles.
- Can be written within HTML, or using an external style sheet (the correct way)
- Creating external style sheets prevents you from having to write code multiple times, and makes it easy to modify.
Styling Text With CSS
- Using CSS properties, you can modify the appearence of your HTML.
- This can done by targeting HTML elements.
Inline Style
- Adding the style onto the HTML element directly
- Uses the
style attribute of an element
- Declarations go within the
style attribute value
<h1 style="color: red; font-size: 32px;">
Example:
Let's say we have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
Here is an example of CSS:
h1 {
color:red;
font-size:24px;
}
p {
color:blue;
font-size: 12px;
}
What is the CSS doing here?
Selectors and Properties
- CSS is constructed of selectors and properties.
- Selectors determine where the styles are applied.
- Properties determine what those styles are.
- CSS begins with a selector, followed by curly braces.
- Declare your styles inside the curly braces.
Examples of Selectors
| selector |
meaning |
p, div, etc. |
element selector |
.class |
class selector |
#id |
ID selector |
* |
Wildcard ("any") |
Examples of Properties
| property |
meaning |
color |
text color |
border |
Defines border width, style, and color |
text-align |
justifies text |
font-size |
size of font |
font-family |
defines font |
Compound Selectors 1
Selectors can target elements nested within other elements
p img {
max-width: 320px;
height: auto;
}
Compound Selectors 2
Selectors can target specific elements with a class
h1 .title {
display: block;
margin: 0, auto;
padding-top: 1em;
}
Compound Selectors 3
Selectors can target specific elements with several layers of nesting
main .introduction > p {
background-color: lightgray;
margin: 10px auto;
}
"apply these styles to all ps that are direct children of a div of class introduction inside the main section"
Psuedo-Class Selectors
You can target the state of an element using psuedo-class selectors
- Hover
- Visited
- Checked
- Active
- Many others
Full List on MDN
MDN Psuedo-Class Tutorial
a:hover {
background-color: red;
}
a:clicked {
background-color: blue;
}
a:active {
background-color: green;
}
Including CSS into HTML
There are several ways to add style to an HTML page
-
<style> Embedded CSS
-
<link> Tag to a CSS file
-
<h1 style="color: red; font-size: 32px;"> Inline
-
<link> Tag to a CSS file
-
<style> Tags with @import of a CSS file
CSS Style Tags
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<style type="text/css" media="screen">
div {
float: left;
width: 49%;
height: 100px;
border: solid red 1px;
}
button {
float: left;
clear: both;
}
</style>
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
Linking to CSS
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
@import
- You can put all your CSS in one file
- You can load one CSS file into another using
@import
Example
<style type="text/css" media="screen">
@import 'my_special_css_file.css';
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/%40import
The Element Box Model
- Imagine every HTML element as a 'box'.
- Every box consists of four different 'layers': Margin, Border, Padding, and Content.
- Margins and padding help to position and align content inside an HTML element.
- Padding and margins are transparent. Think of it as empty space.
- Borders can be colored, or image-based. They can also be 'styled' (dashes, dots, etc.)
Cascading Syles
h1 {
color: red;
}
.title {
color: yellow;
}
#introduction {
color: blue;
}
<h1>Hi there, I am RED</h1>
<h1 class="title">Hi there, I am YELLOW</h1>
<h1 class="title" id="introduction">Hi there, I am BLUE</h1>
The !Important Declaration
Using !important in a declaration overrides all other declarations
Example
h1 {
color: red;
}
.title {
color: yellow !important;
}
#introduction {
color: blue;
}
Style Override Precedence
- 5. Element Selectors
- 4. Class Selectors
- 3. ID Selectors
- 2. Inline CSS
- 1. !important
Style Specificity Precedence
- More specific selectors will override less specific
.main p {
// Least specific
background-color: yellow;
}
.header .title h1{
// Somewhat specific
background-color: red;
}
.nav .menu .option li{
// Most specific
background-color: blue;
}