Html & CSS for Text
Text Formatting with Html
| <b></b> | Putting these tags around text will make it displayed in bold. |
| <strong></strong> | Put these tags around text to show it has importance.They are displayed in bold. |
| <i></i> | Using this tag makes text look like italic text. |
| <em></em> | This indicates emphasized text and is displayed in italic. |
| <mark></mark> | Highlites text. |
| <del></del> | This strikes a line through a |
| <ins></ins> | Underlines text indicating text that has been inserted. |
| <q></q> | Put a quote in these tags. |
| <small></small> | Use these tags for smaller text. |
| <sub></sub> | These tags make text subscripted |
| <sup></sup> | These tags make text superscripted |
| <p></p> | The Paragraph tag is a block element. It will start on a new line. You put a block of text in these tags.You can style the whole paragraph with CSS. |
Text Formatting with CSS
text-align:center;
The value can be left, center, right or justify. Justify is when the margin
on both sides is straight up and down. It stretches out the lines of text to make them
same width.
p {
text-align:justify;
}
text-indent:20px;
Use this to indent the first sentence. Twenty pixels will make first word in the first
sentence start 20 pixels to the right of where it usually starts. First sentence in
this paragraph is indented 40 pixels.
p {
text-indent:40px;
text-align:center;
}
color:red;
This specifies the color of text. You can use 1 color for whole page or specify a different
color for each section.
p {
color:red;
text-indent:40px;
text-align:justify;
}
background-color:lightblue;
Your page has to have contrast for the mobile device screen in sunlight. Black and white have the most contrast. Just the paragraph is lightblue here. That is what I changed
to lightblue. Just the paragraph. You can put the paragraph and heading, <h5>background-color:lightblue;</h5>, tags in a set of section tags or div tags and set the whole section or div to lightblue.
p {
background-color:lightblue;
color:red;
text-indent:40px;
text-align:justify;
}
text-decoration:none;
This is often used to remove the underline on links. The values are none, overline, line-through and
underline. Overline will make a line on top of text. line-through will make a line going
straight through the text. Underline will put a underline under text and none will remove
all text decoration so there are no lines.
p {
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
text-transform:capitalize;
The values are uppercase, lowercase and capitalize. Using uppercase will make letters capitalized.
Lowercase will make all letters in lowercase. Capitalize will capitalize the first letter
of each word.
p {
text-transform:capitalize;
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
letter-spacing:4px;
You can specify the amount of space between letters. I used the <span></span> around this so I could use
inline styling on just this line of text instead of the whole paragraph. You can use the span tags in a paragraph.
p {
letter-spacing:4px;
text-transform:capitalize;
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
line-height:2;
You can specify the amount of height needed for text. Specifying line-height:1.5; will
incease space between lines by 50%. Meaning the lines of text will be farther apart.
p {
line-height:2;
letter-spacing:4px;
text-transform:capitalize;
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
word-spacing:12px;
Use word-spacing to increase or decrease the space between words.
p {
word-spacing:12px;
line-height:1.5;
letter-spacing:4px;
text-transform:capitalize;
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
text-shadow:1px 1px;
Make shadows on text. Make shadows with colors on text. Make blurred shadows with
colors on text. You can play with this by changing values around
and see what you can come up with. This example is style="text-shadow:1px 1px";
text-shadow:3px 3px; - This is the basic form which give you 3 pixels of
horizontal and verticle shadows.
text-shadow:3px 3px blue; - This adds color to the shadow.
text-shadow:3px 3px 5px blue; - This adds blur to the shadow.
p {
text-shadow:1px 1px 1px blue;
word-spacing:8px;
line-height:1.5;
letter-spacing:4px;
text-transform:capitalize;
text-decoration:none;
background-color:yellow;
color:red;
text-indent:40px;
text-align:justify;
}
I was curious what the above programming looked like on a paragraph. So i put it on a page with some text.
To see what it looks like Click Here(opens a new window)