CSS Class and Id

Preview:

Citation preview

What will you learn today?

IdClassBox model

CSSclass

Classes are useful to apply similar declarations to a variety of elements.

Class is specified by including a period (.) before the selector name.

CSSclass.className{ property: value}

SYNTAX:

.myStyle{ color: #99FF00}

<p class=“myStyle”> Some text here</p>

<h3 class=“myStyle:>Heading 3</h3>

CSSid

Id selector can be called only once in a document.

Id is specified by including a number sign(#) before the selector name.

Id can be called by Javascript’s getElementById function.

CSSid

.#idName{ property: value}

SYNTAX:

.box1{ background-color:#CCDDFF}

<div id =“box1”> Some text here</div

CSSBox MODELThe CSS box model is

essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

Thank

YOU!!!

Recommended