Guideinfoyou: Html CSS Text

Let us to figure out our CSS and styling our webpage using CSS, before we talk about the text using html element and now we are to discuss our text using CSS, this is about putting them a color, aligning the text, putting decoration, and sizes their font text.

Text is a biggest help in our works and we use them all the time, we use the text for writing some letters, typing text in our cellphone and writing word documents in our computer.

So while you are relaxing we will share some code for using CSS text for how we use it and figuring out how they works it.

Let us start for putting color in our content webpage using style CSS.

Check our code:

In our Browser

Our code color blue

Now we are trying to put their alignment by putting left, center and right.

For the Center alignment:

In our Browser

Our code to be left center and right

For the Right Alignment:

In our Browser

Our code to be left center and right

How will put decoration in our text what is our code must be?
There is a decoration for overline, line-through, underline and none decoration text by putting code.

Check our sample code:

Overline text CSS

In our browser

Our code that to be overline decoration

Line-through text CSS

In our browser

Our code that to be line-through decoration

Underline text CSS

In our browser

Code that to be underline

Hyperlink that erasing the underline link following by the Css text code decoration:none, let us to try our link.

In our browser

Href link or hyperlink disable the underline

Sometimes we like to put our text some effect why we don't try our text content using CSS with shadow,
Shadow in our text? how we do that? ofcourse we will give you some little code and to try it in our browser or in our website. Just check out our sample code using shadow style CSS.

Shadow text CSS

In our browser

This is our shadow sometimes this is not to be visible because in our browser but you can try it if you want.

For the text that we need to adjust the space of their letter we can use this code the word-spacing, this code are relating for the pixel form like word-spacing:integer pixel and we can apply this for our text.

Let us check our sample below:

In our browser for 10 px

This is our text for sample that we need to adjust the space we will put the 10 px or 10 pixel for our text

Spacing that adjusting more pixel , we will put 30 px for sample:

This is our 30px spacing text try to get this and put to your content website to check what is the result

Transforming our text style using our code to lower case and uppercase

Lowercase text

In our browser

Our text that to be transform in lowercase

Uppercase text

Our text that to be transform in uppercase

So if you see it our CSS text there is some style for them that we can put, that they had a text color, decoration line and effect for our text, if any some of you to add some demo or sample you can post here in our comment post and share us what you have learn. Hope this tutorial can help to you. Good luck for your improvement, See yah.

Next to Html CSS Fonts

Return to:
Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

Html Creating Lists

Html Adding Images To Our Pages Or Website

Html Creating Image Maps
HTML Table Border

HTML Marquee Tag Direction
HTML Marquee Image Attribute