 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 20.
In our previous lesson we studied radio buttons, check boxes, and drop down list.
Today we will see what is CSS and how to use it.
What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to define a style which can be applied to elements in a web page. We define style only once and it can be defined to elements in multiple pages. For example suppose that requirement is that heading in all pages in a web site should be in red color and it should be displayed in bold. We can defined this style in a CSS sheet and then simply refer name of this sheet in all web pages of the site. This style will appear on all web pages of the site. Therefore, this is named "cascading".CSS is also used to define layout of elements in a web page. We can specify where an element should be displayed and how to display. For example, text should be displayed below an image or text should float around image, in what way and so on.
Thus, we can prepare very attractive and impressive web pages using CSS.
Clearly understand that HTML is used to display actual content of a web page whereas CSS is used to style elements, that is presentation purpose. Thus CSS assists HTML in applying styles and layouts of elements in a web page.
Of course, there are tags in HTML for formatting and layout, but many of them are not supported by HTML5, instead it is recommended to use CSS.
There are some scripting languages like JavaScript, which are useful in developing a good web page.
How to write CSS?
Today we will study CSS. We will see how CSS is written.CSS statement consists of two parts - 1. Selector and 2. Declaration.
In selector is used to specify the name of element for which we are writing CSS. There are different methods of writing selectors. We will study them in lesson-22. In declaration we write actual style. For example, suppose that element is h1 and its style states that it should be in red color. Then our CSS will be as follows:
<h1 {color:red;}>
This is enclosed in < and >. {color:red;} is declaration. We write it in { and }. Here "color" is the CSS property and "red" is value o this property. A colon : is given between a property and its value. A semicolon ; indicates that declaration for that property ends. If second property is given in declaration then first complete first property (;) and then write second property. After second property again give ; symbol. Thus between two properties a semicolon is given.
CSS comment
How do we write a comment?/*comment*/
Whatever is written between /* और */ is comment.
Methods of Writing CSS
There are 3 ways of writing CSS.1. External CSS, 2. Internal CSS, and 3. Inline CSS
Today we will study external CSS.
External CSS
Let us write a CSS today. Open a new Notepad file. In this copy text from Lesson-8.We will first create an external style sheet. To do this open another Notepad file. In this file copy following code.
h1 {
color: red;
text-align:center
}
p {
color:blue;
}
In this code we have written style for h1. First declaration is for red color and second is for text alignment in center. Note that "color" and "text-align" are CSS properties.
Then we have written CSS for paragraph. In this declaration states that text color should be in blue color.
The above code is very simple to understand, but syntax of writing CSS is very important. We need to always follow this syntax. Remember this. Our CSS style sheet is shown in following figure.
 |
| Figure 20-1 CSS external style sheet |
Save this file as "style1.css". Now close this Notepad file. We have written our CSS file.
Remember:
1. CSS file is written in simple Notepad.
2. This file is always saved with extension ".css".
3. CSS file contains declarations. It does not contain any HTML tags.
Now let us go in our Notepad file where we are writing today's code. We have already copied text from "Lesson-08".
In this file just below <head> write an HTML comment
<! Example of external CSS>
After </title> write following:
<link rel="stylesheet" type="text/css" href="style1.css">
We are linking our CSS file with this file using this code. <link> tag is used for linking external css file with our HTML script.
There are 3 attributes of <link> tag.
1. "rel":
We have linked our css file "style1.css". We have referred this file in our "Lesson-20". "rel" specifies the relation between these two files.
This attribute is used to specify type of the document.2. "type"
3. "href"
This attribute is used to specify the name of file which is linked. It is "style1.css"।Now change our code as follows. We have written style for for h1. Remove style="color:blue;" from h1. Now external css is going to style of heading.
There is style in paragraph tag - style="background-color:red;". Style for paragraph will be applied by external css.
Delete third <p> to </p>.
 |
| Figure 20-2. Link external CSS |
Now save this file as "Lesson-20" and "Lesson-20.html". Click on the above figure for PDF file of source code. Double click on HTML document. See output.
 |
| Figure 20-3 Style displayed in web page from external style sheet |
We can see style specified in our "style1.css" in the output.
Note that: We have seen how to use external css in HTML. We can refer this style sheet in all pages of a web site. This will give uniform look to web site. Later if we feel that color should be blue instead of red, then simply change "red" to "blue" in ".css" file and this will take effect. Now we can understand how powerful CSS is!!
Important Points:
1. CSS stands for Cascading Style Sheets.2. HTML is used to write actual contents of a web page and CSS is used to apply styles to elements. CSS is also used for defining layout of elements in a web page.
3. CSS makes coding simple.
4. There are three methods of writing CSS. 1. External CSS, 2. Internal CSS, and 3. Inline CSS.
5. External CSS: We write a separate style sheet in simple Notepad and saved as ".css" extension. Later this sheet is referred in HTML as per requirement. To do this <link> tag is used.
Lesson-19 Lesson-21
