Html kullanımında <p>.....</p> etiketinin yeni bir paragraf açmak için kullanıldığını yazmıştık. Daha önce yazdığımız kodları tekrar yazalım;
<html>
<head>
<title>Bu benim ilk web sayfam</title>
<meta name="description" content="Bu bölüm sayfanız ile ilgili açıklayıcı bir cümlenin yer aldığı bölüm" />
<link rel="stylesheet" href="bukalemun.css" type="text/css">
</head>
<body>
<p>Html öğrenmeye başladım, sonunda ben de bir web sayfası yapmayı öğreneceğim, belki önceleri basit sayfalar yapacağım ama dersler ilerledikçe çok daha zor ama çok daha güzel sayfalar yapabileceğim.</p>
</body>
</html> İçeriğimizi <body> </body> etiketleri arasında kalan <p> </p> etiketleri arasına yazıyorduk. Ancak şimdilik <p> <p> etiketine hiç bir özellik vermedik, dolayısıyla yazılarımız siyah ve 12 punto olarak çıktı. Şimdi yazılarımızı biraz şekillendirelim, peki nasıl şekillendireceğiz? Tabii ki CSS ile. bukalemn.css dosyamızı açalım ve
p: { font-size: 14px; color: #ff6666; font-weight: bold; }kodlarını yazdık. Şimdi bu yazdıklarımızın ne anlama geldiğini yazalım; <p> </p> etiketi içindeki yazılarımızın bazı özelliklerini belirttik ve bu özelliklere bazı değerler atadık,
font-size, yazının büyüklük özelliği ve biz buna 14px değer atadık, color (renk) özelliğine #ff6666 (kırmızı) renk atadık ve yazılarımızın kalın olması için
bold değerini verdik. Peki diyelim ki bir başka paragrafta kırmızı değil de mavi renk kullanmak istedik, yani aynı sayfa içinde hem kırmızı hem mavi yazı kullanmak istedik. O zaman yine css dosyamızı açıyoruz ve aşağıdaki kodu ekliyoruz;
p.mavi: { font-size: 10px; color: #3333cc; font-weight: normal; } şimdi mavi adını verdiğimiz bir başka p (paragraf) tanımladık css dosyamızda, renk olarak mavi
#3333cc boyut olarak 10px ve yazıyı kalın değil normal yazmasını söyledik. Html kodlarını yazarken de
<p>Bu kırmızı renkli bir paragraftır.</p>
<p class="mavi">Bu da bir başka paragraftır ama bu paragrafın renkleri mavi olarak görünecektir.</p> şeklinde yazacağız, dikkat ettiyseniz ikinci paragrafa bir sınıf atadık ve kodları
<p class="mavi"> haline getirdik
Aynı paragraf içinde bir alt satıra geçmek istersek
<br /> etiketini kullanmalıyız, örnek;
<p>Bu bir paragraf<br />bu da aynı paragraf içinde bir alt satır</p>
Html kod yapısı içinde paragraf oluşturmak konusunda sorularınız varsa konu altında sorabilirsiniz.
Html ve Css kullanarak sayfaya resim ekleme
