Modestas Mankus

Modestas Mankus

July 2019
« Sep    


Modestas Mankus

5 CSS Properties & Elements You Should Use On Your Website

Modestas MankusModestas Mankus

CSS or also known as Cascading Style Sheets are the foundation of presentation on the world wide web. While style sheets are not necessary when building a site, the majority of websites have it. If you have used a website builder to create a site, you might not have encountered CSS. However, you will more than likely hold a style sheet somewhere in the root of your website’s directory.

To use these elements and properties, you won’t necessarily need to change the original style sheet by hand, as you most likely will be able to add it in the additional CSS section, depending on the software or website builder you are using.

Here are five well-fitting CSS tricks that can improve the visual style of your website.

Selection Element
One of my favourite CSS elements is the selection highlight pseudo-element, which enables you to change the colour of the highlighted areas on your website. This element works on two properties: background and colour. These can be assigned to the body of the website or certain segments such as paragraphs.

::selection {
background: #36242c; /* WebKit/Blink Browsers */
color: #f4f4f4; 
::-moz-selection {
background: #36242c; /* Gecko Browsers */
color: #f4f4f4;
Rounded Corners
Border-radius property is one valuable property if you want to give your elements rounded corners. It works relatively basically and can be assigned well to paragraphs. The border-radius property can also work with four different values, which means each side can have their dimensions and thus alter the shape of your element.

<div id="mybox">
<p>This is my cool rounded corner box</p>
#mybox {
    border: 5px solid pink;
    padding: 55px;
    border-radius: 50px 25px 25px 25px;

Another great property which works well when designing your website is the opacity property. This property ranges from 0.0 to 1.0, which means the higher the number, the more visible your image or element is. You can apply this property to a muddled website which can improve the visual look and readiness of your website if applied well.

img {
    opacity: 0.5;

#mybox {
    opacity: 0.8;

Linear Gradient
Gradients appear to be in right now, so if you are looking to replicate the smooth gradients on your website without having to mock up a well-crafted header or background in Adobe Photoshop or Adobe Illustrator, this is for you. The linear gradient works with several properties which are background, height and width. The background is the actual gradient, while the height and width are the properties which decide the size of your element. Furthermore, the last number in the line of numbers represents the opacity of the gradient.

<div id="gradientheader"></div>
#gradientheader {
    height: 500px;
    width: 500px;
    background: linear-gradient(to right, rgba(243,64,159,0.7), rgba(149,53,214,1)); 
/*Last number represents opacity */

You can use a free online colour picker or Adobe Photoshop, to find out what RGB values the colour you desire holds.

Another fantastic effect which you can achieve using CSS is the blur. This effect is controlled by the filter property, which also allows you to change contrast and saturate values of your image. For the blur effect, you will have to use pixels instead of percentages. The blur effect works well with the hover selector, which is how I used it in the example below.

<img src="coolimage.jpg" width="500" height="500">
img:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);

Modestas Mankus is a multimedia creative and entrepreneur currently based in the United Kingdom. He is the founder of Our Culture Mag and currently writes about the arts and business.

Comments 0
There are currently no comments.