Muhammad Hussain 02 April 2020
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
1.Coffee 2.Tea 3.Coca Cola
I.Coffee II.Tea III.Coca Cola
- unordered lists (
- ) - the list items are marked with bullets
- ordered lists (
- ) - the list items are marked with numbers or letters
- The CSS list properties allow you to:
- Set different list item markers for unordered lists
- Set an image as the list item marker
- Add background colors to lists and list items
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
Muhammad Hussain 30 March 2020
-
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
-
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
-
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top- right and bottom-left corners):
-
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:
'''
#rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
Muhammad Hussain 20 March 2020
<div class="class1"> <img src="anyImage.png" alt=""> <div class="class2"> <h3>any text</h3> <p>Another text </p> </div> </div>
/Set image Size/ . class1 img { height: 60px; width: 50px; }
. class1 { display: flex; }
. class2 { margin: 0; padding: 0; display: block; }
Muhammad Hussain 19 March 2020
a, u { text-decoration: none; }
a { text-decoration: none ; } a:hover { color:white; text-decoration:none; cursor:pointer; }
Muhammad Hussain 18 March 2020
a:hover { background-color: yellow; }
The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective! nad :hover not works if any space given between hover and id or variable
- A set of plug-ins that allows the deveople
- ordered lists (