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.
Комментариев нет:
Отправить комментарий