Showing posts with label STYLING. Show all posts
Thursday, January 17, 2019
COMPREHENSIVE GUIDE ON H0W TO SET THE MOUSE CURSOR STYLE USING CSS
CSS
,
MOUSE
,
STYLING
No comments
:
In this lesson, I teach you very important secrets behind mouse style whenever it is placed on certain texts on a web page. I will also teach you how to create a custom mouse. Let’s say you want your image to appear whenever the mouse touches a particular text or content on a web page. Never mind, I will dish out the tricks to you free of charge. Let’s get started.
There are a whole lot of values you can possibly set your mouse to, in Cascading Style Sheet apart from using an image. Some of them include
1. Default (i.e arrow shape)
2. Progress
3. Move
4. Not-allowed
5. No-drop
6. Wait
7. Help
8. Text
9. Pointer
10. Crosshair
11. Auto
12. Se-resize
13. Nw-resize
14. Col-resize
15. N-resize, etc.
Whenever you want to set the cursor style to any of these values above, just write cursor:#; (# is where you will put the value name).
Let’s consider an example,
HTML
<span>Example of cursor style for 'not-allowed'</span>
<p>The cursor style will change to ''not-allowed'' when it touches the text above.</p>
CSS
span{
cursor: not-allowed;
}
When you reference the CSS
document in HTML, it will look like this,
SAVE AND OPEN IT, AND PLACE YOUR MOUSE ON THE FIRST SENTENCE, IT WILL LOOK LIKE THIS
show it clearly )
FOR CUSTOM IMAGE
If you want a custom image to appear instead of cursor shapes. Then write the following in your CSS file.
CSS
Span{
Cursor: url(your image url.png),auto;
}
NOTE
The ‘auto’ at the back of the image URL means that if your image is not supported by your web browser, the cursor style will change to auto.
WRAPPING UP
If you have any challenge or question with regard to the above lesson, feel free to use the comment box. We are moving to CSS 3 in our next lesson, Stay practical.
Wednesday, January 16, 2019
HOW TO CREATE A PROFESSIONAL LOOKING TABLE WITH CSS| STEP BY STEP GUIDE
CSS
,
STYLING
,
TABLE
No comments
:
Hi, in this lesson, I am going to take you by hand and walk you through various steps on how to create a professional looking table using Cascading Style sheet. In our HTML lesson, precisely lesson Five, we extensively discussed table features and how to use HTML to create a common table. In this lesson, I will be a little bit technical in my expression so I adjure to pause this lesson and click here to refresh your memory with structures and fundamentals of creating a table.
The new features I’m going to introduce to you before I proceed include the following below:
a) Border-collapse: It is used to indicate whether table borders should be collapsed into a single border or separated as default.
b) Border-spacing: It is used to change the spacing of a border if border-collapse is separated.
c) Caption-side: It is used to indicate the position of the table caption. It can be set at the bottom or top. You will understand better if will move into examples.
d) Text-transform: It is used to determine whether the text should be in uppercase, toggle or lower case.
e) <th> element: It means table heading. It is used to specify the heading of a table.
EXAMPLE
Write the following codes in your text editor
HTML FILE
<table border="1">
<caption>CODING LEGIT COURSES</caption>
<tr>
<th>Course name</th>
<th>Lecturer</th>
<th>Time</th>
</tr>
<tr>
<td>HTML Course</td>
<td>Mabel Idike</td>
<td>8:00pm</td>
</tr>
<tr>
<td>CSS Course</td>
<td>Lilian Isaac</td>
<td>11:00pm</td>
</tr>
<tr>
<td>JavaScript Course</td>
<td>Daniel Unachukwu</td>
<td>12:00pm</td>
</tr>
<tr>
<td>Java Course</td>
<td>Kingdom Eleru</td>
<td>6:00pm</td>
</tr>
CSS FILE
caption{
caption-side: top;
}
caption{
color: mediumseagreen;
font-weight: bolder;
}
table,tr,td{
color: blue;
border-color: green;
text-align: center;
font-weight: bold;
}
th{
color: red;
}
REFERENCE THE CSS IN YOUR HTML DOCUMENT. IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
You can add more codes to the CSS file to make your table look awesome. For instance, you can add border-radius: 15px, border-collapse, text transform, etc. Our next lesson is the most interesting part of CSS. See you then.
Tuesday, January 15, 2019
HOW TO USE IMAGE AS A LIST ITEM MARKER IN CASCADING STYLE SHEET
CSS
,
IMAGE
,
STYLING
2 comments
:
Can you vividly remember one of our lessons in HTML where I talked about ordered list and unordered list? Fine. In that lesson, I talked about ordered and unordered list; how to use numbers or bullets for listing items. If you’ve forgotten, then don’t feel shy. Just click Here for a brief reminder. In this lesson, I’m going to be adding milk and sugar to the tea using CSS. What I mean here, is that I will be teaching you how to use images or icons in addition to the normal number or bullets you've learned earlier.
Apart from images or icons, you can as well use awesome shapes such as circle, square, triangle etc to mark your lists items. I will teach you everything in this lesson if you are willing to follow me practically with that smartphone in your hand. Let's get started.
For example, let’s say I want to list my favorite foods using one particular picture (you can use more than one if you wish), then all I need to do is to write the following codes into my text editor. (You can also write them, I will explain later.)
HTML
<p>Here are my favorite Foods</p>
<ul>
<li>Fried Rice</li>
<li>Squashed Potato</li>
<li>Ofe Nsala</li>
</ul>
CSS
ul{
list-style-image: url('give.jpeg');
list-style-position: inside;
}
li{
font-size: x-large;
}
REFERENCE THE CSS IN YOUR HTML FILE. IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
NOTE:
PLEASE, USE SMALLER IMAGE, WHEN YOU ARE PRACTICING. I DON’T HAVE ANY ON MY COMPUTER.
EXPLANATION
a) List-style-image: is used to define the image you want to use as list item.
b) List-position: Is used to specify the position of the list marker box. It can be outside or inside. To know the difference, try replacing the above example with outside
c) color: Is used to define the color of the list item.
d) Font-size: Is used to specify the size of the list item. It can be small, medium, large, xlarge or xxlarge.
To Add Circle or other shapes
In your HTML
write
<ul class=''circle''>
and then begin to list your items with <li> tags. When you're done, close the <ul> tag.
CSS
<ul class=''circle''>
and then begin to list your items with <li> tags. When you're done, close the <ul> tag.
CSS
Go to your CSS file and remove ''list-style-image'' and add
ul.circle{
list-style-type: circle;
}
WRAPPING UP
Our next lesson will be the last on CSS basics. We will move to the latest version of CSS (i.e CSS3) and subsequently move to JavaScript course. Keep practicing.
Saturday, January 12, 2019
CREATING AMAZING SHAPES WITH CASCADING STYLE SHEET|SEE FOR YOURSELF
CSS
,
SHAPES
,
STYLING
1 comment
:
CSS is reputable for its miraculous way of beautifying web pages. In today’s lesson, I’m going to teach you something a little bit advanced, so if you’ve not studied my previous lesson, then I’m afraid you will be confused and frustrated when we get to the examples. But if you’ve been following me, then you will have no iota of confusion in this lesson. Let’s move on.
There are, however, few things I want you to know before going further. These things, together with other concepts in our previous will help prepare you in the practical aspect of this lesson.
They include:
a) Box-shadow: This is a feature in CSS 3 that is used to determine the shadow of a box.
b) Z-index: It is useful for creating a parallel effect on a box. the box with higher z-index value will be on top of the one with a lower z-index value. You can build scrolling headers or navigation bars using z-index property.
Having considered these few technical elements, we can now move into examples.
Open your text editor and write the following codes
In HTML document
<body>
<div class="a">Blue</div>
<div class="b">Red</div>
<div class="c">Green</div>
<div class="d">Orange</div>
<div class="e">Black</div>
<div class="f">Yellow</div>
<div class="g">purple</div>
</body>
In External CSS
.a{
color: #FFF;
background-color: blue;
margin-bottom: 15px;
width: 100px;
height: 100px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 1;
}
.b{
color: #FFF;
background-color: red;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 50px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 2;
}
.c{
color: #FFF;
background-color: green;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 100px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 3;
}
.d{
color: #FFF;
background-color: orange;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 150px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 4;
}
.e{
color: #FFF;
background-color: black;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 200px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 5;
}
.f{
color: black;
background-color: yellow;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 250px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 6;
}
.g{
color: white;
background-color: purple;
position: relative;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: 300px;
box-shadow: 10px 10px 5px 5px #888;
z-index: 7;
}
REFERENCE THE EXTERNAL CSS IN YOUR HTML DOCUMENT. IT WILL LOOK LIKE THIS AFTER YOU’VE REFERENCED IT.
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
You have any questions with regard to the above example, feel free to make use of the disqus comment box below. Our next lesson will be more expectional. Keep investing in yourself.
Friday, January 11, 2019
HOW TO USE BORDER WIDTH, BORDER COLOR AND BORDER STYLE PROPERTY IN CSS
Hi, in this lesson, I will be teaching you how to use border width, border colour and border style in CSS and most importantly, explain some of the technical things in our previous lesson. We have a few more lessons before we move into CSS 3. Without wasting time, let me quickly describe both border width and border colour properties before we move to examples and general explanations.
Border width property is used to define the width of the border in CSS document. That is, how wideness a border can be is usually specified using border-width property. The same thing applies to border colour and border style property.
FORMULA
a) For Border width: use ‘’border-width:#px;
b) For Border color: use ‘’border-color::#; (‘#’ can be color name, hexadecimal value or RGB)
c) For border style: use ‘’border-style:#; (‘#’ can be set as solid, dotted etc)
I illustrate all of these in one example and then explain later together with our previous lesson.
So, open your text editor, and key in the following codes
HTML
<p class="first">
I thank Daniel Unachukwu Foundation for this free coding lesson.
<p class="second">
I will see that i utilize this opportunity.
</p>
CSS
p.first{
color: white;
font-size: 250%;
border-color: blue;
border-width: 7px;
padding: 30px;
border-style: solid;
background-color: black;
}
p.second{
color: orange;
font-size: 200%;
border-color: blue;
border-width: 3px;
border-radius: 6px;
padding: 12px;
border-style: ridge;
background-color: green;
}
REFERENCE THE CSS IN THE HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
EXPLANATION
1. In our previous lesson, we used ''border-radius.'' The function of this border-radius is that it makes the border edge curved or round.
2. Text align that we also used in our previous lesson defines the position of the text inside the border.
3. They are so many different types of border styles namely; solid, dotted, dash, ridge, groove, hidden, outset, inset, none, double, etc. The border style specifies the look of the border.
WRAPPING UP
Subscribe to:
Posts
(
Atom
)
