áááááááááá: áá£á áá HTML áá  áá áá¡ áá ááááá áá ááá áá¥ááá á¨áááá«áááá áááááá§áááá á¨ááááá ááá áááá ááá. áá¥ááá á¨áááá«áááá áááááá§áááá á áá¦ááª ááá£á¬ááá CSS, áá á¡á¢áááááá¡ ááá¡áááá£á á áªá®á ááááá, áá¡ááá. CSS ááá«áááá á¡áá¨á£áááááá¡ áááªáááááá á£á¤á á áá£á¡á¢áá áá¡ááá¢áááá¡ ááá áááá áá, ááá áááááááááá¡ áá ááááá¡ áá á¤áá ááá áá á¨á áá¤á¢ááá áá áá ááááá á¡á®áá. ááááááááá, ááááá á¨ááá¥áááá ááá áááá áá áá¥ ááá£á¬ááá CSS0, á ááááááª á¬áá áááááááá¡ áááááá á áááá áá, ááá¥ááá, á¯áá á°áá ááá ááá¡. 

áá áááá ááá, á©ááá áááá¥áááá á¯áá á°áá ááá ááá¡ á¡áá®ááá, á¥ááá¨, á ááááááª áá¥áááá áááááá áááááááá ááááá¡á á¡áá, á¥ááá¨ á ááááááª áá¥áááá footer, áá ááá ááá¥ááá, ááá áááá£áá ááá¤áá áááªáá á¡áááá¢áá á á£á¤ááááááá¡ á¨áá¡áá®áá. áááá¡ááááá¡ ááááá ááááá¡ááá¦áá áá á¡ááá ááááááá ááááááá¡áááá¡ áááá ááá ááááá§áááááá tag ááá£á¬ááá div. á¦áá bracket div á¯áá á°áá ááá ááá¡, áá®áá bracket div ááááá áá áá á¦áá bracket div, áá áá®áá á©ááá áááááááá áá¢á á áá¦ááª á áááá ááªáá, ááááá¡ááááááá á©ááá áááááá á áááá áá! áá ááááá ááá®á£á áá div, áá¡ááá. 

áá áá®áá ááá¡ááá áá á¡áááááá div, á¡áááá¢áá á. á£áá áááá á£ááá áá§áá¡ áááááá, áááá áááááªáá áááááá§áááá áá®áá HTML ááá á, á¡áááááá, á ááááááª á¬áá áááááááá¡ á®áá¡áááá, á áá áá¥ááá á¨ááá«áááá á¡á®áá á áá áá  áá áá¡ á©áá¬áá áá áá¥áááá¡ ááááááá¢á£á ááá. ááá á«áá, áá ááááá áá áááá¡ ááááááááá¡ ampersand, á¤á£áá¢á, 169, áá«áááá. ááááááá¡, á áá áá áá¡ á ááªá®áááá áááá ááááááá¡áááá¡ á¡áááá¢áá á á¡áááááá. ááá¨áá ááááá ááá£ááááá John Harvard áá¥ ááááá¨á. ááááá ááá®á£á áá div áá á¨ááááá®áá á¤áááá. 

áá®áá, á á áá áá¡ áá¡ div tag? Div tag á£áá áááá áááá¡ááá¦áá ááá¡ áááá§áá¤ááááá áááá ááá, á ááááááª áá á¡áááááá ááá ááá£áá®á á áááááá¨á. áá¡á á áá, áá áá¢áááá, áá áá§ááá¡ á¡ááá ááá ááá£áá®á á áááááááá¨á, áá á ááááá á¡á®áá. áá¡á á áá áá®áá, áá¤áá¥á¢á áááá¥ááá¡ á áááá áª ááá£á®áááááá áááá¡á, á áá áá áá¥áááá á¡ááá áá£áá¥á¢ááá¨á. áááá áá á©ááá ááá  áá®ááááá á¡áááááá áááááá áááá á á¡ááá áªáá¡ ááá á¨áá áá¡. 

ááááááá á©áááá á¤ááááá¡ á¨ááªáááá¡ ááááá¡ á£á¤áááááá, áá áááá¦áá¡ á¡áá®á áááááá¢á Chrome. Chmod + r CSS0.html. ááááá áá®áá ááá®á¡áá Chrome áá á¨áá¡ááá http://localhost.CSS0.html. ááá ááááª, áá¥ áááááá á áááá áá á¯áá á°áá ááá ááá¡. ááááá áá®áá stylize áá¡ áªáá¢á ááá¢á áá£á¡á¢áá ááááá§áááááá áááááá áá CSS. 

á£ááá gedit, ááááá á¬áá¡áááá¡ áá ááá áááá div tag áá áááááá¢áá á¡á¢ááá ááááá£ááááá¡ ááá£áááááá¡, á áá ááááá á¨á áá¤á¢áá¡ áááá, ááá¥ááá, 36 pixels, áá px. áá ááááá á¬áááá¡ áá font á£ááá áá§áá¡ áááááá£áá, áááá á á©ááá£áááá áá, á ááª ááá áááá£á áá. áááá á div, ááááá ááá£ááááá á¡á®áá á¡á¢ááá áá¢á ááá£á¢á, á ááááá¡ááª áá¥áá¡ á¨á áá¤á¢áá¡ áááá 24 pixels, áá¡á á áá, áªáá¢á ááá¢áá á. Close quotes á¨ááááá áá«áááá. 

