Target with class

Here's our example HTML with the CSS that gives it its blue-ish background and padding. Achieved by targeting its class.

Output

User account

Control your settings and look after your account

CSS


									
										.panel {
										background-color: #dbeeef;
										color: #000;
										margin: 0 0 2em 0;
										padding: 1.5em;
										}

Targeting elements with the class panel

Target element within

Here's our example HTML with another style added, this time to change the colour of all <p> tags inside .panel.

Output

User account

Control your settings and look after your account

CSS


									
										.panel p {
										color: #f30;
										}

Targeting p tags inside elements with the panel class

Target with id

See how the background colour has changed, but only for this particular .panel, the one with the matching id.

Output

User account

Control your settings and look after your account

CSS


									
										#userAccountBox {
										background-color: #eee;
										}

Using an id to target specifically