Friday, 14. August 2009
Block level elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes.
Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong text, and links.
All block level and inline elements are boxes that use the box model. Both types of elements can be styled with box model properties such as margin, background-color, padding, and border.
Some box model properties, such as height and width, do not apply to inline elements. Also, margin and padding applied to an inline element will affect the content on either side, but not the content above or below.
My next few posts will cover this concept in more detail…
Posted in CSS Box Model by frenchsquared -
Thursday, 13. August 2009
If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style sheet. I have come to realize that if I am more then a few pixels of then my code is somehow incorrect.
Still there is always that one issue. FrenchSquared was perfect in all the current major browsers except Safari and in Safari only the footer was off by 10px. I mean really 10px. There was no way I was going to write a browser check for Safari over 10 lousy pixels.
Instead in the bottom of my CSS I added the code:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
#footer { padding-top:10px; }
}
I have no idea why tis works but it does. In Safari 3.0 and 4.o you can add @media screen and (-webkit-min-device-pixel-ratio:0) to the style sheet and place whatever correction you need inside that tag. None of the other browsers will see this code.
I simply create a separate tag for Safari and now everything looks great with one CSS page.
Posted in CSS Tips and Tricks by frenchsquared -
Wednesday, 5. August 2009
Sample HTML
<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>
<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>
Descendant Selectors
Descendant selectors are used to selected elements that are descendants of another element
For example, in the HTML sample shown above, three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used. This selector targets any <a> element that is nested inside an <li> element.
li a {
color:green;
}
Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id=”nav”> as well as the <li> element. This means that #nav a can be used as a selector as well.
#nav a {
color: red;
}
Descendant selectors also can include multiple levels of descendants to be more specific.
#nav ul li a {
color: green;
}
Posted in CSS Selectors by frenchsquared -
Friday, 31. July 2009
When several selectors share the same declarations, they may be grouped together to prevent the need to write the same rule more then once. Each selector must be separated with a comma.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
text-align: center;
color: navy;
}
In the above code The h1 and h2 elements share two declaration, so parts of the two rule sets can be combined to be more efficient.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1, h2 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
}
Posted in Understanding CSS by frenchsquared -
