Threelas CSS

Styling Links

2011-09-12T14:06:00.000+07:00

One of the basics of creating a navigation menu is the css links. Such as changing the color or font (perhaps also the background) when we move the mouse over a link. Basically the style offered by the css there are two types of links, first to distinguish between links that have not been visited by a previously visited. The second is to change the rendering in response to user action.

Differentiating with unvisited

There are two syntax is used, the following syntax:

a:link{ Declarations } a:visited{ Declarations }

to know is, a:link is valid for unvisited links. Meanwhile, a:visited applies for links that have been visited.

Changing the rendering

Same as before, this technique also involves two syntax

a:hover{ Declarations } a:active{ Declarations }

As a: hover applies while the user is designate the element (with some pointing device), but not activate it. And to enable it we using a: active.

There should also note, a: hover MUST come after a: link and a: visited, and a: active MUST come after a: hover. See the example below

<html> <head> <style type="text/css"> a:link {text-decoration:none;}    /* unvisited link */ a:visited {color:blue;} /* visited link */ a:hover {text-decoration:underline;}   /* mouse over link */ a:active {text-decoration:line-through;}  /* selected link */ </style> </head>  <body> <p><a href="http://www.threelas.com" target="_blank">Homepage of Threelas</a></p> </body> </html>

Styling Font

2011-08-27T22:35:00.001+07:00

In this world there are a variety of languages and fonts. Not a few people in this world has its own language. Call it Japanese, Arabic, English, and Indonesia. Japanese and Arabic language very clearly has its own style. Meanwhile, Britain and Indonesia, respectively have the same fonts but different language. Given this background, the font is very important to put in the CSS.

Font Family

Unlike other CSS, the value of the font family can be written more than one, separated by commas, which shows as an alternative.

<html>
 <head>
 <style type="text/css">
 p.serif{font-family:"Georgia",Times,serif;}
 p.sansserif{font-family:Arial,Helvetica,sans-serif;}
 </style>
 </head>
 
 <body>
 <h1>CSS font-family</h1>
 <p class="serif">This is a paragraph, shown in the Georgia font.</p>
 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
 
 </body>
 </html>

There are two types of font names famiy, the first is a family-name, and the second is a generic-family. There are five types of generic-family: serif, san-serif, cursive, fantasy, monospace. But on the computer, san-serif is easier than serif rendered. Many of the designers of websites recommend to put the generic-family as a last alternative. If the value of font-family there are more than one, then the font-family must be quoted.

Font Style

