        ?
,  ?

   Cascading Style Sheets (CSS)/  .        CSS.       CSS.     ,  ,  .

CSS    HTML. ,   ,   : HTML      ( ),     CSS      (layout).

    7, CSS    style. ,        :

 1:

        <p style="font-size:20px;">   20</p>
        <p style="font-family:courier;">   Courier</p> 
        <p style="font-size:20px; font-family:courier">   Courier  20</p>

     :
[IMG]
/html/12-1.png

















      style     ( font-family)    ( font-size).  ,          ,     .
   ?

    CSS       .   style          ,      :

 2:

    <html>
       <head>
    <title>My first CSS page</title>
       <style type="text/css">
    h1 {font-size: 30px; font-family: arial}
    h2 {font-size: 15px; font-family: courier}
    p {font-size: 8px; font-family: times new roman}
       </style>
    </head>
 <body>
      <h1>My first CSS page</h1>
      <h2>Welcome to my first CSS page</h2>
      <p>Here you can see how CSS works </p>
    </body>
  </html>

     :
img/res/12-2.png










    CSS    head     .     <style type="text/css">,     .

         Arial  30px.   - Courier  15.         Times New Roman  8.

    CSS   .    CSS    .    ,           web-   .       ,          CSS.
      CSS?

CSS   ,       . ,      .     :
  
    <p style="color:green;"> </p>
    <h1 style="background-color: blue;">   <h1>
    <body style="background-image: XXX;">

       -   ,    CSS   head.
CSS  ,     ?

  : ,    . ., CSS           (, , , ,   . .).      CSS,        .

 3:

     <p style="padding:25px;border:1px solid red;">  CSS</p>

     :
img/res/12-3.png






   float   ""   .    :

 4: 

     <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlobortis nisl ut aliquip ex ea commodo consequat...</p>

     :
img/res/12-4.png














     ()  ,    ()  .

   position          :

 5:

          <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

     :
img/res/12-5.png













      50     10     .            . .     , ?