PHP Developers

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes, not just class and id.

Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.

Attribute Selector

The example below styles all elements with a title attribute:

Example

[title]
{
color:blue;
}

Try it yourself »

Attribute and Value Selector

The example below styles all elements with title="W3Schools":

Example

[title=W3Schools]
{
border:5px solid green;
}

Try it yourself »

Attribute and Value Selector - Multiple Values

The example below styles all elements with a title attribute that contains a specified value. This works even if the attribute has space separated values:

Example

[title~=hello] { color:blue; }

Try it yourself »

The example below styles all elements with a lang attribute that contains a specified value. This works even if the attribute has hyphen ( - ) separated values:

Example

[lang|=en] { color:blue; }

Try it yourself »

Styling Forms

The attribute selectors are particularly useful for styling forms without class or ID:

Example

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

Try it yourself »

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.

Media Types

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

The @media Rule

The @media rule allows different style rules for different media in the same style sheet.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

<html>
<head>
<style>
@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  p.test {font-weight:bold;}
  }
</style>
</head>

<body>
....
</body>
</html>

See it yourself ! If you are using Mozilla/Firefox or IE5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.

Different Media Types

Note: The media type names are not case-sensitive.

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices

PHP Developers

Tuesday, August 21, 2012

CSS Examples

You Have Learned CSS, Now What?

CSS Summary

CSS Attribute Selectors

Style HTML Elements With Specific Attributes

Attribute Selector

Example

Attribute and Value Selector

Example

Attribute and Value Selector - Multiple Values

Example

Example

Styling Forms

Example

CSS Media Types

Media Types

The @media Rule

Different Media Types