css selectors div span and link
TRANSCRIPT
UNDERSTANDING CSS: Thinking Inside the Box
Selectors, Div, Span, Link
The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.
In this example, block level elements are shown with red borders, and inline elementshave green borders.
The <body> element creates the first box, then the <h1>, <h2>, <p>, <i>, and <a> elements each create their own boxes within it.
• Using CSS, you could add aborder around any of the boxes, specify its width and height, or add a background color. You could also control text inside a box — for example, its color, size, and the typeface used.
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.
CSS Structure
p {color: red;
}
Selector
Curly Braces
Property
Value
ColonSemi Colon
Declaration Block
CSS StructureSelectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into twoparts (a property and a value), and are separated by a colon.
CSS StructureCSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon.
Display Property• CSS display property allows you to
control how an element is displayed. Block level element is laid out vertically. As you can see, a new paragraph begins with a new line after the end of another paragraph.
• Inline level element is laid out horizontally and will only proceed to the next line when the end of the line is reached.
Display PropertyKind Description Example
Block Level Elements
Laid out vertically <p> block<p> block
Inline Level Elements
Laid out Horizontally
<em> element <b> element
The following code, without the display property, will give the result as shown below.<html><head> <title>Display Property</title> <style type=“text/css”> <!-- p.blue { color: blue; } h1#red { color: red; } --> </style></head> <h1 id=“red”> Visual Guide Series</h1> <p class=“blue”>Cretive Design CS5</p> <p class=“blue”>Web Design</p> <p>Animation and Multimedia</p></body></html>
The following code, without the display property, will give the result as shown below.
Property for DisplayProperty Keyword Description
display: Inline Inline display or horizontal layout
display: block Block display or vertical layoutdisplay: list-item Display as a list item <li>
display: none No box or the element has no effect on the layout
display: inherit Inherit value from parent
Adding the inline display attribute inside the CSS style results in a browser output as shown.<html><head> <title>Display Property</title> <style type=“text/css”> <!-- p.blue { color: blue; } h1#red { color: red; } p {display: inline; } --> </style></head> <h1 id=“red”> Visual Guide Series</h1> <p class=“blue”>Cretive Design CS5</p> <p class=“blue”>Web Design</p> <p>Animation and Multimedia</p></body></html>
Result:
Div Tag• Div divides the contents of a web page
into individual sections. This allows you to apply styles to different sections of your Web Page. It is a generic way of adding structure to an HTML document.
• Div tag is a block level element and is, therefore usually is applied to block HTML and should not be used within a paragraph. In most browsers, a div tag will provide line spacing before and after a block element.
Example of Div Tag
Output
Span Tag• Span Tag is a generic way of adding
structure to an HTML Document. Span is applied to an inline element. It is used to emphasize words or sentences within a paragraph.
Example of Span tag
Output
Example of Div and Span
Output
Assignment:1. What are Classes and Class
Selector? Give some example2. What are ID selector? Give an
example3. What is Pseudo-Classes for
Links?
Transitional Page
Backdrops:- These are full sized backdrops, just scale them up!- Can be Copy-Pasted out of Templates for use anywhere!
www.animationfactory.com