style
attribute of an elementstyle
attribute value<h1 style="color: red; font-size: 32px;">
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?
There are several ways to add style to an HTML page
<h1 style="color: red; font-size: 32px;">
Inline<link>
Tag to a CSS file<style>
Tags with @import
of a CSS file<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<style type="text/css" media="screen">
h1 {
color:red;
font-size:24px;
}
p {
color:blue;
font-size: 12px;
}
</style>
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
selector | meaning |
---|---|
p , div , etc. |
element selector |
.class |
class selector |
#id |
ID selector |
* |
Wildcard ("any") |
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 |
Selectors can target elements nested within other elements
p img {
max-width: 320px;
height: auto;
}
Selectors can target specific elements with a class
h1 .title {
display: block;
margin: 0, auto;
padding-top: 1em;
}
Let's make a site with a fancy title!
Add a <style>
tag to your page and use multi class selectors to:
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<!--Write your CSS in the style tag-->
<style type="text/css" media="screen">
</style>
</head>
<body>
<div>My Super Fancy Header</div>
</body>
</html>
Selectors can target specific elements with several layers of nesting
main .introduction > p {
background-color: lightgray;
margin: 10px auto;
}
"apply these styles to all p
s that are direct children of a div
of class introduction
inside the main
section"
You can target the state of an element using psuedo-class
selectors
a:hover {
background-color: red;
}
a:clicked {
background-color: blue;
}
a:active {
background-color: green;
}
Complete the following CSS selector game
<!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
<style type="text/css" media="screen">
@import 'my_special_css_file.css';
</style>
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>
Using !important
in a declaration overrides all other declarations
h1 {
color: red;
}
.title {
color: yellow !important;
}
#introduction {
color: blue;
}
.main p {
// Least specific
background-color: yellow;
}
.header .title h1{
// Somewhat specific
background-color: red;
}
.nav .menu .option li{
// Most specific
background-color: blue;
}
/