There are four types of font style used on the normal, italic, oblique, and inherit (Takes the same value as the specified property for the element's parent).

<html>
 <head>
 <style type="text/css">
 p#no{ font-style: normal; }
 p#ita{ font-style: italic; }
 p#obl{ font-style: oblique; }
 </style>
 </head>
 
 <body>
 <p id="no">This is a paragraph(normal)</p>
 <p id="ita">This is a paragraph(italic)</p>
 <p id="obl">This is a paragraph(oblique)</p>
 </body>
 </html>

There are many ways to determine the size of the font. For example, by pixel units, em units, units of percent, combination units percent and em. As is the one em is equal to 16 pixels. We give you suggestion that to use em units as your size units. Because Internet Explorer can not give best performance if using pixel units. Nevertheless there is absolute-size which is one of the properties of the font size. That is xx-small, x-small, small, medium, large, x-large, xx-large.

<html>
 <head>
 <style type="text/css">
 p#xxs{ font-size: xx-small; }
 p#xs{ font-size: x-small; }
 p#s{ font-size: small; }
 p#m{ font-size: medium; }
 p#l{ font-size: large; }
 p#xl{ font-size: x-large; }
 p#xxl{ font-size: xx-large; }
 </style>
 </head>
 
 <body>
   <p id="xxs">This is a paragraph(xx-small)</p>
   <p id="xs">This is a paragraph(x-small)</p>
   <p id="s">This is a paragraph(small)</p>
   <p id="m">This is a paragraph(medium)</p>
   <p id="l">This is a paragraph(large)</p>
   <p id="xl">This is a paragraph(x-large)</p>
   <p id="xxl">This is a paragraph(xx-large)</p>
 </body>
 </html>

Font Variant

One more way we can in the css font is small-caps. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters Appears in a Smaller font size than the original uppercase letters in the text. Through a font variant, the small-caps can be done. There are three values that apply to a font variant. That is normal, small-caps, and inherit.

<html>
 <head>
 <style type="text/css">
 p#no{ font-variant: normal; }
 p#sm{ font-variant: small-caps; }
 </style>
 </head>
 
 <body>
   <p id="no">This is a paragraph(normal)</p>
   <p id="sm">This is a paragraph(small-caps)</p>
 </body>
 </html>

Font Weight

We can provide a bold, only with the involvement of font weight. The font-weight property sets how thick or thin characters in a text Should not be displayed.

<html>
 <head>
 <style type="text/css">
 p#no{ font-weight: normal; }
 p#b{ font-weight: bold; }
 </style>
 </head>
 
 <body>
   <p id="no">This is a paragraph(normal)</p>
   <p id="b">This is a paragraph(bold)</p>
 </body>
 </html>

Fonts

Font is a quick way we write all the font properties that have been mentioned above. With statement fonts then it can be written in a shorter form.

<html>
 <head>
 <style type="text/css">
  h1{
    font: bold 1.2em Helvetica, Arial, sans-serif;
  }
  p{
    font: italic 30px Times, Garamond;
  }
 </style>
 </head>
 
 <body>
   <h1>font property example</h1>
   <p>This is a paragraph.</p>
 </body>
 </html>

Please always to contact w3.org as reference when you making a site. For more information about css font. Please to read article for css font from w3c.

Styling Text

2011-08-19T17:44:00.000+07:00

We re talking about css, css text focuses on the topic. With the intention that we could decorate the text view becomes more interesting sites. Previously, we want you to re-read our post about Knowing CSS and Three Ways Inserting CSS, because it is very important to know how to write CSS code. It also, each person has their own style. We feel comfortable with our way, maybe you do not. However, the important thing is to write css key remains on track, then your program will run fine. Nevertheless, we hope that in the early learning should follow what we write.

<html>
 <head>
 <style type="text/css">
 p
 {
 color:red;
 text-align:center;
 text-decoration:underline;
 text-indent:1em;
 text-transform:capitalize;
 line-height:150%;
 vertical-align: middle;
 letter-spacing:2px;
 word-spacing:4px;
 white-space: normal;
 direction:rtl;
 } 
 </style>
 </head>
 
 <body>
 <p>Hello World!</p>
 </body>
 </html>

Consider again the above code, css text has 11 properties. You can use all or only some. All depends on the needs. Of the ten css that there are some that must be considered, once again it's about the quality of your site. Try not to use underlines the word that was not sponsored. Because if you do then your users will be confused in distinguishing the link. So consider again the use of property decoration: underline.

(w3schools.com)

Then, it is very important in the use of capital letters. Due to this the user know which words are important. However, we need to remind you again. Search engines also need to know the contents of your site. So if only to know the importance of a word, you should use the heading tags.

To know the complete properties of the css text, please visit http://www.w3.org/wiki/CSS/Properties#Text from the W3C for CSS text. We would always recommend that you continue to monitor the development of CSS code.

CSS Background

2011-08-09T16:59:00.002+07:00

This time we will discuss the background css. With css background, then your blog or website we will have an interesting background. Depending on individual taste. There are eight properties owned by the css background. Among them is the color, position, size, repeat, origin, clip, attachment, image.

{background: color position size repeat origin clip attachment image;}

Many programmers separate the eighth number of the CSS background properties to simplify the writing. Here are the syntax's

{background-color:value;
 background-attachment:value;
 background-image:value;
 background-position:value;
 background-clip:value;
 background-repeat:value;
 background-origin:value;
 background-size:value;}

For color there are six in the usual way to write the value of color. That is by using Hexadecimal, RGB, RGBA, HSL, HSLA, or by giving the name of the color. Or you can give transparent for the value if you want to get transparent background. To see full color name and hexadecimal code you can access it from http://w3schools.com/cssref/css_colornames.asp.

For images, we can put a background image on a blog or website. There are three property values of the image, url (to determine the address of the image), none (if it does not contain image), inherit (if you want the background image should be inherited from the parent element). For position, we can determine the location of the background. For size, an image used as background we can specify the size with ease. To repeat, we can display a background image over and over again. The origin property specifies what the background-position property should be relative to. For the clip, we can specialize area of the background paint. As for attachment, property sets whether a background image is fixed or scrolls with the rest of the page. To see complete property values of background, we recommend to read background properties from w3c. Because they responsible for CSS development.

We hope you understand what we write. Now you have the ability to change the background of your blog or website. For more complete, try the code below

<html>
 <head>
 <style type="text/css">
 body
 {
 margin-left:200px;
 background-image: url('http://3.bp.blogspot.com/-gmgR7eCZM7A/TgirySGvDsI/AAAAAAAAAAU/MLN36d5PB0o/s220/Putri%2BArisnawati.jpg');
 background-repeat:no-repeat;
 background-color:yellow;
 background-position:10px 10px;
 }
 
 .container
 {
 text-align:center;
 }
 
 </style>
 </head>
 
 <body>
 <h1>Hi Friends</h1>
 <p>We hope you can enjoy and understand all tutorials from us.</p>
 </body>
 </html>

You can try it directly via:

tryit editor from webcheatsheet
tryit editor from w3schools

Three Ways Inserting CSS

2011-08-03T14:03:00.000+07:00

In writing the CSS syntax, there are three ways to offer. However, for the bloggers there are only two possible ways. These three ways are, External Style Sheet, Internal Style Sheets, Inline Styles. While the way of the External Style Sheet can not be done by users who have not used blogger webhosting. Because this way is used for a website with many pages. How to Use External Style Sheet is the first time you have to create a css file without containing a single html tag and the file should be saved with .css extension. Look at the following example

hr {color:green;} p {margin-left:13px;} body {background-image:url("threelas.gif");}

Then each page must be linked by using <link> tag. See the following example

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

For those of you blogger users, this is the way that allowed the Internal Style Sheet. Define first .css syntax that you created in the head. This method is most widely used by bloggers in making a widget. Look at the following example

<head> <style type="text/css"> hr {color:green;} p {margin-left:13px;} body {background-image:url("threelas.gif");} </style> </head>

The third way can also be used by bloggers, but this way is less efficient. Because you have to write one after the css code for each element html. Look at the following example

<head> <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

However, there is no harm if you use this. For in certain circumstances a third way is quite adequate.

Knowing CSS

2011-07-26T15:38:00.000+07:00

You must display your website or blog interesting. By using only the HTML result will not be interesting. Because HTML does not work to beautify your blog. Of course, you will need additional knowledge in order to blog or your website look attractive. That is CSS (Cascading Style Sheets). Yes, the CSS function to how to display HTML Elements

For example, of course you want your typeface of the text varies. Or your background blog (web) is full-color pull, can all be accomplished with a single CSS.

Writing the CSS code is also easy, CSS apply two main sections. The first is selector and the second is declaration. Selector is the name of the HTML element which you want to style. Meanwhile, the declaration consists of property and value. Each declaration may contain two or more properties (including the value).

selector	first declaration	second declaration
h	{color:black;	text-align:center;}

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets.

When you want to give style to HTML Elements, CSS provides convenience in your own specialized selector. The first one id selector, which serves specialized style to a single element. While the other is a class selector, the style serves to specialize in the element.