CODEWITHSUNDEEP
htmlcss
Bluetooth
Bluetooth

Reputation: 23

Specific Tags in CSS

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?

Upvotes: 1

Views: 2274

Answers (6)

Atom Vayalinkal
Atom Vayalinkal

Reputation: 2692

heres a sample that uses all of that css. live preview

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.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;}
</style>
</head>
<div class="header">
<div>
<img src="images/swag.jpg" width="100%" height="20px" />
</div>
<br /><br /><br /><br />
<p class="title">This is a Title <br /><a href="http://onthemouse.com">this is a link</a></p><br />
<p>this is a paragrapgh</p>
</div>
<body>
</body>
</html>

Explanation of elements: .header a*(link under header class)* {min-height: 62px; background:(color hex code) #191919 *(url to bg picture>)*url("images/header.png") *(position, repeat horizontal)*bottom repeat-x;}

.header>div (div inside header class){width: 940px;(width any image or object inside this div set to 100% width will have this width) overflow: hidden; *(no margin)*margin: 0 *(position auto, repeat auto)*auto;}

.header p*(

tag under header class)* {margin: 0;}

.header p.title (

tag with class title) {float: left;(alignment:left) max-width: 450px;(maximum width) margin: 0; *(sapce on sides)*padding: 10px 17px 10px 0; background: url("images/header-separator.png") *(position centered right, no repeat)*right center no-repeat; *(color white)*color: #fff; *(font size, and family)*font: normal 1.833em/42px MuseoSans,sans-serif;}

.header p.title a (link in

tag with title class){*(color white)*color: #fff; *(capital letters)*text-transform: uppercase;}

Upvotes: 1

Adam Dziendziel
Adam Dziendziel

Reputation: 925

There is a lot of available tutorial in the web on CSS selectors.

I would recommend Selectutorial. For detailed explanation of your selections see the class selectors chapter and the chapter on child selectors.

See also The 30 CSS Selectors you Must Memorize, this article provides a great overview.

Upvotes: 0

Sonal Khunt
Sonal Khunt

Reputation: 1894

.header>div means child div of .header class

.header p means assign this css to each and every p tag inside .header class

.header p.title means .title class of p of .header class

.header p.title a means a tags in .title class inside p tag of .header class

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

.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

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

.header > :tag:

means you are looking for an element :tag: who is directly descendent of element .header, so this will match:

<header class="header">
   <div>
   ...
   </div>
...

but this won't match

<header class="header">
   <section>
      <div>
      ...
      </div>
   ...

The other selectors are looking for generic nested elements of .header element:

  • a paragraph inside .header
  • a paragraph with class .title inside .header
  • a link inside a paragraph with class .title inside .header

Upvotes: 2

user894932
user894932

Reputation: 

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

would translate to

  <div class="header">
          <p class="title">
                   <a href="some link">All of this text would be WHITE and UPPERCASE</a>
          </p>
  </div>

Upvotes: 0

Related Questions