css-revision.css

/** CSS SELECTORS 
-------------------- 
CSS selectors are the valid ways we can use in selecting elements 
to apply style on to in our web page.
You can use the following as selectors :
1. Tag Name e.g p 
2. ID name e.g #red-color 
3. Class name e.g .red-color 
4. Child selecto e .red-color > h3 
5. Sibling selector .red-color + .blue-color 
6. Descendant Selector div e.g . # bg-blue 
7. Attribute selector e.g input[href="submit"] 
8. pseudo selecors e.g a:hover 
9. Multi selection e.g .button , .no-outline  
10 
**/ 


/** Changing the background color  of an element **/ 
body {
    font-size: 1rem;
}
.bg-dark {
    background:#000 ; 
} 
/* Changing the color of an element */
.white-color {
    color : #fff
} 


/** Font Styles **/
.font-1 {
    font-size : 5rem;
    font-style : oblique ; 
    font-weight: 650;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.papa::first-letter {
    font-size : 10rem;
} 
/** Text and letter styles **/
.space-text-1 {
    letter-spacing: 1rem;
    word-spacing: 10px;
    line-height: 1.8;
    text-transform: uppercase;
    text-decoration: line-through;
}
/** 
  Units of measurement
  The units of measurement specifies how to add length properties to some 
  of our css rules.
  Some of those properties include font-size , margin , padding , border , etc.
  A unit of measurement can be absolute (fixed 
 ' across all rendering device ) or relative ( responsive across
  different rendering device )
  The absolute units of measurement include the following 
  cm , in , px  , pt 
  The relative units of measurement are :
  em - Relative to the current parent font-size 
  
  rem  - Relative to the font-size of the root element 
  vw - Relative to 1% of the rendering device's width larger dimension
  vh - Relative to 1% of the rendering device's height larger dimension
  % - Relative to the size of the rendering viewport 
**/
/** THE BOX MODEL THEORY 
The box model theory states that every element on our page is a box.
This box is bounded on all four sides. The boundary is called border.#
The gap between on box , and the other is called margin.
The distance between a box's border , and the contents contained within it is called 
padding.
We can use css border , margin , and padding property to style how our box appears.
Example : 
You can style a specific portion of the box whether top , right , bottom , 
or left instead of styling the entire page.
**/
.m-b-1 {
    margin-bottom : 1rem;
} 
.m-b-2 {
    margin-bottom : 2rem;
}
.border-2 {
    border:2px solid #000;
}
.border-left-2 {
    border-left : 4px double #333;
} 
.border-solid {
    border : .05rem solid #ccc;
} 
.radius-5 {
    border-radius: .25rem;
}
.pad-1 {
    padding : 1rem
}
.p-t-1 {
    padding-top : 1rem
}
.p-b-1 {
    padding-bottom : 1rem
}
.p-r-1 {
    padding-right : 1rem
}
.p-l-1 {
    padding-left : 1rem
}
.w-50 {
    width : 50%;
}
.h-300-px {
    height : 300px;
}
.center-text {
    text-align: center;
}/** Applying Styles to table **/
.table , .table th , .table td {
    border-collapse: collapse; 
    border-spacing: 0.625rem; 
    font-size: 1rem;  
    padding : .8rem ;
}
.table-with-border  , .table-with-border th , .table-with-border td {
   border : 1px solid rgba(0,0,0,0.46); 
}
.bg-blue-dark {
    background :#339;
}
.bg-orange {
    background : #fa0;
}
.bg-zebra  tr:nth-child(odd){
    background : #ccc;
}
.bg-zebra tr:nth-child(even){
    background :#f2f2f2;
}
.high-table-head th {
    height : 1rem;
    background : dodgerblue;
    color : #fff; outline : none; 
    /* border : none; */
}
.caption {
    font-size: 4rem;
    /* caption-side: bottom; */
}
/*Styling tables*/ 
.input{
    display : block ; 
    width : 40%;
    margin-bottom:8px;
}
.input-border-faint {
    border : .85px solid #ccc;
}

.input-border-faint:focus {
    outline : 0 ; 
    border : .1px solid #ccc;
    box-shadow: 0 0 0 0.01rem #339;
}
.faint-label label {
    font-size: .85rem;
    font-weight: 250;
    color : rgba(0,0,0,0.46)
}
.input::placeholder{
    color: #f00;
}
.input[type="submit"]{
    background:rgb(1, 29, 1);
    color :rgba(255 , 255 , 255 , 0.65) ; 
    padding:6px 12px;
    font-size:1.2rem;
    font-weight: 550;
    border-radius: 10px;
}
/* Styling list*/
.no-style {
    list-style-type: disc;
    list-style-position: inside; /** The item is padded **/
    list-style-image: none;
    /**url(../images/fearless.jpg);Should an image be used as the list marker*/
}
/**Styling Images */
/*
1. Give an image a radius 
2. Create a circular image 
3. 
*/
.img-circle {
   height:50px;
   width:50px;
  border-radius: 50%;
}

.img-thumbnail {
    border : 1px solid #ddd;
    border-radius : .025rem;
    padding:.5rem;
    width: 10rem;
    height:10rem;
    /* opacity: 0.5; */
    filter: grayscale(100%);
}
.img-thumbnail:hover {
    box-shadow: 0 0 2px 1px rgba(0 , 155 , 160 , 0.5);
}
.center {
    margin-right: auto;
    margin-left: auto;
    display:block
}
.polaroid {
    width : 75%;
    background : #fff;
    box-shadow: 0 4px 8px 0 rgba(0 , 0 , 0 , 0.2) , 0 6px 20px 0 rgba(0 , 0 , 0 , 0.19);
    margin-bottom: .65rem;
}
/*Css overflow , and display property*/ 
.hide {
    display : none 
    /*block , inline , inline-block , grid , flex , table*/
}
.overflow { 
    overflow : auto ; 
    /*overflow specifies whether to clip the content or to add a 
    scrollbar when the items no longer fit into the container
    scroll(adds a scrollbar after clipping) , hidden(clipped  , and only some is seen )
     , by default the overflow is seen(visible)-It is not clipped 
     You can do your overfloat in x and y axis - overflow-x
     */
} 
/*visibililtiy : hidden hides the element but the space remains
An inline element will not accept height and width
Inline-block can accept width and height*/
.a , .b , .c {
    background : rgb(68, 1, 1);
    padding:5rem;
    /* margin-right: 1rem; */
    width:20%;
    float:left;
    text-align: center;
    color:rgba(255 , 255 , 255 , 0.65) ;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 8px 0 rgba(0 , 0 , 0 , 0.2) , 0 6px 20px 0 rgba(0 , 0 , 0 , 0.19);
}
.b {
    background : rgb(19, 19, 36);
    float : left;
}
.c {
    /* clear: both; */
    background: rgb(2, 59, 2);
}
/*Working With Float 
* An element when floated will push the element that follows to take its place 
* while it moves to the direction stipulated by the float.
*
*
*
*
*/
.border-sorround {
    border : 2px solid #000;
    clear: both;
}
.relative {
    position: relative;
    top:30px;
    left:50px;
    background:#fa0;
    color:#fff;
    background-image: url(../images/smile-90.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    clear: both;
    width:10rem;
    height:10rem;
    z-index: 999999;
}

.absolute {
    position: absolute;
    top:130px;
    right:50px;
    background:rgb(228, 4, 41);
    color:#fff;
    width:30%;
    height:30%;
    
}
.fixed {
    position : fixed ; 
    top : 0 ; 
    left : 0 ; 
    z-index: 99999;
}
ul.d-inline {
    background : #fff;
}
ul.d-inline a , ul.d-inline a:focus , ul.d-inline:hover {
    text-decoration: none;
    color : #000;
    font-size: 1.3rem;
}
ul.d-inline > li {
    display: inline-block;
    margin-right :1rem;
}
.sticky {
    position:sticky ; 
    top : 80px;
    left:0;
}
.bg-dark {
    background : #000
}
.white-text {
    color : #fff
}
.pad-10 {
    padding :10px
}
.wrap {
    display : -ms-flexbox ; 
    display : flex ; 
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
/* Responsive Layout */
.wrap-1 , .wrap-2 , .wrap-3 , .wrap-4 , .wrap-5 , 
.wrap-6 , .wrap-7 , .wrap-8 , .wrap-9 , .wrap-10 , 
.wrap-11 , .wrap-12 {
  position : relative ; 
  width : 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left : 15px;
}
.wrap-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.wrap-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.wrap-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.wrap-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.wrap-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.wrap-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.wrap-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.wrap-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.wrap-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.wrap-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.wrap-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.wrap-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}