Notes for Styles

I hate to do any style works, but sometimes you are left no choice and you have to do it yourself. Here is a little list of the ones that annoyed quite often.



The properties that can be set, are (in order): background-color, background-image, background-repeat, background-attachment, and background-position.

background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;


The background-image style is often used as separator (normally, it is 1px image) between two sections in an Html web page, which you normally need to specify that the direction you want to repeat the image, such as

background: url(‘smiley.gif’) repeat-y


You would also sometimes want to display an image in the same line as your text. In this case you would need to combine the background with padding.

padding: 2px 10px 0px 20px;

background: url(/images/icon1.png) no-repeat;

If you apply this style with <p> tag, you will get the text displayed on the right side of the image. The trick is you tweaking the text with padding, but your image is always left at the position where <p> tag start.


Besides, if you are running this in a jsp page, it is suggested to use the JSTL url tag, as this would include context path.

background: url(<c: url=”/images/icon1.png”/>) no-repeat;




The float property specifies whether or not a box (an element) should float. This is especially useful when you want to display two horizontally paralleled elements.


In the case you want to have a div A on the left side of the other one (div B). You need to specify two style elements with div A:

float:left;  width:100px;



If you only want to apply different style for the text in a string, using nested span tag would be easier than div tag (as introduced above, you have to specify the float direction and width for the div boxes, otherwise they would be displayed as a stack in vertical direction).  


.ex1 {font-size:small;} .ex2 {font-size:x-small;}


<span class="ex1">This is small.

<span class="ex2">This is smaller.</span>



This will result something like this

This is small. This is smaller.


If you want to have a line break before the second sentence, you can apply block style.

.ex2 {font-size:x-small; display:block;}



This entry was posted in Style Control. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s