IT Admin

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…

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:

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.

Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules.

All styles will be hidden from Netscape Navigator 4 by changing the link element’s media type from screen to screen, projection. Netscape Navigator 4 does not support multiple media types.

The remaing styles will be hidden from IE 4 and several other older browsers by moving the <p> element rule set out of the original style sheet and into the imported style sheet. IE 4 can not read imported files.

All modern browsers will read the multiple media type screen. projection. as well as the imported style, so they will display the fully styled <p> element.

Header styles can also be hidden from older browsers by enclosing the contents of the styled element inside a comment.

@import Styles?

Header and external style sheets also can import other style sheets using the @import rule. The @import rule must be placed before all other rules in the header or external style sheet.

Imported styles can be used to link to multiple CSS files as well as to hide styles from older browers.

The third method of applying styles to  document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages.

To change the header style to an external style, move the rule set to a new CSS file. That means copy the code to a new filed called something like style.css

Next you have to link your HTML page to your CSS.

That is all the code required. Now you simply add the style sheet link in all of your html pages and you can control your entire site from on style sheet.

Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.

There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.

The type=”text/css” attribute must be specified within the style element in order for browsers to recognize the file type.

CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather then one CSS file.

• New blog post: CSS, What is a <div> http://bit.ly/Sbfu #
• Flash, ActionScript tutorials on loops http://bit.ly/QMq8t #
• Great PHP Tutorial on using include and require. Include is a great way to control your header or footer. http://bit.ly/pnX7g #
• Install OSX on your PC (Gigabyte GA-EP45-UD3P): http://digg.com/d3zt8L?t #
• CSS How To, IDs have more weight then classes. If a class and ID apply the same property to one tag, the ID selector's value will be chosen #
• RT @Brukhar 26 Ridiculously Awesome Computer Generated Portraits | Presidia Creative http://bit.ly/FNlND #
• I get to build a +50 page dynamic website for a an elementary school before monday. Ya, for procrastination. #
• but first I get to go chill at the hospital for fun tests #

Powered by Twitter Tools

Child selectors

Child selectors are used to selected an element that is a direct child of another elements parent. Child selectors will not selected all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>

*Child selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.

Adjacent sibling selectors

Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an <h3> element, but only <h3> elements that immediatly follow an <h2> element. This is a commonly used example because it has a real-world application. There is often to much space between <h2> and <h3> elements when they appear immediately after each other.

*Adjacent selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.

Attribute selectors

Attribute selectors are used to select elements based on their attributes or attribute value. For example, you might want to select any image on an HTML page that is called “small.gif”

*Attribute selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.

Pseudo-elements

Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is not a way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements.

*Pseudo-elements selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.

Pseudo-classes

Pseudo-classes enable you to format items that are not in the document tree. They include :first-child, :link, :visited, :hover, :active, :focus, and :lang(n). Pseudo-classes will be covered in later posts.

Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used.

Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element.