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
In this “CSS How To Tutorial”, you will learn the syntax and rules of the Cascading Style Sheet (CSS) language. You will learn the components of CSS rules, including selectors, declarations, properties, and values. You will learn how to style a series of simple HTML elements. You will also learn how to use shorthand properties.
Setting Up the HTML Code
The HTML code for this How To Tutorial will have three main elements the <h1>, <h2> and <p> tags.
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
Creating a Rule Set
A css rule or css rule set, is a statement that tells a browser how to render the elements on an HTML page. A css rule set consists of a selector followed by a declaration block. Inside the declaration block, there can be one or more declarations. Each declaration contains a property and a value.
| selector |
Declaration block |
|
|
|
declaration |
|
declaration |
|
|
Property |
Value |
Property |
Value |
| .body |
{color: |
Red; |
padding: |
5px;} |
The first step in creating a rule set is to decide on a css selector. The selector “selects” the elements on an HTML page that are affected by the css rule set. The selector consists of everything up to the first left curly bracket.
The selectors for this CSS How To Tutorial or H1, H2, and P
The declaration block is the container that consists of everything between (including) the curly brackets. Inside the declaration block, there are one or more declarations. Declarations tell a browser how to draw any element on a page that is selected. A declaration consists of a property and one or more values, separated by a colon. The end of each declaration is indicated with a semicolon.
Setting Up the CSS Code
<style type=”text/css”>
<!–
h1 {text-align: center; }
h2 {font-style: italic; }
p {color: maroon;}
–>
</style>
The property is an aspect of the element that you are choosing to style. There can be only one property within each declaration unless a shorthand property is used.
The value is the exact style you want to set for the property. Values can include length, percentage, color, url, keyword, and shape.
The first rule set will target the <h1> element and align it to the center of the browser window.
The second rule set will target the <h2> element and render it in italics.
The third selector will target the <p> element color all the text found inside the element maroon.
Posted in Understanding CSS by frenchsquared -
