Category: CSS tutorials

How to add a gradient background color

There are three different gradient types – linear, radial and conic. Gradient backgrounds consist of minimum two colors… background-image: type(direction, color1, color2, …); First we have to choose the type – linear, radial or conic. Next we need to choose the direction. This could be left to right, top to bottom, 45deg (degree) etc. The […]

Read more... Write a comment

How to add a background color

If you like to set a background color on a div or any other html element you can use this code… background-color: #000; This would make the background of the div black. You can use any color code you like. Use a color picker to find your preferred color. If you need to add transparency […]

Read more... Write a comment

How to change font weight with CSS

The font weight defines the thickness of your font. You can use this to highlight an important piece of text or change the style of headlines. Different fonts supports different styles so you may not be able to use all values on a specific font. font-weight: bold; This would make the font bold and apply […]

Read more... Write a comment

How to add a border with CSS

You can use CSS to apply borders to almost any element like images, text, div-tags etc. A border CSS style could look like this… border:1px solid #2a2a2a; This style would add a solid border with a width of 1px and the color #2a2a2a. You can set any border width and a border can have different […]

Read more... Write a comment

How to change font size with CSS

If you need to change the font size in WordPress with CSS use this snippet… font-size: 28px; This would change the size to 28px. Font sizes can be set with px or other values like percentage, em, pt, etc.

Read more... Write a comment

How to change font color with CSS

If you need to change the font color in WordPress or another website you can use this snippet… color:red; This would change the color of your font to red. You can also use HEX colors like this… color:#2a2a2a; This would apply a dark grey color to your font. You can use an online color picker […]

Read more... Write a comment