CSS Background

CSS Background
The background of your website is very important, so please spend some time with this tutorial. If you are aiming for a professional website, a good rule of thumb is to use a light background with dark text. However, if you’re just making a website for pleasure, then any kind of color combination is acceptable
The following examples will show you how to implement all of these options.With CSS, you are able to set the background color or image of any CSS element. In addition, you have control over how the background image is displayed. You may choose to have it repeat horizontally, vertically, or in neither direction. You may also choose to have the background remain in a fixed position, or have it scroll as it does normally.
CSS Background Color
As you have seen throughout Tizag Tutorials,many different background colors are present.These varying backgrounds were obtained without using tables! Below are a couple examples of CSS backgrounds.
CSS Code:

h4 { background-color: white; } 
p  { background-color: #1078E1; } 
ul { background-color: rgb( 149, 206, 145); }

In the above example we used three different formats for defining a color: a color name, hexadecimal values
CSS Background Image
Need an image to repeat left-to-right, like the gradient background that appears at the top of Tizag.com? Or maybe you would like to have an image that remains fixed when the user scrolls down your page. This can be done quite easily with CSS and more, including:

  • hoosing if a background will repeat and which directions to repeat in.
  • precision positioning
  • scrolling/static images
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://tutorial.shiksha360.com/wp-content/uploads/2014/09/cropped-shiksha360-logo.jpg); }

CSS Fixed Background Image
You may choose to have your background scroll naturally, or to have it in a fixed position. The default value is fixed, so you only need to worry about this if you would like your body’s background to scroll. Note: This should only be used with backgrounds fixed to the <body>
CSS Code:

body.noScroll { 
	background-image: url(shiksha360.jpg); 
	background-attachment: fixed;
	background-image: url(shiksha360.jpg); 
	background-attachment: scroll;}

CSS Font
CSS gives you great control over the way your text is displayed. You can change the text size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize your font using percentages? Let us begin the lesson with an easy and important font attribute, color!
CSS Font Color
Although the color of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. This could be for many reasons, including the fact that it will be used a great deal, so why make the coder type out “font-color”, when they could just type out “color” instead? Here’s an example of changing the color of your font.
CSS Code:

h4 { color: red; }
h5 { color: #9000A1; } 
h6 { color: rgb(0, 220, 98); } 
In the above example we used three different formats for defining a color: a color name, hexadecimal values, and RGB. Check out the list of supported color names
Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value
CSS Font Family
Font families can be divided into two groups: serif and sans-serif. A sans-serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans-serif fonts are much easier to read on a computer monitor than serif fonts
CSS Code:
h4 { font-family: sans-serif; }
h5 { font-family: serif; } 
h6 { font-family: arial; }

As you probably noticed throughout Tizag.com, we do not use serif fonts, except in special cases, like for the titles of the Code and Display boxes
CSS Font Size
You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value. Note: Some browsers now have a “Zoom” feature, so it will allow users to make your website bigger or smaller and static values will grow larger/smaller as well.
CSS Code:

p { font-size: 120%; } 
ol{ font-size: 10px; } 
ul{ font-size: x-large; }

Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.
CSS Font Style
CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal
CSS Code:

p { font-style: italic; }
h4{ font-style: oblique; }

CSS Font Weight
If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100 (thin)-900 (thick)
CSS Code:

p { font-weight: 100; } 
ul{ font-weight: bolder; }

Available key terms for font-weight: bold, bolder, and normal
CSS Font Variant
CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish
CSS Code:

p { font-variant: small-caps; }

Admin has written 171 articles