Introduction To CSS Cascaded Style Sheets In Websites and CSS Basic Rules

Tutorial 1 :

First i want to tell you what CSS actually is.  CSS stands cascading style sheets. It is a web standard which provides the designers, control over a wide range of stylish pages that appear on websites. To work  in the CSS you will need a good text Editor like BBedit Lite but if you do not have it you can use simple text editor.As an example, when you move your mouse over a text on a webpage its size or the color changes, is done by CSS Coding

Now lets make a simple code for showing a red text in website and i am assuming you know what html is.

<html>
<head>

      <title> Hello World Simple Example CSS www.Stylebizz.com </title>
      <Style type="text/css">

      <!--
           p {color: red;}
      -->
       </style>
</head>
<body>

<p> This Color is RED becuase we assigned red color above </p>

</body>

</html>

 See Output

  • Now in the above code CSS is included in the document body.
  • In the CSS we have defined a rule that if there is any paragraph assign color RED.
  • This rule is defined between html comment tags(  <!– –> ).

Structure of CSS Rule :

p {color: red;}      p = Selector  ,  Color = Property  , RED = value   

  • p means all paragraphs are going to get color RED…
  • Now in CSS there are many different Properties like ranging from colors to background colors links position of page borders margins and much much more.
  • And remember property is always initialized by some value and here in the above example the value is RED.
  • Every CSS statement is followed by a semicolon so never forget to put semicolon.

Now you can insert as many as rules you wanted now for example you want to bold your text then you will have to inserta statement into the same place below where the 1st rule is defined


font-weight=bold;

New Line inserted is shown by the RED color

<html>
<head>

<title> Hello World Simple Example CSS www.Stylebizz.com </title>
<Style type=”text/css”>

<!–
p
{
color: red;
font-weight:bold;
}

–>
</style>
</head>
<body>

<p> This Color is RED becuase we assigned red color above </P

</body>

</html>

 See Output

There are many kinds of values which we will user later are in CSS.

Write the code in text editor and save file with extension Name.HTML then open the saved file to see output follow instructions in below screen shots

Save html

 

see html output

 

SEE TUTORIAL # 2 

2 thoughts on “Introduction To CSS Cascaded Style Sheets In Websites and CSS Basic Rules”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>