5 Simple CSS Tips

Cascading Style Sheets, or CSS is a common application used to style web pages. It has been known to reduce bandwidth, increase uniformity among different browsers, and even add some stylistic flair to web pages. Here are a couple of tips to help you along the way.

1. CSS and Text Overflow

If text has been cut off and you want to leave a visual clue to the user, use CSS to leave an ellipses to inform them that there is more to read. example code: text-overflow: ellipsis-word;

2. Rotating Text With CSS

By using the transform property in Webkit and Firefox, and the BasicImage filter in Internet Explorer, web designers have the ability to rotate text as they please. Designers can use this tool to rotate images as well making it a valuable asset for almost any design. example codes:

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

3. Using CSS to Center Layouts

For web sites that rely heavily on large pictures, it is crucial to present the pictures correctly to prevent any problems. This code allows for proper centering, fixing problems associated with overlapping images, repeating images, or images that cut off neat the edges of the screen. example code:

#container {margin: 0 auto; width: 30px; text-align: left;}

4. Resetting CSS

Resetting CSS gives users the ability to work uniformly across multiple browsers and platforms, fixing problems with margins, font size, headings, default line heights and other variables that often change between browsers. example code:

{padding: 0; margin: 0;}

5. Using Shorthand CSS

Especially in larger projects, using shorthand CSS helps to keep file size small, which greatly benefits users as web pages dont take as long to load. The biggest benefit, however, is its large boost in efficiency. When coding takes a significantly short time, you can do more work in a shorter amount of time. example code:

#box p {margin-top: 15px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; }

can be shortened to #box p {margin:15px 5px; }

How to Change Font in CSS

Lets start with getting to know basis: Find a font that will mark your web site.

Font family is its ability to determine a priority list of fonts that you want to be used for a particular element of the website. The objective existence of the list is that if the first font in the list is not installed on your computer, website visitors, to enable the next font on the list tries to replace the missing, and if he does not exist, passes to the next, until the moment when a font the list is not to be successfully recognized.

There are two names that are categorized fonts: family names and basic family. The basic families are groups of family names from the specified characteristics. Three types of related families are: serif, sans-serif and monospace. Family name popularly called fonts. Examples of fonts that belong to the basic serif family: Times New Roman, Garamond, Georgia. Note that these three have in common font a base, something like a letter of support on the bottom, or foot. The main families of sans-serif that has no basis in all capital letters. Examples of sans-serif as: Trebuchet, Arial, Verdana. Differences between the two main families are obvious. One has a base case and the other does not. The third family is the basic monospace.

You can easily see the fonts in this family, they have a fixed width. The family letters include: Courier, Courier New and Distortion Mono. When you put on the list of fonts for your web page, it is best to put in the first place the most preferred font, and then to put the alternative. We suggest that you put the fonts from the same basic family, so that the font of the same family, eg. sans, to show if no other font in the list is not available to the user computer.

Example list of fonts in order of priority: h1 {font-family: arial, verdana, sans-serif;} In this example, the headers with h1 tag will use the font Arial. If this font is not available, the user does not have it on your computer, will be used next to the font list. If the next font in the list not working series continues with the next font, and so while some do not up and running. If you specify fonts that are from the same basic family, the same font from the same basic family will be displayed in the header. Font Style This section defines a specific font you chose to be in any of the following styles: bold, italic or oblique.

Tutorial: How to Change Font in CSS – Part 2

Example syntax for the font style: font-style: italic H2 {font-family: times, times new roman, sans-serif font-style: italic} font type In this section you specify whether the letters be small or printed. When you select the small caps font will be displayed in a smaller size, but not as sensitive. However, if the font type designated as small caps, but the type is not available, the browser will, instead, you will automatically show the text as uppercase. H2 {font-family: Verdana, Arial, Helvetica, sans-serif font-variant: small-caps} The thickness of the letters in this section determine the weight or thickness, Conspicuousness font. Font can be normal or bold. You can choose between numbers 100 and 900 to create the desired thickness of the letters. p {font-weight: bold} The font size has to choose the font size.

You can choose different sizes for between letters will be displayed on the page. p {font-size: 10px;} p {font-size: 20pt;} p {font-size: 1em;} p {font-size: 200%;} The four examples given in the units have one key difference. Px and pt set absolute font size. % And em make it possible to adapt the font size according to your wishes. From culture to everyone, especially to people with low vision, such as the elderly, you should make your web site accessible by adjusting the font size using the unit % and em. Adjust the font size for any site it is possible for most browsers.

For example, in Mozilla Firefox (Mozilla Firefox), you can adjust the font size so that it becomes, or higher, or lower if you go to the view. For Internet Explorer (Internet Explorer) you can customize if you go to the view and select an option: the largest, larger, medium, small, at least.

Rule Drafting fonts for you to use multiple policies in a single rule. p {font-style: italic; font-weight: bold font-size: 30 px font-family: arial, sans serif;} Using the rule for the font, you can easily install all in one line. p {font: bold italic 30px arial, sans-serif;} This policy defines the following order: font style, font type, the thickness of the font, font size, font family.