Web sayfanıza koymak istediğiniz metin içeriğinin önemli gördüğünüz kısımlarını işaretlemek, belirgin hale getirmek isteyebilirsiniz. Basit bir CSS kodu yardımıyla ders çalışırken kullandığınız fosforlu kalemle işaretler gibi metin içeriğinizin istediğiniz kısımlarını ya da tamamını işaretleyebilirsiniz. Bunun için kullanmanız gereken CSS kodu "background-color" dur. Bu kodu metin içeriğinizi işarelemek içi kıullandığınız HTML tagına (<b>, <a>, <span>, <div>,... gibi) bir "Style" özelliği olarak ekleyebilrsiniz. Bunu bir örnekle açıklayalım,
Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.
Taglar arasındaki farkı görebilmemiz açısından aynı işemi <div> tagı için uygulayalım.
Dikkat ettiyseniz iki tag arasında önemli bir fark var. HTML'nin bazı tağları sayfayı satır satır işaretlerken bazıları kutu şeklinde bir alanı işaretler. Tasarımınızı yaparken bu önemli farkı da göz önünde bulundurmalısınız.
< b style="background-color: #9fc666;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at...... </b>
Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.
Taglar arasındaki farkı görebilmemiz açısından aynı işemi <div> tagı için uygulayalım.
<div style="background-color: #9fc666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.
Dikkat ettiyseniz iki tag arasında önemli bir fark var. HTML'nin bazı tağları sayfayı satır satır işaretlerken bazıları kutu şeklinde bir alanı işaretler. Tasarımınızı yaparken bu önemli farkı da göz önünde bulundurmalısınız.