css three type

<link rel="stylesheet" type="text/css" href="mystyle.css">

css class,id,tag
selector(#. ,*)(p.demo)(.main .sub .li)

------ border
border-style: solid;
border-width: 5px;
border-color: green;
border:5px solid green;

border-top-style: dotted;
border-top-width: 5px;
border-top-color: green;
border-top:5px solid green;

border-right-style: dotted;
border-right-width: 5px;
border-right-color: green;
border-right:5px solid green;

border-bottom-style: dotted;
border-bottom-width: 5px;
border-bottom-color: green;
border-bottom:5px solid green;

border-left-style: dotted;
border-left-width: 5px;
border-left-color: green;
border-left:5px solid green;

border-radius: 5px;

--------- margin

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
margin:10px 20px 30px 40px;
margin:10px 20px;
margin:10px;

--------- padding

padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
padding:10px 20px 30px 40px;
padding:10px 20px;
padding:10px;

---------- CSS Box------

------------------
| Margin |
------------------
------------------
| border |
------------------
------------------
| padding |
------------------
------------------
| conent |
------------------

------------ text
color: blue;
text-align: center;
text-decoration: none,overline,line-through,underline;
text-indent: 50px;
letter-spacing: 3px;
line-height: 0.8;
direction: rtl;
word-spacing: 10px;
text-shadow: 3px 2px red;
-------------------------------------------
text-transform: uppercase,lowercase,capitalize;

-------- Font Awesome Icons

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

--------- ads on extension color zilla

--------- background

background-color
background-image
background-repeat
background-attachment:fixed,scroll;
background-position

----------- font
font-family:'Courier New';
font-style: normal,italic,oblique;
font-size: 40px;
font-weight: bold;

----------- anchor link

a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}

----------- lists
list-style-type: circle;
list-style-type: square;
list-style-image: url('sqpurple.gif');
list-style-position: outside,inside;

----------tables
border: 1px solid black;
border-collapse: collapse;
vertical-align: bottom;
text-align: left;
tr:hover {background-color: #f5f5f5;}
tr:nth-child(even) {background-color: #f2f2f2;}

-----------------------------------------------------------------

----------- display
display: none,block,inline;
visibility: hidden,visible;

--------- float
float:left,right;
clear: both;

---------- position
position:static,relative,fixed,absolute,sticky;

--------- overflow
overflow: hidden,visible,scroll,auto;

------selector:pseudo-class
a:link,a:visited,a:hover,a:active,p:first-child,p:last-child

-----selector::pseu do Pseudo-elements
p::first-line,p::first-letter

-----opacity
opacity: 0.5;
background: rgba(76, 175, 80, 0.3)

-------CSS Combinators
child selector (>) div > p
near sibling selector (+) div + p
all sibling selector (~) p ~ ul

------css with Attribute

a[target="_blank"]
input[type="submit"]

---- sub menu with jquery drop down

------------gradient
background-image: linear-gradient(to left,red 10%, yellow);
background-image: repeating-linear-gradient(to left,red 10%, yellow);
background-image: radial-gradient(red 10%, yellow);
background-image: radial-gradient(circle,red , yellow ,orange);
background-image: repeating-radial-gradient(red 10%, yellow 20%);

---- animation

-----
final 5 page template with best design
------- popup