Let’s dive into some useful css tips or tricks as the case may be, that will be very helpful and educative for developers especially newbies and beginners.

I suppose you already know the meaning, basics and syntax of css(cascading style sheets) which is the bedrock of styling, positioning and other cool effects across the web.

Css is broad and complicated to some extent thereby making it a little impossible to harness and explore all the superpowers of the style sheet. But as the saying goes learning never ends, so explore these useful tips below.

Display: block.

Block elements by default take up the whole available width of the parent container and other elements that follow take up new lines in order to occupy the available width of their container.

The width, height, padding and margin can be set for block elements.

Display: inline.

Inline elements, on the other hand, don’t take up the whole available width in the parent’s containers like the block elements rather it takes the width equal to the size of its text.

This property plays a huge role in the layout of webpages, check this out to learn more about css layout.

The height and width property cant be set for inline elements although the padding and margin property can be set.

Centering.

An element can be centered on a web page by setting the css text-align property to center, by so doing the text is centered horizontally.

 p {
text-align: center;
}

A div element or any other element can also be centered by setting the display property to block and the margin property to auto. The desired result won’t be achieved until the width property is set to a value below 100%.

div {
display: block;
width: 80%;
margin: auto;
}

To center an element vertically, you should make sure the height and line-height property have the same value.

div{
height: 80px;
line-height: 80px;
}

Overriding.

This would be helpfull when you are in a situation where you need to override another css style given to a specific element, use !important after the style in your css.

h1{
color: red !important;
}

This will change the colour of the h1 element to red even if it has been given another colour previously.

Target Specific Child Element.

This will be very helpfull when styling list items, you just need to count and know the specific item you want to style and then go ahead and style it.

li:nth-child(2) {
color: white;
text-style: underline;
}

This css code above targets the second item in a list and makes it blue and underlined.

:before selector.

This selector allows you to target a specific element and add content before it.

This is usually handy when you want to insert an icon before an element.

h1:before {
content: "Read"
color: blue;
}

:after selector.

Just like the: before selector the: after selector allows you to target a specific element and add content behind it.

This Is also handy when you want to add a text(Read more) to the end of a blog post.

p:after {
content: "Read More";
color: red;
}

Text-transform.

Text-transform saves you the stress of going back to write all text in capital or small letters instead you can just set the text-transform property to uppercase if you want all the text to be in block letters.

p {
text-transform: uppercase;
}

You can set the text-transform property to lowercase if you want all the text to be in small letters.

p {
text-transform: lowercase;
}

And you can also set the text-transform property to capitalize if you want every first letter of each text to be in capital letter.

p {
text-transform: capitalize;
}

Highlight Behaviour.

It is possible to customize the way your text appears when you highlight them, you can do this by using these simple steps.

p::selection {
background: red;
color: white;
}

Blending Colours and Images.

Blending colours with background images could not be any easier, all you need is to make use of the background-blend-mode property by setting it to any value that suits your desired design.

body {
background-image: url(...);
background-color: blue;
background-blend-mode: darken;
}

Gradients.

Gradients are really useful in making websites and application visually appealing to the eyes because of the colour combinations, but they are also websites that can help ease the stress and generate gradients for you here.

body {
background: rgba(60, 183, 164);
background: radial-gradient(
  circle
  rgba(60, 183, 164, 1)0%;
  rgba(55, 80, 219, 1)100%;
}

Conclusion.

These are just a few out the many css tips and tricks available on the net but this article should help in one way or the other when building your next project.

If you also have more tips add leave them in the interactive section below and visit here to learn about more css tips.