IDEA CREDIT => @Surreal.dev

1. FIXING AN ELEMENT'S POSITION

/* suppose you want to fix your sidebar's position and size. .sidebar {

position: absolute;

top: 15px;

right: 15px;

width: 300px;

height: 150px;

}

** use this method carefully and test it beforehand on every screen size and resolution so that it doesn't break your site's design.

2. VISITED LINK STYLING

Use CSS code to tweak how the links look before and after visitors have clicked on them.

a:link {

color: #ff0000; the unvisited link is red */

}

a:visited {

color: #ee82ee; the visited link turns violet */

}

3. POSITION CONTENT IN THE CENTER

Placing content in the middle of the screen might be tricky. However, you can use position: absolute to override the dynamic placement and always position the content in the center.

section {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%); padding: 30px;

}

4. HOVERING EFFECT DELAYS

The :hover selector is a CSS pseudo-class which allows you to create a hovering effect. However, you can further stylise this by adding a transition element to delay the hovering effect.

.entry h2{

font-size: 48px; color: #000000; font-weight: 750;

}

/* Next, add a delay to the hover effect */

.entry h2:hover{

color: #f00;

transition: all 0.5s ease;

}

5. INITIAL LETTER STYLIZING

Drop caps option is also written into the CSS language, so you can effortlessly use it and give your paragraphs a new look.

p:first-letter { 

display: block; 

float: left;

margin: 5px; 

color: #000000; 

font-size: 60px;

}

You can SUBSCRIBE to the my NEWSLETTER to receive updates in your mail