Featured templates

HTML. How to change text style

Chris Diaz October 17, 2011
Rating: 5.0. From 1 vote.
Please wait...

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. You can learn more about the Developer tools in any browser checking this article. 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  {
  font-family:"Trebuchet MS", Arial,  Helvetica, sans-serif;


Feel free to check the detailed video tutorial below:

how to change Google Map location in WordPress

Best Responsive Wordpress Themes

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket