Lesson 4 : Fonts

In this lesson you will learn about fonts using CSS. We shall also consider that a particular font is selected for the web- site may be displayed only if the font is installed on the PC, is executed to access the web- site. The description of the following CSS- properties :
font-family
font-style
font-variant
font-weight
font-size
font
Font family [font-family]

Font-family property specifies a prioritized list of font used to display the item, or web- page. If the first font on the list is not installed on the computer from which you access the site, the next font on the list , until it finds the correct one.
Used to categorize fonts two types of names : the name of the family / family-name and common / generic family / generic family. These two terms are explained below .
Family-name
An example of family-name ( often known as "font " ) is , for example , "Arial", "Times New Roman" or "Tahoma".
Generic family
Can best be described as a group of family-names, with uniformed features. Example - sans-serif, sans suite " serif / feet".
The difference can also be illustrated as follows:
Three examples of generic families and some of their family members
When you specify a font for your web- site, you naturally start with the preferred font , followed by some alternative . Recommended in the list with a generic name . Then the page , at least, will be displayed font of the same family if none of the specified fonts .
List of fonts may look like this:

 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif;}


Show me an example
Headlines <h1> be displayed using the font "Arial". If it is not installed on the user's machine to be used "Verdana". If both these fonts are not available to show the headlines will be used by the font family sans-serif.
Please note that the name of the font "Times New Roman" contains spaces , so specified in double quotes.
Font Style [font-style]

Font-style property defines normal, italic or oblique. In the example, all the titles will be displayed in italics <h2> italic.

 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif; font-style: italic;}


Show me an example
Option font [font-variant]

Font-variant property is used to select between normal or small-caps. Small-caps font uses a small capital letters (upper case) instead of lower case letters . It is not clear ? See the examples :
Four examples of fonts in small caps
If the font-variant is set to small-caps, and small-caps font is not available , the browser will most likely show the text in uppercase .

 h1 {font-variant: small-caps;}
 h2 {font-variant: normal;}


Show me an example
Weight font [font-weight]

The property font-weight describes how thick or "heavy " a font should be . The font can be normalili bold. Some browsers support even numbers between 100-900 ( in hundreds) to describe the weight of the font.

 p {font-family: arial, verdana, sans-serif;}
 td {font-family: arial, verdana, sans-serif; font-weight: bold;}


Show me an example
Font size [font-size]

Font size set by the property font-size.
Various units of measurement (for example, pixels and percentages ) to describe the size of the font. In this tutorial, we will use the most common and appropriate units of measurement. Here are some examples :

 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120% ; }
 p {font-size: 1em;}


Show me an example
There is one difference in these units : 'px' and 'pt' give the absolute value of the font size , and '%' and 'em' - relative . Many users can not read the small print , for different reasons. To make your web- site accessible to everyone, you have to use relative values, such as ' %' or 'em'.
Here's an illustration of how to set the font size in Mozilla Firefox and Internet Explorer. Try it for yourself - the perfect property , what do you think ?

Shorthand [font]

Using the shorthand font, you can specify all font properties in one single property .
For example, these four lines of text describing the properties for <p>:

 p {
 font-style: italic;
 font-weight: bold;
 font-size: 30px;
 font-family: arial, sans-serif;
 }


Using the shorthand notation , the code can be simplified:

 p {
 font: italic bold 30px arial, sans-serif;
 }


The order of the properties of font is:
font-style | font-variant | font-weight | font-size | font-family

Lesson 3: Colors and backgrounds

In this lesson you will learn how to use color and background on your web- sites. We will also consider advanced methods to position and control the background image. Will be explained in the following CSS- properties:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Foreground color: the 'color' property

The color property describes the foreground color of the element.
For example , imagine that we want to do all document titles , dark red . All titles are designated HTML- element <h1>. In the following code, color <h1> elements to red.

 h1 {
 color: # ff0000;
 }


