A class on <p> colours the whole paragraph. What if you want to colour one word only? Wrap it in a <span> tag. On its own it changes nothing, but it gives CSS a "handle" on that part.
.sea {
color: blue;
}
.mountain {
color: green;
}Input fields and buttons
The <input> tag makes something the visitor can interact with, and has no end tag. Its type attribute sets what it is: text makes a typing field, button makes a button, and the value attribute is the text on the button.
<h1>School Survey</h1> <p>Your opinion</p> <input type="text"> <input type="button" value="Submit">
hover and transition
Writing :hover after a selector applies the style only while the mouse pointer is over the element. The transition property makes the change gradual over a time in seconds, like 2s. Hover over both buttons:
.btn1 {
background-color: aqua;
}
.btn2:hover {
background-color: yellow;
transition: 2s;
}:hover: write .btn2:hover, not .btn2 :hover. The first button keeps its colour all the time because its rule has no :hover.Borders
The border property draws a frame around an element. It takes three values separated by spaces: the thickness in pixels, the type (solid for one line, double for two), and the colour.
h1 {
border: 10px double blue;
}
li {
font-weight: 900;
}Practice
The CSS is ready. Wrap Apple in a span with class apple, Giraffe in a span with class giraffe, and Light blue sneakers in a span with class sneaker.
<p>My favorite fruit is Apple</p> <p>My favorite animal is Giraffe</p> <p>Today's shoes are Light blue sneakers</p>
Below the paragraph, add a text field <input type="text">, then a button (type="button") that says Submit.
Hint
Writetype first, then value.<h1>School Survey</h1> <p>Your opinion</p>
After the existing rule, add a rule that makes the Zoo button (class btn2) background yellow only on hover.
.btn1 {
background-color: aqua;
}Make the colour change of the Zoo button gradual over 5 seconds.
.btn1:hover {
background-color: lime;
transition: 2s;
}
.btn2:hover {
background-color: yellow;
___: ___;
}Give the h1 a border: thickness 5px, type solid, colour red (in that order).
h1 {
}The CSS is ready. In the exam notice, wrap Sunday in a span with class day, and Room 5 in a span with class room.
<h2>Exam Notice</h2> <p>The physics exam is on Sunday in Room 5.</p>
Write two rules in this order: (1) h1 with border 3px double green. (2) .join:hover with background colour lime, then a transition of 1s.
Key points
<span>wraps part of a line so you can style it alone.<input type="text">is a text field;<input type="button" value="...">is a button..x:hoverstyles on mouse-over;transition: 2s;makes it gradual.border: 10px double blue;= thickness, then type, then colour.