Press right arrow →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
a { color: gray; }
</style>
</head>
<body>
<h1 style="color: #f06">Title</h1>
</body>
</html>
3 ways to apply CSS to your page:
link element. This is the recommended way for most things.style element. This can work if the CSS only pertains to the current page.style attribute, which has higher priority than other CSS applying to the same element.
Avoid, as it's hard to maintain proper separation of concerns, and is less flexible.link and style elements are only supposed to go in the head.
h1 {
font-size: 200%;
color: white;
}
h1 headings.color which sets the text color, and font-size which sets the font size, in this case relative to the containing element's font size.font-family: Sets the typeface, in order of preference.
Because on the Web you don’t exactly know which fonts the user has installed (unless you link to the font file via an @font-face rule), you provide a list of fonts with a generic fallback at the end.
color: Sets the color of the text and a default color for several other effects, such as borders and shadows.
Its current value can be referenced from any property via the keyword currentColor hyphens: Enables hyphenationtext-decoration: Sets or (in this case) cancels text underline/overline/strike-through.| Group by… | Example selector | Matches… |
|---|---|---|
| id | #about |
<section id="about"> |
| class | .message |
<p class="tip message">
<p class="warning message">
|
| attribute presence | [href] |
<a href="http://designftw.mit.edu">
<a href>
<link rel="stylesheet" href="style.css">
but not
<a>
|
| attribute value | [type="range"] |
<input type="range">
<yolo type="range">
but not
<input type="number">
|
#about<section id="about">
<main id="about">
<section id="about-me">
<input name="about">
.notice<p class="tip notice">
<div class="notice">
<p class="important notice warning">
<notice>
<p class="foo">
<div class="warning-notice">
[href]<a href="http://designftw.mit.edu">
<a href>
<link rel="stylesheet" href="style.css">
<a>
<a hreflang="fr">
[type="range"]<input type="range">
<yolo type="range">
<input type="number">
a.docs matches an <a> element with the class docs.
Note that element selectors can only be first in the sequence (i.e. [title]element is invalid)
@font-face {
font-family: 'Reenie Beanie';
src: url(https://fonts.gstatic.com/...woff2);
}
@font-face for linking to a custom font,
@keyframes for animations, @import for linking to another stylesheet, or @page for setting print metadata.@media for restricting CSS to specific media types, @supports for restricting CSS to user agents supporting a specific propertydarkgray is lighter than gray!)hsl(60 100% 50%) and hsl(240 100% 50%) have the same HSL lightness, but are they equally light?)hsl(10 80% 50% / 0.3)rgba() and hsla() functions for transparency. These still work, but we are not going to use them.hsl() when no named color is suitable.background-color property sets the background to the specified color.background-image property sets the background to the specified image(s).
All background images are painted over any background color.background-colorbackground-repeatbackground-sizebackground-positionbackground-clipbackground-originbackground-attachmentlinear-gradientrepeating-linear-gradientradial-gradientrepeating-radial-gradientconic-gradientrepeating-conic-gradientbackground-size.
Therefore, we had to make the html element as tall as the viewport.
Try commenting out height: 100% and see why!1px means "1 pixel". It's an example of a CSS length.
Lengths consist of a number and a unit, joined together. Often, pixels are not the best unit. We will explore lengths more in lecture.currentColor