How CSS3 works
Written by jon on 3:25 AMCSS is a new smarter way to apply style properties to HTML elements.
You can set all kinds of style properties, like border, font, background, spacing etc. (We'll go into these in detail later.)
There are 3 main ways CSS styles can be applied:
- Inline with HTML
- On-page style definitions
- Separate style sheets
1) CSS Inline with HTML (use with caution)
1. CSS Inline with HTML (use with caution)You can write CSS directly into an HTML tag. In the example below, don't worry about the specific styles for now. (The <div> element is simply a box, as you'll see in the code) Code <div style="background-color:#ff3; border:1px solid black; color:red; font-size:150%; padding:1em;">I am a styled div!</div>Looks like I am a styled div! This approach is very similar to the old-style inline HTML styling, and suffers from all the same problems. It is only appropriate where the styling really is one-off. If there's a possibility that you'll use the same styling elsewhere, you really should use one of the below, because it will save time and effort if you have to change your styling later. 2. On-page CSS definitionsA better way to write CSS is to define your styles once in the document (preferably in the document <head> section). Code <head><style type="text/css"> div { background-color:#339; color:#fff; padding:15px; border-bottom:5px solid red; margin-bottom:15px; } </style> </head> <body> <div> I am affected by the definition above.. </div> <div> So am I, but the styles are only defined once. </div> </body> Looks like DIV.spesh { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; MARGIN-BOTTOM: 15px; PADDING-BOTTOM: 15px; COLOR: #fff; PADDING-TOP: 15px; BORDER-BOTTOM: red 5px solid; BACKGROUND-COLOR: #339 }I am affected by the definition above.. So am I, but the styles are only defined once. The benefit of this over the previous approach is that the style definitions are only written once. In this case, they'd apply to any <div> elements on the page. Use this method when you want to apply similar styles to multiple elements on a page, but not on any other pages. To apply the same styles to things on multiple pages, you need to use method 3 below. 3. Separate style sheetsThe ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles. (Another benefit of this method is that it enables you to use different style sheets for different user agents - which we'll address in a later article.) HTML pages can include as many CSS files as you need, and the styles will be combined together (according to inheritance & cascading rules we'll get onto later). Code (2 different files): my-styles.css body {background-color:#ccf; letter-spacing:.1em; } p { font-style:italic; font-family:times,serif; } my-html.html <head> <link href="my-styles.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <p>Here is some content in a paragraph.</p> <p>Here is another paragraph.</p> </body> How it looks .spesh2 { LETTER-SPACING: 0.1em } .spesh2 P { FONT-STYLE: italic; FONT-FAMILY: times,serif }Here is some content in a paragraph. Here is another paragraph. Note that, again, the styles I defined once have been applied to more than one qualifying element. The difference between this method and the one above is that, because I've defined the styles in a separate stylesheet, all I need to do to apply those styles to another HTML page is include the same stylesheet reference. |
| Posted in »
0 comments: Responses to “ How CSS3 works ”