rhatano

## Box Model Ques
<div id="box">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mi tellus, at ornare risus. Donec at diam id purus eleifend
congue.</p>
</div>

## Composing Selector
<p class="pink">This paragraph will be pink</p>
<p> This paragraph will not be pink</p>
<h1 class="pink">This heading will be pink</h1>

## CSS question 7
<p><span class="red">Hello</span>there test taker !</p>

## CSS question 5
<h1 id="pink">Pink Heading</h1>

## The display property
Using the property 'display' there are two values that can be associated with it.

The first property is inline, the elements affected by it are displayed inline follow the flow of a line.
The second property is block, which separated the elements affected by it by a line break.

This is useful to override the way that HTML displays itself by default; for example, look at the <h1> tag.
Every instance of the h1 tag, or any header tag, is immediately followed  by a line break.

However if I used the following CSS:

## id selector 1
You can also compose id selectors and html selectors.

For any id value "id" and any html tag "tag"

#id tag {
    [some CSS]
}

Only the tag instance with the id value "id" will be styled under the properties in [some CSS].

## class selector 1
For any html tag "tag"
and for any class value "class"

tag.class {
    [some CSS]
}

That snippet of CSS will style each element with both tag type "tag" and the class value "class".


## gist:2332712
Well to do that, you simply combine the two types of selectors.

Say you had some HTML like this;

<h1>Example</h1>
<h1 class="first">This is my first heading</h1>
<p class="first"> This is my first paragraph</p>
<h2 class="second">This is my second heading</h2>
<p class="second"> This is my second paragraph</p>

## Class Selector CSS 1
.big {
    font-size:2em;
}

## Class selector HTML
<body>
<h1 class="big">Heading</h1>
<p class="big">lorem ipsum dolor sit amet</p>
<p>Second Paragraph</p>
<ul>
<ol class="big">This is a list</ol>
</ul>
</body>
	<div id="box">
	<h1>Heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mi tellus, at ornare risus. Donec at diam id purus eleifend
	congue.</p>
	</div>
	<p class="pink">This paragraph will be pink</p>
	<p> This paragraph will not be pink</p>
	<h1 class="pink">This heading will be pink</h1>
	Using the property 'display' there are two values that can be associated with it.

	The first property is inline, the elements affected by it are displayed inline follow the flow of a line.
	The second property is block, which separated the elements affected by it by a line break.

	This is useful to override the way that HTML displays itself by default; for example, look at the <h1> tag.
	Every instance of the h1 tag, or any header tag, is immediately followed by a line break.

	However if I used the following CSS:
	You can also compose id selectors and html selectors.

	For any id value "id" and any html tag "tag"

	#id tag {
	[some CSS]
	}

	Only the tag instance with the id value "id" will be styled under the properties in [some CSS].
	For any html tag "tag"
	and for any class value "class"

	tag.class {
	[some CSS]
	}

	That snippet of CSS will style each element with both tag type "tag" and the class value "class".
	Well to do that, you simply combine the two types of selectors.

	Say you had some HTML like this;

	<h1>Example</h1>
	<h1 class="first">This is my first heading</h1>
	<p class="first"> This is my first paragraph</p>
	<h2 class="second">This is my second heading</h2>
	<p class="second"> This is my second paragraph</p>
	<body>
	<h1 class="big">Heading</h1>
	<p class="big">lorem ipsum dolor sit amet</p>
	<p>Second Paragraph</p>
	<ul>
	<ol class="big">This is a list</ol>
	</ul>
	</body>