The first thing that comes in mind of a user when viewing an website, is how a website looks. It is extremely important for the website to catch the first sight of the user. That’s what Cascading Style Sheet (CSS) does. CSS styling controls how the HTML elements look on an website or any media.

So let us discuss a few of the most basic CSS elements and how the impact the layout and design of a website.

Whenever we talk about the design of any webpage, Font of text plays a very important role. An eye-catching Font always attracts users and also improves End User Experience.

To use a particular font in CSS styling we need to include the following command in the block where we want the font.

  1. font-family

For example, font-family: ‘Catamaran’, sans-serif;

To include a font from any online sources, we need to paste the hyper reference in the TITLE of the HTML document.

An example is,

  <link href=”https://fonts.googleapis.com/css?family=Catamaran|Cormorant+Garamond&display=swap”

     rel=”stylesheet”>

Including text-align aligns the text in a specific format and thus improves the look of the text elements.

For example,

text align: center; It aligns the text to the centre of the line.

 

A perfect Font is not enough to catch the eye of a user. A background also plays a vital role in delivering a good End User Experience.

CSS determines how a background is placed, its size, position and even its opacity (though, there is no direct method to do so).

These are the most common Properties associated with Background:

  1. background-position

This determines at what position of the webpage should the background be placed, should it be at the top or at the right or at the center, te background can be placed at any of the positions.

For example,

 

background-position: center;

 

  1. background-repeat

 

This method determines whether an image (background) should be repeated horizontally or vertically.

In most situations, background-repeat is set to no-repeat so that the background doesn’t look too clumsy.

 

For example,

 

background-repeat: no-repeat;

 

  1. background-size

To make sure the background covers only a specific portion, it becomes increasingly important for the web-developer to determine the size of the background. This method helps to determine such function.

For example,

 

background-size: cover;

 

 

 

Next comes the concept of margins and padding. At the start it is very difficult to recognise the difference between the two as both looks to serve the same purpose – that is to leave space between elements.

Technically,

Margin is applied to the outside of your element hence affecting how far your element is away from other elements.

Padding is applied to the inside of your element hence affecting how far your element’s content is away from the border.

Also, using margin will not affect your element’s dimensions whereas padding will change your elements’ dimensions, so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px.

We can apply margin/padding in two different ways:

Either we can specify the pixels by which we want a gap between elements or between content and the border, or we can specify the percentage by which we want the elements to be separated from one another.

As screen size keeps on changing from one user to another, developers generally choose percentage format over pixel format.

For example,

padding: 25px 50px 60px 75px; means top padding is 25px, right padding is 50px, bottom padding is 60px and left padding is 75px.

padding: 25px 50px; means top and bottom padding is 25px and right and left padding is 50px.

Also to apply padding in percentage just replace the pixel with percentage.

For example,

Padding: 20%;

This were some of the basic CSS lines of codes that is present in every code blocks.

Before ending,

TIP: For making a responsive website, first write the CSS code for the mobile version and then proceed towards the desktop version.

 

Changed status to publish

Get involved!

Get paid for what you write

Register yourself now to submit your story......

Comments

No comments yet