Show me an example
Colors can be entered as hexadecimal values ​​, as in the example (# ff0000), or you can use the color names ("red") or rgb- value (rgb (255,0,0)).
The property 'background-color'

Background-color property describes the background color of the item.
The element <body> entire contents of HTML- document. Thus, to change the background color of the entire page background-color property to apply to a <body>.
You can also apply it to other elements , including - headlines and text . In the following example, a variety of background colors are applied to <body> and <h1>.

 body {
 background-color: # FFCC66;
 }

 h1 {
 color: # 990000 ;
 background-color: # FC9804;
 }


Show me an example
Note that sets the two properties to <h1>, separating them with a semicolon.
The background image [background-image]

CSS- background-image property is used to insert a background image .
Below we use as a background image of a butterfly . You can download this image and use it on your computer ( right-click on the image and choose "save picture as / save image as"), or you can use a different image .
Butterfly
To insert the image of the butterfly as a background image web- page, simply apply background-image property to <body> and specify the location of the picture .

 body {
 background-color: # FFCC66;
 background-image: url ("butterfly.gif");
 }

 h1 {
 color: # 990000 ;
 background-color: # FC9804;
 }


Show me an example
NB: Please note that we specify the location where the file as a url ("butterfly.gif"). This means that he is in the same folder as the stylesheet . You can also refer to images in other folders , using, for example , url (".. / Images / butterfly.gif"), or even files on the Internet, specifying the full address of the file : url ("http:/ / www.html.net / butterfly.gif ").
Repeat / background image [background-repeat]

Have you noticed in the previous example , that the butterfly was repeated by default horizontally and vertically to fill the entire screen? Background-repeat property controls this .
The table shows the four values ​​of background-repeat.
Value Description Example
Background-repeat: repeat-x The image is repeated horizontally by example
background-repeat: repeat-y The image is repeated vertically by example
background-repeat: repeat The image is repeated both horizontally and vertically by example
background-repeat: no-repeat figure is not repeated by example
For example, to avoid repetition of a / a background image we have to write code like this:

 body {
 background-color: # FFCC66;
 background-image: url ("butterfly.gif");
 background-repeat: no-repeat;
 }

 h1 {
 color: # 990000 ;
 background-color: # FC9804;
 }


Show me an example
Lock the background image [background-attachment]

Background-attachment property determines whether the background image is fixed or scrolls with the page content .
The table shows the values ​​of the two background-attachment. Click on the examples to see the difference between scroll and fixed.
Value Description Example
Background-attachment: scroll image scrolls with the page - unlocked by example
Background-attachment: fixed image is locked by example
For example , the following code captures the image .

 body {
 background-color: # FFCC66;
 background-image: url ("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 }

 h1 {
 color: # 990000 ;
 background-color: # FC9804;
 }


Show me an example
The location of the background image [background-position]

By default, the background image is positioned in the upper left corner of the screen . Background-position property allows you to change this default value , and wallpaper can be placed anywhere on the screen .
There are many ways to set the background-position. However , they represent a set of coordinates. For example , the value '100px 200px ' positions the background image 100px and 200px from the left on top of the browser window .
The coordinates can be specified as a percentage of the screen width , fixed units (pixels , centimeters, etc.) , or you can use the words top, bottom, center, left and right. The model below illustrates this :


The table below gives a few examples.
Value Description Example
background-position: 2cm 2cm image is positioned on the left and 2 cm by 2 cm above by example
background-position: 50% 25 % The image is centered and on fourth down by example
background-position: top right image is positioned in the upper right corner of the page by example
The example code background image in the bottom right corner of the screen :

 body {
 background-color: # FFCC66;
 background-image: url ("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 }

 h1 {
 color: # 990000 ;
 background-color: # FC9804;
 }


Show me an example
Shorthand [background]

The background is a part of all of the properties listed in this lesson .
On the background you can compress several properties and write your style in a short form , which facilitates the reading tables.
For example , look at these lines:

 background-color: # FFCC66;
 background-image: url ("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;


Using the background, the same result can be achieved in just one line of code:

 background: # FFCC66 url ("butterfly.gif") no-repeat fixed right bottom;


The order of the properties of this element is as follows:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
If the property does not exist , it is automatically set to the default . For example, if the background-attachment ibackground -position is not present in this example :

 background: # FFCC66 url ("butterfly.gif") no-repeat;


then these two unspecified properties will be assigned a default value - scroll and top left.

Lesson 2 : How does the CSS?

Are you this lesson, you will create your first style sheet / style sheet. You will learn about the basics of CSS and basic model of what codes should be used for the CSS in the HTML-document .
Many of the properties used in Cascading Style Sheets (CSS), similar to those of HTML. So, if you are using HTML for layout , you probably uznáete many codes. Let's look at a specific example.
The basic syntax of CSS

Let's say we want the background color of web- page :
In HTML, you can do this:

 <body bgcolor="#FF0000">


With CSS, the same result can be achieved as follows:

 body {background-color: # FF0000;}


As you can see , these codes are more or less identical to HTML and CSS. This example also demonstrates the fundamental model of CSS:
CSS model
But where to put the CSS- code ? This is exactly what we are going to do now .
Applying CSS to HTML- document

There are three ways to apply CSS to an HTML- document. Below we consider these three methods . We recommend that you focus on the third - that is, foreign / external style sheet.
Method 1: Inline / In-line ( attribute style)
You can apply CSS to HTML using HTML- attribute style. The red color of the background can be installed as follows:
<html>
   <head>
     <title> Example </ title>
   </ head>
   <body style="background-color: #FF0000;">
     <p> This is a red page </ p>
   </ body>
 </ html>

Method 2 : Internal (tag style)
The second way to insert CSS- codes - HTML- tag <style>. For example:
<html>
   <head>
     <title> Example </ title>
     <style type="text/css">
       body {background-color: # FF0000;}
     </ style>
   </ head>
   <body>
     <p> This is a red page </ p>
   </ body>
 </ html>

Method 3: External ( link to the stylesheet )
The recommended method - creating reference to the so -called external style sheet. In this tutorial, we will use this method in all of the examples .
An external style sheet is simply a text file with a . Css. You can place the sheet on your web- server or hard drive, as well as other files .
For example , let's say that your style sheet called style.css and is located in the style. This can be illustrated as follows:
The folder "style" containing the file "style.css"
The trick is to create a link from the HTML- document (default.htm) to the stylesheet (style.css). This can be done with one line of HTML- code :
<link rel="stylesheet" type="text/css" href="style/style.css" />

Notice how the path to your style sheet attribute href.
The line of code to insert in the header HTML, that is, between <head> and </ head>. For example:
<html>
   <head>
     <title> My document </ title>
     <link rel="stylesheet" type="text/css" href="style/style.css" />
   </ head>
   <body>
   ...

This link tells the browser that it should use the display HTML- CSS- file from the file.
The most important thing here is that several HTML- documents can reference the same style sheet . In other words, a CSS- file can be used to control the mapping of HTML- documents.
Figure showing how many HTML documents can link to the same style sheet
This can save you a lot of time and effort. If, for example , want to change the background color of the web- site of 100 pages , the style sheet will save you from having to manually change all the one hundred HTML- documents. Using CSS, you can make these changes for a few seconds , simply by changing the code in a central style sheet.
Let's see how to do it.
Try it yourself

Open Notepad (or your other text editor ) and create two files - HTML- and CSS- file file - this content:
default.htm
<html>
   <head>
     <title> My document </ title>
     <link rel="stylesheet" type="text/css" href="style.css" />
   </ head>
   <body>
     <h1> My first stylesheet </ h1>
   </ body>
 </ html>

style.css
body {
   background-color: # FF0000;
 }

Place these files in the same folder. Do not forget to save files with the correct extension (". Css" and ". Htm")
Open default.htm in your browser and you will see that the page has a red background . Congratulations ! You have created your first style sheet !
Move on to the next lesson , where we look at some of the properties of CSS.

Lesson 1: What is CSS?

Perhaps you've already heard about CSS, but do not know what it is ? In this lesson you will learn what CSS is and what it can do for you.
CSS is an acronym for Cascading Style Sheets / Cascading Style Sheets .
What you can do with CSS?

CSS is a style language that defines layout of HTML- documents. For example , CSS covers fonts , colors, margins , lines, height , width, background images , positions and many other things. Just wait and see !
HTML can be (mis ) used to design web- sites. But CSS offers more options and is more accurate and sophisticated . CSS, to date, supported by all browsers (Viewer ) .
After only a few lessons of this tutorial , you can create your own style sheets using CSS to give your web- site a magnificent view .
What is the difference between CSS and HTML?

HTML is used to structure content . CSS is used for formatting structured content.
I agree, it sounds a bit arcane . But please read on. Soon all will become clear.
Long ago, when Madonna was a virgin and a guy named Tim Berners Lee invented the World Wide Web, HTML is only used to a structured text . Author could mark the text : "This is - the title " or "it - paragraph" using HTML- tags , such as <h1> and <p>.
With the development of Web designers started looking online formatting documents. To meet this demand, the browser vendors (then - Netscape and Microsoft) invented new HTML- tags , such as <font>, which differed from the original HTML- tags by defining layout , not the structure .
It also led to the fact that the original structure tags such as <table>, have become increasingly used for layout instead of structuring the text. Many new tags such as <blink>, only supported by one browser. " You need browser X to view this page" - this became a common disclaimer on the web- sites.
CSS was designed to remedy this situation by providing a web- designers to accurately design , supported by all browsers . At the same time there was the separation of presentation and content of the document , which greatly simplified the work .
What benefits will give me a CSS?

The emergence of CSS was a revolution in the world of web-design . Specific Benefits of CSS:
control layout of many documents from one single style sheet ;
more precise control over the layout;
different views for different media ( screen printing, etc.) ;
complex and sophisticated equipment design.

Introduction . Tutorial on CSS

Cascading Style Sheets / CSS is a style language that defines layout of HTML- dokumentovCascading Style Sheets (CSS) is a remarkable invention to improve the appearance of your web- site . It can save you a lot of time and give you a completely new possibilities in the design of web- sites. CSS is essential to anyone working with web- design.
This tutorial will help you get started with CSS in just a few hours. He explains everything very easy to understand and teach you this sophisticated technology.
The study draws CSS . By reading this tutorial , highlight enough time to experiment with the studied material in each lesson .
Using CSS requires basic knowledge of HTML. If you do not know HTML, you start with our Textbook HTML, before moving on to CSS.
What software do I need?

Do not use when working with this tutorial programs such as FrontPage, DreamWeaver or Word. These advanced software will not help you learn CSS. On the contrary, they severely limit your progress in this direction.
You will need a free and simple text editor.
For example , Microsoft Windows comes with a program Notepad. It is usually found in the Accessories Start menu in Programs. You can also use a simple text editor such as Pico for Linux or Simple Text for Macintosh.
A simple text editor is ideal for learning HTML and CSS, as it does not change the code you entered . So you will advance quickly , and errors will be your only , not the software .
With this tutorial, you can use any browser . We advise you to have the latest version of your browser .
Browser and a simple text editor - that's all you need .
Let's get started !

Введение. Учебник по CSS

Каскадные таблицы стилей/Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.

Этот учебник поможет вам начать работать с CSS всего через несколько часов. Он разъясняет всё очень доходчиво и научит вас сложной этой технологии.

Изучение CSS увлекает. Читая этот учебник, выделяйте достаточное количество времени для экспериментов с изученным в каждом уроке материалом.

Использование CSS требует знания основ HTML. Если вы не знаете HTML, то начните с нашего Учебника HTML, прежде чем перейти к CSS.

Какое программное обеспечение необходимо иметь?

Не используйте при работе с этим учебником такие программы, как FrontPage, DreamWeaver или Word. Эти продвинутые программы не помогут вам в изучении CSS. Наоборот, они сильно ограничат ваше продвижение в этом направлении.

Вам понадобится бесплатный и простой текстовый редактор.

Например, Microsoft Windows поставляется с программой Notepad. Она обычно находится в Accessories меню Пуск, в Programs. Вы можете также использовать простой текстовый редактор, например Pico для Linux или Simple Text для Macintosh.

Простой текстовый редактор идеально подходит для изучения HTML и CSS, поскольку он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.

С этим учебником можно использовать любой браузер. Мы советуем иметь новейшую версию браузера.

Браузер и простой текстовый редактор - вот всё, что вам необходимо.

Давайте начнём!

Друзья сайта
Учебник по HTML и CSS
Учебник HTML
Учебник HTML
Учебник HTML
Заработай в интернете
учебники по HTML
Заработай на сайте
учебники по PHP
учебники по javascript