How to Change Text Style in CSS
See CSS: Tips and Tricks for similar articles.Changing text style in CSS is achieved using the text-decoration
and text-transform
properties. The text-decoration
property is used to add effects to text, such as underlines and line-throughs. The text-transform
property is used to change the capitalization of text.
- You can use the following values for the
text-decoration
property:- none
- underline
- overline
- line-through
The none value of the
text-decoration
property can be used to remove the underline from links, as shown below:
The following shows this code in use:<a href="http://www.webucator.com" style="text-decoration: none;">Webucator</a>
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Text-Align, Text-Decoration and Text-Indent</title> </head> <body> <h1>Text-Decoration </h1> <div style="text-decoration: none;">text-decoration:none</div> <div style="text-decoration: overline;">text-decoration:overline</div> <div style="text-decoration: underline;">text-decoration:underline</div> <div style="text-decoration: line-through;">text-decoration:line-through</div> <div><a href="http://www.webucator.com" style="text-decoration: none;">Webucator</a></div> </body> </html>
- You can use the following values for the
text-transform
property:- none
- capitalize
- uppercase
- lowercase
The following code sample shows the effects of
text-transform
:
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Text-Transform</title> </head> <body> <h1>Text-Transform</h1> <div style="text-transform: none;">Text-Transform: None</div> <div style="text-transform: capitalize;">Text-Transform: Capitalize - this is written in all lowercase letters but is capitalized</div> <div style="text-transform: lowercase;">Text-Transform: Lowercase</div> <div style="text-transform: uppercase;">Text-Transform: Uppercase</div> </body> </html>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS (this article)
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3