Standard CSS

CSS Reset

CSS Reset
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-size: 1rem;
  padding: 2rem 0;
  text-rendering: optimizeSpeed;
}
.container {
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

Pop Up Tool Tip

HTML

<div class="couponcode">First Link
    <span class="coupontooltip"><a href="http://www.outwater.com">click below</a> to continue and some more text</span>
</div>

<div class="couponcode">Second Link
    <span class="coupontooltip"> Content 2</span>
</div>
<div class="menu">
    <ul>
        <li> one</li>
        <li class="two"> one</li>
        <li class="two"> one</li>
        
    </ul>
</div>
  

CSS

.couponcode:hover .coupontooltip {
    display: block;
   
}


.coupontooltip {
    display: none;
    background: teal;
    margin-left: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
    line-height:26px;
}

.couponcode {
    margin:100px;
}
 .menu > ul {
     list-style-type:none;
    display:none;
}
 .menu:hover ul > li {
     display:inline-block;
 }

Tabs

HTML

<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       
       <div class="content">
           Tab 1
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       
       <div class="content">
           Tab2
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>
     
       <div class="content">
           tab3
       </div> 
   </div>
    
</div>
===CSS===

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: teal;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Attribute Selectors

Css [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute  
 a[target] {
    background-color: yellow;
}

CSS [attribute=value] Selector
The [attribute=value] selector is used to select elements with a specified attribute and value.


  The following example selects all <a> elements with a target="_blank" attribute:
  
 a[target="_blank"] { 
    background-color: yellow;
}

CSS [attribute~=value] Selector
The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"

[title~="flower"] {
    border: 5px solid yellow;
}

The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

CSS [attribute|=value] Selector
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!

 [class|="top"] {
    background: yellow;
}

CSS [attribute^=value] Selector
he [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value does not have to be a whole word!

[class^="top"] {
    background: yellow;
}

CSS [attribute$=value] Selector
The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with "test":

Note: The value does not have to be a whole word!

[class$="test"] {
    background: yellow;
}

CSS [attribute*=value] Selector
The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!

[class*="te"] {
    background: yellow;
}

Styling Forms
The attribute selectors can be useful for styling forms without class or ID:

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

Get rid of space under image

Your image will have a small space below it

img{
max-width: 100%;
display: block; // This will remove the space under  the image
}

---