áá ááááá¡, ááá¡ááá div, ááááá á¡á¢ááá á¨ááááááá¡ áááªááá, á¨á áá¤á¢áá¡ áááá áá ááá¥ááá 12 pixels áá áá áá¡. Close áááªááá á¨ááááá áá«áááá. ááááááááá¡á¬áááá, ááá¨áá, á áá áá, á áááá áª á©ááá¡, áááááááá£áá áªáá¢á á¡á¢ááááááªááá¡á for áááááá£áá áá á¡ááá divs ááááá§áááááá, áá£á áá, CSS. á¤áá¥á¢ááá áááá, á¡ááá¢áá¥á¡á, á áá á®ááááá á¨áá áá¡ áá áááá á¨ááááááááááá áá áá¡ CSS, ááááá áá¢á£ááá CSS áááá¡ááááá á¤áá¡áá£ááááááá. áá á áá ááá áááá tag, á¡ááááª áá áá¥áááá áá á áá¡ááá áááá¡ááááá, á¨á áá¤á¢áá¡ áááá áá á¨á áá¤á¢áá¡ á¬ááá, áá á£áá áááá áááááá§á ááá áá«áááá. 

áá®áá, á£áá áááá á¡á¢ááá áá£ááá¡áááá¡, áá áá¡ááá á¨áááá¡ semicolons at á§ááááá á®ááá. áááá áá áá¡ááá áá  ááááªá áá áá£áªáááááááá, áááá¡ááá£áá áááá ááá¨áá, á áááá¡ááª áá¥ááá áá®áááá áá áá á£á«á ááá á¥ááááá áááá¡ááá¦áá á£áá. ááááá áá®áá á¤ááááá¡ á¨áááá®áá áá á©áá¢ááá ááá Chrome, áá áááá®áá á á á¬ááááá áá¤áá¥á¢á. á£ááá Chrome áá¥, ááááá áááá¬áááá£ááá Reload. 

áá®áá á©ááá áááá¥áá¡ ááááá á£á¤á á á¡áááá¢áá áá¡á áááááá á áááá áá á¯áá á°áá ááá ááá¡, á ááááá¡ ááá áááá á®ááá ááá¡á á¡áá®ááá, á ááááááª áá áá¡ á¨ááááá á áá ááá áááá div, 36 pixels á¡áááá¦ááá¡ áá áá¡ááá áá£á¥á, á ááááá¡ áááá á á®ááá, á ááááááª, á áá áááá á div, 24 pixels á¡áááá¦ááá¡, áááá áá áá á áá£á¥á. áá á ááááá¡ ááá¡ááá á®ááá, á áá ááá¡ááá div 12 pixels á¡áááá¦ááá¡ áá áá¡ááá áá  áá£á¥á. áááá áá ááá áá£ááááá, áá®áá ááááá áááááá¢ááá á§áááá áá á¢áá¥á¡á¢áá¡ ááá¢á áá¡ááá, á áá áá¡ áá áááá¢áá ááá£áá. 

áá ááá  á£áá ááááááá áááááá£áá áááááááá£ááá£á á divs, á áááá áª áá áááá¢áá ááá£áá. áááá áá á£á¤á á ááá á¢áááá, á¨ááá«áááá áá áááááá¢áááá áá á¡ááá divs á¨ááááá ááááá®á div, áá¨ááááá div, áá¡á ááá¥ááá, áá ááá£ááááá , á áá div áá á§áááá ááá¡á á¨ááááááááááá á£ááá áá§áá¡ á¢áá¥á¡á¢á áááááá¡ áªááá¢á á¨á? áááá¦áá á¡áá®áá¡. 

á¨ááááá gedit, ááááá áááá£áá á£áááá á©ááá¡ á¡á®áá£ááá¡ áá áááááá¢áá áá®ááá div up áááá á£áááá div, á¡á¢ááá á¨ááááááá¡ áááªááá unquote á¢áá¥á¡á¢áá¡ ááá¡á¬áá ááá áªááá¢á á, áá®áá áªáá¢áá áááá¡ á¨ááááá áá«áááá. áá áá®áá, ááááá á¬áááááá á¬áá áá áááááªáá¡ á§áááá áá á®ááááá, á áá á©ááá ááá áá¤ááá ááá á. áá á¥ááááá á áá ááá¡ááá div, ááááá ááá®á£á áá new div. 

á¡á®áá á¡áá¢á§ááááá á áá ááá¥ááá, áááá¢áá, á áá áá á¡ááá áá ááááááá£á á divs áá®áá áááá¨áááá, áá¡á ááá¥ááá, áá®ááá áá¨ááááá div áá áá áááááááá£ááá, á áá ááááá á£áá ááááááá á¢áá¥á¡á¢á, á áá áá¨ááááá div áªááá¢á á¨á áááá ááá, á áá á¡ááá£áá ááá áá¥áááá áááááááá ááááá ááá¦ááá£áá á§áááá áá áááá¨áááá¡. ááá ááááª, ááááá á¤ááááá¡ á¨áááá®áá áá á¨áá®áááá áá áá£ááá á¨á. ááááá áááááá®ááá in Chrome. áá áá¥ á©ááá áá¡, áá ááááááááááá áááááá á áááá áá á¯áá á°áá ááá ááá¡.