h1 { color: darkblue;
font-size:60px;
font-family: tahoma;
}
p {
color: red;
font-size: 30px;
}
If you add the above CSS code you will have the below result.
Next, am going to show you how to create a full web page, since we are familiar with HTML and CSS now.
Let now create a real life button.
HOW TO CREATE A BUTTON
In this section am going to discuss with you different buttons and how to creates them.
- How to use image as a background of a button.
- How to use gradient background, And
- How to use uniform background colour.
But for the purpose of this lesson am going to show you first how to create a button with a uniform colour.
Now let start...
<!DOCTYPE html>
<html>
<head>
<style>
=======================
your CSS code here....
===========================
</style>
</head>
<body>
<button>
Submit
</button>
<!-- -->
</body>
</html>
If you run the above code you will have the below result
That is a html button; Now let beautify the button above by adding some beautiful CSS code, but remember I told you that am going to show you how to create a button with a uniform color background, so let do that now.
Add the following CSS code and see the result.
button{
background-color: rgb(240, 62, 8);
height: 60px;
width: 120px;
outline: none;
color: white;
padding: 5px;
border-radius: 10px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
Wow! we have gotten a beautiful button now.
So, now make changes to the above CSS code and preview your result.
I told you earlier that am going to show you how to create a button with a uniform background color and now you have seen it above.
DON'T FORGET TO DROP YOUR COMMENT FOR UPDATE.
So now, that we are done with that one let move over on how to create a button with a background image, this is pretty easy.
Let just replace the the background color with background image and see our result.
Replacing the background-color with background-image won't give us the result we want so let do it step by step.
Now let add the following CSS declaration to our previous CSS code.
background-image: url(flow.jpg);
background-repeat: no-repeat;
background-position: center center;
Don't be confused look at the changes, look precisely, note that i change the Text color to Black..
button{
background-image: url(flow.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 60px;
width: 120px;
outline: none;
color: Black;
padding: 5px;
border-radius: 10px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
And this will be our result
NOTE: use the right url for the name of image.
Wow! that was great let move on to the next lesson on how to use background gradient.
Using Background gradient is very easy so don't feel that is going to be tough.
Add the below declaration to the CSS code:
background: linear-gradient(to left, red, blue);
Look at the below code, i replaced
background-image: url(flow.jpg);
background-repeat: no-repeat;
background-position: center center;
with, background: linear-gradient(to left, red, blue);
so don't be confuse when you run the below code see the preview.
button{
background: linear-gradient(to left, red, blue);
height: 60px;
width: 120px;
outline: none;
color: White;
padding: 5px;
border-radius: 10px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
The above button style is very beautiful, let still go a little further on the background gradient style.
Now replace the above background gradient with the below:
background: linear-gradient(to left top, yellow, blue 30%);
Let see the result..
Let us still practice one more and move over to the next lesson
Replace the following code in the background property
background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
background: radial-gradient(red, blue);
background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
Then preview you changes and you will love the output.
DROP YOU COMMENT IN THE COMMENT BOX TO GET UPDATED
NOW LET MOVE ON TO THE NEXT LESSON.
HOW CREATE A MULTIPLE COLUMN IN HTML
In
this section of the tutorial am going to show how to create a multicolumn web
layout with HTML and CSS.
Let
start by writing our HTML code now, follow all step no skip.
<!DOCTYPE
html>
<html>
<head> </head>
<body>
<div
class="first-colum">
<h2>A STUDENT
DILEMMA</h2> Peter shifts uneasily in his chair,
a knot forming in his stomach. His teacher, a woman he respects, has just finished
describing how Charles Darwin and his theory of evolution advanced scientific understanding and
liberated mankind from superstitious beliefs. Now she has invited her students to express their opinions on this
topic.
</div>
<div
class="second-colum">
<h2>HOW DO LIFE
BEGIN?</h2>
When you were a child, did you ever
startle your parents by asking, "Where do babies come from?"
If so, how did they respond?
Depending on your age and their personality, your parents might have ignored the question or given you a
hurried, embarrassed answer.
</div>
<div
class="third-colum">
<h2>IS ANY FORM OF LIFE
REALLY SIMPLE?</h2>
Your body is one of the most complex
structure in the universe. It is made up of some 100 trillions tiny cells-bone cells, blood cells,
brain cells, to name a few. In fact, there are more than 200 different types of cells in your body.
</div>
<div
class="forth-colum">
<h2>WHERE DID THE
INSTRUCTIONS COME FROM?</h2>
Why do you look the way you do?
What determines the color of your eyes, your hair, your skin? What about your height, your build, or your as semblance to one or both of your parents What tells the ends of your fingers to grow soft pads on one
side and hard, protective nails on the other?
</div>
</body>
</html>
That
is our HTML code now try to add the below CSS Code and see the result
.first-colum,.second-colum,.third-colum,.forth-colum{
width: 300px;
float: left;
text-align: justify;
margin-left: 2%;
}
Let see our preview below;
We shall be using this idea to create alot of things.
HOW TO CREATE A LOGIN FORM
Now let take a look at how to create a login form with HTML and CSS only without the use of Javascript or a database.
Let put down our HTML code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="first-tab">
<h6>Can she be the reasons behind your smiles?</h6>
<img src="rejoice.jpg" alt="">
</div> <br>
<div class="second-tab">
<form name="myForm" action="practice.html" onsubmit="return validateForm()" method="post"> <br> <br>
<H1>REGISTER TO CHAT WITH REJOICE</H1> <br>
<span id="alert">
<input type="text" id="firstname" name="firstname" required placeholder="Enter First name">
<input type="tel" name="telephone" id="Phone" placeholder="Phone Number" required>
<input type="email" name="email" id="email" placeholder="Enter Email" required>
<input type="password" name="password" id="password" placeholder="Enter Password" required>
</span> <br> <br>
<p>By clicking Register, you agree with Rejoice <a href="Terms.html">Terms & Condition</a>
</p> <br>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Now, add the CSS code below and see the our beautiful login form;
*{
padding: 0;
margin:0;
}
img{
margin-left: 3%;
border-radius: 5%;
width: 122%;
height: 65%;
margin-top: 25%;
}
.first-tab{
float: left;
width: 300px;
margin-top: 3%;
background-color: orange;
height: 650px;
}
.second-tab{
float: left;
width: 960px;
margin-left: 0%;
background-color: white;
}
p{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
margin-left: 8%;
text-transform: uppercase;
color: black;
font-weight: bold;
}
input[type=text],#email,input[type=tel],input[type=password]{
width: 70%;
padding:10px;
margin: 5px 0 22px 0;
border: none;
display: inline-block;
background: #f1f1f1;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 18px;
margin-left:8%;
border-bottom: none;
align-items: center;
}
H1{
text-align: center;
background-color: orange;
color: white;
width: auto;
height: 50px;
padding: 10px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bolder;
}
input[type=submit]{
width: 70%;
margin-left: 8%;
height: 50px;
background-color: orange;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
outline: none;
border: none;
}
form{
height: 100vh;
}
h6{
font-size: 25px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 3%;
color: rgb(240, 16, 16);
margin-top: 5%;
}
SEE THE PREVIEW BELOW:
NOTE: Always use the right image, make sure that the image url is correct and the extension is right e.g. rejoice.jpeg, rejoice.png, rejoice.gif, etc.
thanks bro its pretty cool keep up the good works
ReplyDelete