Question

I have a following snippet from a CSS style sheet,

.header {min-height: 62px; background: #191919 url("images/header.png") bottom repeat-x;}

.header>div {width: 940px; overflow: hidden; margin: 0 auto;}

.header p {margin: 0;}

.header p.title {float: left; max-width: 450px; margin: 0; padding: 10px 17px 10px 0; background: url("images/header-separator.png") right center no-repeat; color: #fff; font: normal 1.833em/42px MuseoSans,sans-serif;}

.header p.title a {color: #fff; text-transform: uppercase;}

I know header is a class but I am not able to understand other tags in the code. Can someone explain me with a sample html?

Answer 1

.header = element/s class ‘header’

.header>div = elements div children of .header

.header p = elements p childrens of˙.header

.header p.title = elements p with class ‘title’ – childrens of .header

.header p.title a = elements a clildrens of p.title children of .header