Free Jupiter 20 Useful CSS Tips For The Beginners

20 Useful CSS Tips For The Beginners

css
Nowadays building a website has become much easier than the past. Actually the beginners don’t have to rely on the web designers. Anyone with a basic knowledge of coding can easily go through the process of creating a website as it is much user friendly now. One of the major features of designing your website is the use of CSS coding. Normally a beginner thinks it is very tough to go through the full coding process. But it’s not so. Why will you spend your time sharing your small ideas with a designer? Instead of that you can easily do the small changes in design within that time. So don’t think just get into the process. Here I will discuss about some common CSS tips which you can perform on your own.

banner-565x326

Useful Css Tips For The Beginners

Applying Round Corners:

This tip will help you to apply round corners to your listing modals, hover states and listing post pages. You have input the below mentioned coding to apply this.

.et-place-content, .location-rating, .sub-menu {

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

 

#et-slider-wrapper:before, .thumbnail:before, .thumbnail img, .location-title, #breadcrumbs {

-webkit-border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

border-top-right-radius: 10px;

border-top-left-radius: 10px;

}

 

#content:before{

-webkit-border-bottom-right-radius: 12px;

-moz-border-radius-bottomright: 12px;

border-bottom-right-radius: 12px;

}

 

#et-slider-wrapper, .et_marker_info, #main-area .container, #content, .location-description {

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

}

 

#main-area .et-map-post img, #main-area .et-map-post .thumbnail {

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}

 

#et-slider-wrapper:after {

display: none;

}

To replace text with images:

Now if you want to replace some text on your website with images, you should follow this coding.

h1 {<br>

text-indent:-9999px;<br>

background:url(“title.jpg”) no-repeat;<br>

width:100px;<br>

height:50px;<br>

}

 

 Using Background image in text box:

Are you using a textbox in your website? Some want to use images on the background of the text box to give an amazing look. Yes really if you want so then the code is given below.

input#sometextbox {

background-image:url(‘back-image.gif’);

background-repeat:no-repeat;

padding-left:20px;

}

Rotate your text 90o counter clockwise:

To rotate a particular text 90o counter clockwise in your website. This code example will help you out.

