1) CREATE P ELEMENTS
Add three paragraph elements to the html section:
In the HTML section create 3 paragraph tags:
This tutorial is a companion to the video. You can copy/paste the large lines of code from here. Although this tutorial uses codepen.io,
you can use any environment that you are comfortable with eg local HTML/CSS with a text editor, repl.it, w 3 schools, Atom, Sublime Text
Use the blue buttons to see code and get help. It is recommended that you click the buttons after you have finished to close each section.
There is no javascript in this program, it is used to cover the basics of CSS that you will be using in other programs that do have javascript.
Add three paragraph elements to the html section:
In the CSS section, target ALL paragraph elements:
You should see something like this:
Use the id selector to target each element seperately.
To be able to target each element with CSS and give them different background colours use the id=”” attribute in each P tag.
In the HTML section, add in id="red", "green", and "purple" as below:
In the CSS section use the hash tag to target each element by its id as shown below:
Each of these id’s target the corresponding CSS element, and the code inside the curly braces affects the targeted element.
The output should be something like this:
hint! - scroll back up to close this section by using the blue button
Update the id names and #CSS to better reflect when we have all 15 elements in there.
Copy and paste the following two sections of code over the HTML and CSS sections and check your code.
HTML section:
CSS section:
Check your work:
The output should be something like this:
Even though we have 15 elements, only 3 of them have been targeted by the CSS
Using Hexadecimal code to select colours gives us more of a range:
Hexadecimal = #RRGGBB (red, green, blue)
#ff0000 is 2 red values, 0 green values and 0 blues values
#00ff00 is 0 red values, 2 green values, and 0 blues values
#ff00ff is 2 red values, 0 green values and 2 blue values
Copy and paste the following CSS code to change from words to Hexadecimal:
#zero{
background-color: #0000ff;}
#seven{
background-color: #00ff00;}
#fourteen{
background-color: #ff00ff;}
Check your work:
3 elements selected now using CSS rgb colour selection.
Start with these three updated CSS identifiers and check your result.
#zero{
background-color: rgb(0, 136, 221);}
#seven{
background-color: rgb(0, 187, 136);}
#fourteen {
background-color: rgb(238, 62, 128);}
Copy and paste this CSS over the three selectors
#zero {
background-color: rgb(231, 32, 25); }#one {
background-color: rgb(237, 104, 1); }#two {
background-color: rgb(246, 198, 0); }#three{
background-color: rgb(244, 237, 0); }#four{
background-color: rgb(182, 211, 0); }#five {
background-color: rgb(137, 195, 23); }#six {
background-color: rgb(91, 182,51); }#seven{
background-color: rgb(66,168,59); }#eight {
background-color: rgb(58, 180, 97); }#nine{
background-color: rgb(49,183,184); }#ten {
background-color: rgb(74,141,209); }#eleven{
background-color: rgb(56,82,169); }#twelve {
background-color: rgb(88,80,165); }#thirteen {
background-color: rgb(97,67,163); }#fourteen {
background-color: rgb(67,42,134); }Check your work:
Use CSS to target the body and paragraph elements.
Centre text, change font to white and 25px;
body {
Text-align: center;
}
p {
color: white;
font-size: 25px;
}
Now we want to make the P elements horizontal instead of vertical
Add in these three lines to the P CSS one at a time so you can see the effect.
Create a h1 element
Target the h1 element using CSS
