Welcome to your 2nd CSS Tutorial: We gonna learn how to use CSS to align text and change the background of our webpage.
In other to achieve this, we need to add 3 things as usual.
The selector {The property:
The value;}
Text-align means to shift a text from one place to the another, text can be shifted to 3 different places.
Left
Center
Right
The default of our HTML text is left. If you check your new website, you will notice that all the text we've created so far are placed at the left side of our webpage, right?
So, when using text-align, you don't need to use left as the value coz we already have our text at the left of our webpage. It's either you use center or right.
At this point, you need to understand English, know the right spellings coz if you didn't spell your property and value right, your code will not work.
Let's go ahead and move our header h1 to the center by adding this in between our CSS stylesheet👇
h1 {text-align: center;
}
It's advisable to add this code to the former h1 we added as our selector in the CSS stylesheet yesterday in other to keep the design of header in one space and to make our work neat and easy to locate.
We can also use CSS to change the background of our webpage from the default (white) to any color we want (green, blue, black, red etc)
I will change my webpage background to blue, you can change yours too.
Since we are changing the whole webpage, our body tag will be the selector, our property will be background-color and the value will be the color we want to change our webpage color into. Like this👇
body {background-color: blue;
}
When I changed my webpage background color to blue, I noticed that my text is not as clear as when it is white, so I decided to change my webpage text color to white, how?
Simple, since I have selected the body tag which is the entire webpage of my website and I added the property - color and value - blue to make it blue that means after the semicolon ; and before the closed curly bracelet } I need to add another property - color and value - white to change the whole webpage text color to white
Like this👇
That's how to beautify your website with CSS using:
*background colour*
*text-align*
*NOTE:* in coding especially HTML and CSS, all tags, elements, properties, values, selectors etc are not case sensitive. Meaning you don't have to start with capital letter, all codes *MUST* be in small letters.
<!doctype html> ✅
<!Doctype HTML> ❌
<html>✅
<Html>❌
<head>✅
<Head>❌
<title>✅
<Title>❌
<body>✅
<Body>❌
In CSS
selectors:
We can't select <!doctype html> as doctype❌
These are the main selectors👇
body ✅
Body❌
h1✅
H1❌
p✅
P❌
img✅
Img❌
li✅
Li❌
I hope you get the scope.
All in small letters
It's only your text or link text or link titles e.g TopCrix Studio or Google or Our Services or Contact Us etc that are case sensitive.
Everybody pls! Use the CSS to change the background of your webpage to black.
Like this 👇
