CSS'de bir element veya kutu (box) gibi bileşenlerin görünüm modeli değiştirilebilir. Ana hatlarıyla CSS'de aşağıdaki görünüm modelleri bulunmaktadır :
Bir elementin veya kutunun modeli aşağıdaki gibi set edilmektedir :
p {display: inline}
inline yerine diğer modelerin adı yazılmaktadır.
Eğer bir element veya kutunun hiç gözükmemesi isteniyor ise none ifadesi kullanılır :
p {display: none}
CSS'de temel olarak üç tür pozisyonlama yöntemi (bileşenlerin sayfa üzerinde ve birbirlerine göre pozisyonlarının tespiti) bulunmaktadır :
CSS'de bir element veya bileşenin yerleşimini belirlemek için position özelliği kullanılmaktadır. Aşağıdaki değerler kullanılabilir :
Aşağıdaki örnekte float özelliği ile bir resmin solda gözükmesini , yazınında sağdan devam etmesini sağlayan örnek görülmektedir :
<html> <head> <style> img{ float:left; } </style> </head> <body> <img src="test.gif"></img> <p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek. devam edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek </p> </body> </html>
img etiketinin stili float:left verilmesinden dolayı img normal akış dışında solda gözükecektir. Yazı ise resmin sağından kayacaktır.
Aşağıdaki örnekte float özelliği ile bir resmin solda gözükmesini , yazınında sağdan devam etmesini sağlayan örnek görülmektedir :
<html> <head> <style> img{ float:left; } h1{ clear:left; } </style> </head> <body> <img src="test.gif"></img> <p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek.</p> <h1>Bu başlık resmin altında olacak</h1> </body> </html>
img etiketinin stili float:left verilmesinden dolayı img normal akış dışında solda gözükecektir. Yazı ise resmin sağından kayacaktır. Başlık ise clear:left özelliğinden dolayı sağdan devam etmiyecek ve resmin altına inecektir.