CSS Background Code

The following CSS background codes demonstrate the various CSS properties you can use to style the background of any HTML element.

CSS Background Color



<p style="background-color:yellow;">This text has a background color applied.</p>

This results in:
This text has a background color applied.

CSS Background Image


<p style="height:100px;background-image:url(/pix/smile.gif);">This text has a background image applied. </p>

This results in:
This text has a background image applied.

CSS Background Repeat

Determines whether the background image repeats (tiles) or not. For info on the possible values, see the background-repeat page.


<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;">This background image does not repeat. </p>
This results in:
This background image does not repeat.

CSS Background Position


Determines the position of the background image.

<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;background-position:100px;">This background image is positioned 100 pixels in from the left. </p>
This results in:
This background image is positioned 100 pixels in from the left.


CSS Background Attachment

Determines whether or not the background image scrolls with the outer container.

<p style="height:100px;width:150px;overflow:scroll;background-image:url(/pix/smile.gif);background-attachment:fixed;">This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box. </p>
This results in:

This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box.

Shorthand Code

You can use the background property to set all the background properties at once. For example:


<p style="height:100px;width:150px;overflow:scroll;background:url(/pix/smile.gif) repeat fixed;">This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element. </p>

This results in:
This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element.





Facebook
Google
Twitter
0
اكمل القرائه
Samy Mustufa

CSS Text

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.
In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color




<p style="color:olive;">This CSS text color is olive</p>
This results in:
This CSS text color is olive

CSS Text Align




<p style="text-align:right;">This CSS text is aligned right</p>
This results in:
This CSS text is aligned right

CSS Text Indent

Indents the first line of the paragraph.

<p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>
This results in:
This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!


CSS Letter Spacing



<p style="letter-spacing:5px;">This text has letter spacing applied</p>
This results in:

This text has letter spacing applied

CSS Word Spacing



<p style="word-spacing:50px;">This text has word spacing applied</p>
This results in:

This text has word spacing applied

CSS Text Decoration



<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>

<p style="text-decoration:underline;">This text has a line underneath</p>
<a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >
This hyperlink has no underline</a>
<p style="text-decoration:blink;">This text is blinking</p>
This results in:

This text has a line over the top
This text has a line through the middle
This text has a line underneath
This hyperlink has no underline
This text is blinking

CSS Text Transform




<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been capitalized.</p>
This results in:

This text has been transformed to uppercase
THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE
this text has been capitalized.


CSS Text Direction


<p style="direction:rtl;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>

This results in:
This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS unicode-bidi

Use this in conjunction with the direction property to determine the direction of the text. Possible values: normal, embed, bidi-override, and inherit.


<p style="direction:rtl;unicode-bidi:bidi-override;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>
This results in:
This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS Text Shadow


<p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>
This results in:
If your browser supports the CSS text-shadow property, this text will have a shadow.


CSS White Space

Tells the browser how to handle white space. Possible values: normal, pre, and nowrap.


<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>

This results in:
This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.




Facebook
Google
Twitter
0
اكمل القرائه
Samy Mustufa

referral banners



1st banner 728×90




 



2nd
banner 468
×
60




 



1st banner 120
×
120




 




  •  



  • Facebook
    Google
    Twitter
    0
    اكمل القرائه
    Samy Mustufa

    CSS Font

    CSS font properties enable you to change the look of your text. For example, you can assign a font family, apply bold or italic formatting, change the size and more.

    CSS Font Family


    <p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

    This results in:
    This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).

    CSS Font Size

    Enables you to set the size of the text. For info on the possible values, see the CSS font-size page.


    <p style="font-size:20px;">This text is using a font size of 20 pixels.</p>
    This results in:
    This text is using a font size of 20 pixels.

    CSS Font Size Adjust


    This property enables you to adjust the x-height to make fonts more legible. For more info, see the font-size-adjust page.

    <p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p>
    This results in:

    This text is using a font-size-adjust value.

    CSS Font Stretch

    This property relies on the user's computer to have an expanded or condensed version of the font being used. For all possible values, see the font-stretch page.

    <p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p>

    This results in:
    If your computer has an expanded version of the font being used, this text will be stretched.

    CSS Font Style


    <p style="font-style:italic;">This text is in italics.</p>

    This results in:
    This text is in italics.

    CSS Font Variant

    Enables you to set your text to use small caps.

    <p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>

    This results in:
    This Text Is Using Small Caps.

    CSS Font Weight

    Enables you to set your text to bold.

    <p style="font-weight:bold;">This text is bold.</p>

    This results in:
    This text is bold.

    CSS Font Property

    The font property is a shorthand property that enables you to set all font properties in one go.


    <p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p>
    This results in:
    The styles for this text has been specified with the 'font' shorthand property.



    Facebook
    Google
    Twitter
    0
    اكمل القرائه
    Samy Mustufa

    CSS ID Syntax

    IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style that can only be used by the element you assign the ID to.

    CSS ID Syntax

    The syntax for declaring a CSS ID is the same as for classes - except that instead of using a dot, you use a hash (#).

    #id-name { property:value; }
    
    Again, similar to classes, if you want to use the same id name for multiple elements, but each with a different style, you can prefix the hash with the HTML element name.

    html-element-name#id-name { property:value; }
    

    CSS ID Example


    <head>
    <style type="text/css">
    h1#css-section { color:#000099 }
    p#css-section { color:#999999; }
    </style>
    </head>
    <body>
    <h1 id="css-section">CSS ID</h1>
    <p id="css-section">CSS IDs can be very useful</p>
    </body>
    
    This results in:

    CSS ID

    CSS IDs can be very useful

    IDs vs Classes

    Given classes and IDs are very similar, you may be wondering which one to use. This depends on the situation.

    When to use classes

    You should use classes when your style needs to be applied multiple times on the same page. For example, you might have many h1 elements that need the same style applied.

    When to use IDs

    You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a div tag which contains your left menu. The styles for this ID could contain the position, background-color, float properties, size etc. You probably wouldn't want any other element on the page to use this particular style.
    Another useful thing about IDs is that you can use the Document Object Model (DOM) to refer to them. This enables you to use JavaScript/DHTML techniques to build a much more interactive web site.

    Facebook
    Google
    Twitter
    0
    اكمل القرائه
    Samy Mustufa

    المتابعون

    اخر التعليقات

    اصدقاء المدونه على الفيس بوك