- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
HTML. How to change text style
October 17, 2011
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 { color:#272727; font-size:16px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left; text-transform:none; }
Feel free to check the detailed video tutorial below:
how to change Google Map location in WordPress