.rotate-style {

/* Safari */

-webkit-transform: rotate(-90deg);

 

/* Firefox */

-moz-transform: rotate(-90deg);

 

/* Internet Explorer */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The above example is given in 90o, but you can change it by 180o and 270o also. Instead of (-90deg) you have to replace it with (-180deg) and (-270deg) respectively in Safari and Firefox.

But in case of Internet Explorer the procedure is slight a bit different. You have to choose any one value from the given four values. The four values are 0,1,2,3 which denotes 0o, 90o, 180o, 270o respectively.

Adding a banner behind your title:

Suppose you are ready with the heading text and you are feeling that a banner is needed behind the heading to make it more attractive. You can do it by a very short coding process.

.et-description {

background-color: rgba(0,0,0,.3);

padding:20px 0;

margin-top: -20px;

}

 

Change the colour of text selection:

Most of the website has a same and common selection colour. So try something different with your website. You can change your selection colour with a very easy code. But still it depends on the browser you are using.

 

 

/* Mozilla based browsers */

::-moz-selection {

background-color: #FFA;

color: #000;

}

 

 

 

 

 

/* Works in Safari */

::selection {

background-color: #FFA;

color: #000;

}

 

To display your text in the centre:

Many websites use this procedure for displaying their text on the centre. Because it looks very smart and arranged. So  why shouldn’t you go with that? I am giving the example below.

 

<body><divid=”page-wrap”><!– all websites HTML here –></div></body>
#page-wrap {width: 800px;margin: 0auto;}

 

 

 

 

Change your Thumbnail brightness on hover:

This trick will make your thumbnail image to change its brightness on hovering on the image. It looks very attractive all the way. But it’s up to you that you will like it or not. But I will suggest you to try it out.

 

.thumbnail {

background-color: #000;

}

 

.thumbnail img {

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

 

.thumbnail:hover img {

opacity:.6;

}

 

Use a Drop cap in your text:

If you wish to apply a drop cap in the paragraph of your text, you can use the following Code. But remember a thing it depends on the browser assistance. All the web browsers doesn’t support drop cap.

 

p:first-letter {

font-size : 300%;

font-weight : bold;

float : left;

width : 1em;

}

 

Capitalizing text:

If you want to capitalize any particular text of an article in your website or change its case. Then you can use the following codes.

text-transform: capitalize;

 

text-transform: lowercase

 

text-transform: uppercase

text-transform: inherit

 

text-transform: none

 

 

Use the code which you need. Suppose if you need to capitalize any particular word or text, use the first one. If you want the full article in lower case then use the second one.

 

Page printing with CSS:

To apply a direct print option of any article in your website you have to use CSS page break options. Actually many people prefer to take a print out of what they are reading. So, if it is possible you can offer them a direct print option.

 

@media all

{

.page-break    { display:none; }

}

@media print

{

.page-break    { display:block; page-break-before:always; }

}

 

Use pointer cursors:

You can use pointer cursors to enrich the quality of your website. So, there is a short trick to use that.

 

input[type=submit],label,select,.pointer{ cursor:pointer; }

 

Text shadows:

Text shadows look very attractive sometimes. Actually it can be used in Headings or some elements. But remember to not to use it in all cases this can make your article very clumsy. Try out the below code for better example. You can use multiple or single shadow according to your choice.

Use this code for Regular shadow:-

p { text-shadow: 1px1px1px#000; }

 

Use this code for multiple shadows:-

p { text-shadow: 1px1px1px#000, 3px3px5pxblue; }

 

In the above code for multiple shadows, the first value means the X co-ordinate, the second one for Y co-ordinate, third one for blur radius and the last one for the colour of shadow.

Apply a consistent font size:

If you want to make a consistent font size for your website. You have to set a size amount in percentage. Use the below code. Also you can change the percentage amount according to your wish.

body{ font-size:62%; }

 

CSS coding for portable devices:

 Nowadays most of the browse web pages from portable devices like mobile, PDA’s etc. So, your website design should be responsive enough to give a better browsing experience in those devices. Suppose if your article is to be printed from a portable device it should respond very well to the users.

 

<link type=”text/css”rel=”stylesheet”href=”handheldstyle.css”media=”handheld”/>

 

Element transparency:

Making an element transparent in your website makes it very attractive to the viewers. And it really looks amazing. So to apply the trick you have to just enter the following code.

.transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

 

Minimum width of an element:

You can also set the minimum width of any element in your webpage. Actually sometimes an element needs to be set to a minimum size.  So you can go with the below mentioned code to set the minimum width.

 

<body>

<divid=”container”>

 

Now you have to enter the container value:

 

#container {

min-width: 500px;

width:expression(document.body.clientWidth < 500? “500px”: “auto”);

}

 

Applying an attribute:

You can get a large option for selecting attributes with the help of CSS. Actually you can choose various icons from the list with which it matches.

a[href$=’.doc’] {

padding:020px00;

background:transparenturl(/graphics/icons/pdf.gif) no-repeatcenterrightright;

}

Highlight a particular word:

If you want to highlight a particular text in your webpage you can change its colour. Actually if any webpage contains a message mentioning important! Then you can change its colour to highlight it.

.page { background-color:blueimportant!;   background-color:red; }

 

Take some help from other sources:

If you want to get more tips regarding CSS you will get a lot of books and courses available on market. Just find the one which is suitable for you. Also you can take help of online courses provided.

Charlotte Johnson

The exact amount of Enthusiasm & commitment for art makes Charlotte Johnson creatively energetic for what she does. The Artistic finesses flowing in her nerves don't permit her to sit and create the ordinary that's why she consistently put the full dosage of potency to construct something monumental & worth perceiving. The point that makes her distinguishable is her capability to accept the compliments & comments both with equal excitement and Respect.

You May Like

*

*

Top