Home Web DevelopmentHTML Top 10 CSS tricks you should know

Top 10 CSS tricks you should know

CSS is an acronym for Cascaded Style Sheet.  In the modern world, it seems that every business has a functional website. It’s a necessity to make your website professional and also appealing to the human eye. The better your website is, the higher the chances of visitors staying on your website. This is where the power of CSS comes in – styling your web pages.

The styling of CSS is growing powerful every day and it is also fun to understand and implement them. There are so many CSS tricks out there that you can use, but I have compiled the top 10 CSS tricks that you should know.

Center vertically

It’s always a challenge to make content run properly on multiple devices due to differences in resolution.  You will need to learn how to resize the page’s content per the size of the browser. With this, there are a variety of methods you can use to center your content vertically.

Flex container

A flex container expands items to fill available free space or shrinks them to prevent overflow. Define a flex class and align the elements to the center.

.flex-vertically-center {
  display: flex;
  align-items: center;
}

Using absolute and relative container

To center vertically, you can use an absolute element inside a relative container. The absolute allows placing the elements relative to its parent position. Since the relative position is the parent position, we can therefore place the element on the center.

.container-relative {
  position: relative;
}.element-absolute {
   position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Hover effect

The ‘: hover’ allows creating of a hovering effect. We can add further styling to this to delay the hovering effect by the use of transition. This draws users’ attention as it creates a sense of movement. This can be applied in a link or text.

 #btn {
	  font-size: 48px;
	  color: #000000;
	  font-weight: 750;
	}	
	/* Next, add a delay to the hover effect */
	#btn:hover{
	  color: #f00;
	  transition: all 0.10s ease;

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Hover effect</title>
	<style type="text/css">
	 #btn {
	  font-size: 48px;
	  color: #000000;
	  font-weight: 750;
}
/* Next, add a delay to the hover effect */
	#btn:hover{
	  color: #f00;
	  transition: all 0.10s ease;
	</style>
</head>
<body>
	<button id="btn"> Hover me</button>
</body>
</html>

Drop-cap

Adding a drop cap draws the user’s attention. A drop cap makes the first letter bigger and looks very nice. In your paragraph, you may need to use this trick to draw the reader’s attention, increasing the visitor’s stay on your website. There are two ways to add a drop-cap in CSS. The first is to wrap the first letter of a paragraph with a span tag and then use the span to style the first letter without affecting the rest of the paragraph.

 span {
  float: left;
  line-height: 85%;
  width: .7em;
  font-size: 400%;
  font-family: georgia;
  }

The second way is by styling the first child. Again, the target point is the first letter of the paragraph.

p:first-child:first-letter{ 
  float: left;
  line-height: 85%;
  width: .7em;
  color:#ff0000;
  font-size:80px;
  font-family: georgia;
}

Example

<!DOCTYPE html>
<html>
<head>
	<title>Hover effect</title>
	<style type="text/css">
 span {
  float: left;
  line-height: 85%;
  width: .7em;
  font-size: 400%;
  font-family: georgia;
  }
  p:first-child:first-letter{ 
  float: left;
  line-height: 85%;
  width: .7em;
  color:#ff0000;
  font-size:80px;
  font-family: georgia;
}</style>
</head>
<body>
    <p>With every new browser version release, you might get new CSS tricks arising. The styling of CSS is growing powerful and also fun. There are so many CSS tricks out there that you can use but I have combined the top 10 CSS tricks that you should know.</p>
     <p><span>E </span> very new browser version release, you might get new CSS tricks arising. The styling of CSS is growing powerful and also fun. There are so many CSS tricks out there that you can use but I have combined the top 10 CSS tricks that you should know.</p>
</body>
</html>

Ellipses

This is yet another trick to truncate a very long text. If you have a very long text and do not want to display it all, you can use the 3 dots(…) referred to as ellipsis at the end of the text to show continuation. To achieve this, you will need  3 properties. The ‘overflow: hidden’ prevents text from being rendered outside the container, ‘white-space: nowrap’, which prevents the text from going into multiple lines, and the ‘text-overflow which sets the (…).

p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Hover effect</title>
	<style type="text/css">
 p{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 400px;
}</style>
</head>
<body>
    <p>With every new browser version release, you might get new CSS tricks </p>
</body>
</html>

From the above code, you will note we have used ‘max-width: 400px;’ this indicates that once it reaches the max-width, it will truncate the paragraph and add in the ellipses.

Text Wrapping

You may have experienced this awesome trick in a word document, where you wrap an image with text. This is also a super cool feature in CSS, placing an image relative to the text.  We use the float property to float the image inside the text, then use the shape-outside property to escape pixels in the image.

img {
  float: right;
  shape-outside: url(image-url);
}

Animated text tooltips

A Tooltip in CSS displays more information once an element is hovered on. You can position this Tooltip on the right, left, top, or bottom.

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin-top: 40px;}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover me
  <span class="tooltiptext">Animated text</span>
</div>
</body>
</html>

Output:

Annimated-tooltip
Animated-tooltip

Overriding styles using important

The important property overrides the existing CSS style. Let’s take an example where you have ‘h2’ tag on multiple pages. Half of them are within the ‘div section’. You may need to change their color by overriding the existing styling of ‘h2’ by simply using the ‘!important’ rule.

h2 {
	color: purple;
}

div.sec h2 {
	color: blue !important;
}

Applying the CSS trick above all ‘h2’ elements will change their color from purple to blue.

Responsive text

I find this trick handy for all front-end developers. For example, applying mathematics in CSS using the Calc function. The font-size property allows you to give a constant font size to your text. You may need your font size to adapt to the size of the site. This is where this function becomes useful.

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Center horizontally

The margin property allows one to align items relative to the page. Let’s take, for example. You need to set an image centered horizontally. Defining the margin-left and the margin-right may be tiresome. Instead, you can use the ‘auto’ CSS trick that will center your block item horizontally.

.image{
  margin: 0 auto;
}

Link states

This trick allows you to differentiate actions performed on your website links. We have four link states.

  • a: link – this the normal un-visited link
  • a: visited – this a link that a user has clicked on/visited
  • a: hover – this the current link that the user’s mouse is hovering on.
  • a: active – this is a link that the user has clicked on/selected.

You may decide to define the specific colors once an action is initiated on a link.

a:link {
  color: #ff0000;
  }
  a:visited {
  color: purple;
  }
  a:hover {
  color: #ff00ff;
  }
  a:active {
  color: blue;
  }

You may also like

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More