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?
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;
}
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;
}
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<!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>
<!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;
}
px
and pt
and em
and rem
space vs. greater-than (descendant vs. child) in css selectors
"every config file eventually becomes Turing-complete" see also http://beza1e1.tuxen.de/articles/accidentally_turing_complete.html and https://stackoverflow.com/questions/648246/at-what-point-does-a-config-file-become-a-programming-language
reset.css
print.css
/