Saturday, March 17, 2012

And now a little about CSS



What is CSS? It's means Cascading Style Sheet. We can use CSS to create a website which has  many pages . The best way is the making a separated css file and setting in the css file all necessary style-parameters for HTML tags. Through one css file we can establish same rules for so many web-pages or separated web-sites as you like. Moreover, we can make any change in a css file, and the page/pages will be changed immediately. The second benefit of a css file is that it will be cashed at request of browser, and the loading process other pages will take less time.  It is making enough easy our work. Cascading style sheets help us an easy way  formatting a website. We can define many parameters (size, style, color of fonts, format of margin, style of tables ... and so on) for hundred pages.

There are several ways to establish CSS.

INLINE STYLE

Sometimes it's better to use inline style than CSS. Inline style gives us an opportunity of
setting a special formatting for an element. The majority of HTML tags has style attribute.
When we want to apply inline style we should use in the HEAD section of a html document
this META tag: <META HTTP-EQUIV="Content-Style-Type" Content="text/css">.

THE SYNTAX OF INLINE STYLE


<P  style ="color:red" > .........</p>

P:         element
style:    attribute
color:   attribute's name
red:      value
The quotes can be single or double, but same. Keep in mind that we can set many
attributes their values for very same element. Let us notice a nuance:

Example 1. 

<html>
<head>
<style>
            p { color:red}
</style>
</head>
<body>
<p> text 1</p>
</body>
</html>

The color of text 1 will be red.

Example 2.

<html>
<head>
</head>
<body>
<p style="color:green"> text 2 </p>
</body>
</html>

The color of text 2 will be green.

Example 3.

<html>
<head>
<style>
p {color:red}
</style>
</head>
<body>
<p> text a</p>
<p style="color:green"> text b </p>
</body>
</html>

The color of text a will be red, but the color of text b will be green.

No comments:

Post a Comment