STYLE HTML ELEMENTS WITH SPECIFIC ATTRIBUTES

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;
}

Attribute and Value Selector

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

Example

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

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; }

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; }

Other Topics

CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,STYLE HTML ELEMENTS WITH SPECIFIC ATTRIBUTES

CSS::STYLING FORMS

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;
}

CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : FLOAT

CSS Float?

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left:

Example

img
{
float:right;
}

Floating Elements Next to Each Other

If you place several floating elements after each other, they will float next to each other if there is room.

Here we have made an image gallery using the float property:

Example

.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

Example

.text_line
{
clear:both;
}

All CSS Float Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property	Description	Values	CSS
clear	Specifies which sides of an element where other floating elements are not allowed	left right both none inherit	1
float	Specifies whether or not a box should float	left right none inherit	1

Other Topics

CSS : Cross browser compatibality,CSS : Left and right Aligning by float property,CSS : Left &Amp; Right Aligning By Position Property,CSS : Center Aligning By Margin PropertyCSS : Aligning Block Elements,CSS : Float,CSS : All Css Positioning Properties,CSS : Overlapping Elements,CSS : Absolute Positioning,CSS : Fixed Positioning,CSS : Changing How An Element Is Viewed Or Displayed,CSS :Pseudo Classes,CSS :Before pseudo element,CSS :After pseudo element,CSS : Multiple pseudo elements,CSS : pseudo-elements and CSS classes,CSS : First-letter pseudo-element,CSS :  First-element pseudo-element,CSS : Syntax for Pseudo elements,CSS : First-line pseudo-element,CSS : All Css pseudo classes/elements,CSS : The lang pseudo classCSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TEXT COLOR

 Text Color

The color property is used to set the color of the text.

With CSS, a color is most often specified by:

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

The default color for a page is defined in the body selector.

Example

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TEXT ALIGNMENT

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

Text can be centered, or aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TEXT DECORATION

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for design purposes:

Example

a {text-decoration:none;}

It can also be used to decorate text:

Example

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TEXT TRANSFORMATION

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TEXT INDENTATION

Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

Example

p {text-indent:50px;}

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : list-SHORTAND PROPERTY

List - Shorthand property

It is also possible to specify all the list properties in one, single property. This is called a shorthand property.

The shorthand property used for lists, is the list-style property:

Example

ul
{
list-style: square url("sqpurple.gif");
}

When using the shorthand property, the order of the values are:

• list-style-type
• list-style-position (for a description, see the CSS properties table below)
• list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified order.

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : CROSSBROWSER SOLUTION

Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

Example

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

Example explained:

• For ul:
• Set the list-style-type to none to remove the list item marker
• Set both padding and margin to 0px (for cross-browser compatibility)
• For all li in ul:
• Set the URL of the image, and show it only once (no-repeat)
• Position the image where you want it (left 0px and down 5px)
• Position the text in the list with padding-left

 
 
 
 

• Other Topics
  CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,
   
  

CSS : IMAGE as THE LIST ITEM MARKER

An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property:

Example

ul
{
list-style-image: url('sqpurple.gif');
}

The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.

If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is explained below.

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,

CSS : TABLE BORDERS

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for table, th, and td elements:

Example

table, th, td
{
border: 1px solid black;
}

Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders.

To display a single border for the table, use the border-collapse property.

Other Topics

CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,