1. Home
  2. Knowledge Base
  3. HTML
  4. How to change text style in HTML

How to change text style in HTML

The following tutorial shows how to change the text style in any HTML based template. The tutorial could be used for such template types as: Full Site, Full Package, any static template, static version of any animated template (flash or swish). The text styles are usually defined in the CSS files.

The  most useful tool that can help you editing the styles is a developer tool in your browser. Using the browser developer tool you can check the styles for any element on the page. You can even change the style directly in the developer tool to see how it will look. Don’t forget to perform the same changes in CSS files.

 

CSS files are usually located in the css folder. Open the css file using your HTML/CS editor like Adobe Dreamweaver, Notepad etc. You can use the following styles to change the text look:

  • color – used to set the color of the text;
  • text-align – used to set the horizontal alignment of a text;
  • text-decoration – used to set or remove decorations from text
  • font-family – used to set the font for the element
  • font-size – defines the font size
  • font-style – used to specify if text is normal, italic etc

For example the menu item text style is defined with the following properties:

.sf-menu li.sfHover li a  {
  color:#272727;
  font-size:16px;
  font-family:"Trebuchet MS", Arial,  Helvetica, sans-serif;
  text-align:left;
  text-transform:none;
  }

Was this article helpful?

Related Articles