Home
Can anyone suggest any good sites or books that will help me learn CSS? Also, how much HTML knowledge do you need? I'm pretty good, but not advanced.
Everything you ever wanted to know about CSS!
Can anyone suggest any good sites or books that will help me learn CSS? Also, how much HTML knowledge do you need? I'm pretty good, but not advanced.
Setting Up the HTML Code The HTML code for this css tutorial contains three paragraphs of text as shown below. The contents of these paragraphs are wrapped inside <font> elements. The first paragraph has been set to a larger font size. It has also been colored red and style bold and italic. <p align="center"> <font size="4" color="#990000" face="times, times new roman"> <b><i>Example of Text Style with CSS</i></b> </font> </p><p> <font size="2" face="arial, helvetica"> Here is another paragraph using inline css </font> </p> <p> <font size="2" face="arial, helvetica"> Here is third paragraph using inline css </font> </p> <p> <font size="2" face="arial, helvetica"> inline css can be fun Read More...
Padding can be applied to the outside edges of the content are of any block level or inline element. Padding creates the space between the edge of the element and its content. Like margins, padding can be applied to individual sides of a box: p {padding: 10px;} h1{padding-top: 0px;} h2{padding-right: 0px;} h3{padding-left: 0px;} h4{padding-bottom: 0px;} Padding can also be applied using a single shorthand property Read More...
CSS 3.0 has a great new features called RGBa. You can now make a transparent background, transparent text, or just about anything else transparent with RGBa. .myClass { background-color:rgba(255,255,255,0.5) } The above tag will color your area with a white background that is 50% transparent. The only issue with RGBa at this time is that IE doesn't support it Read More...
When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px. Margins can be applied to the outside of any block level or inline element Read More...
The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. p { width: 100pt ;} p { width: 20pc;} p { width: 300px;} p { width: 40em;} p { width: 50ex;} p { width: 600mm;} p { width: 8in;} p { width: 50%;} The color property can be used to style the text color Read More...
The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. p {border-top: 1px solid red} p {border-right: 2px solid blue} p {border-bottom: 1px solid red} p {border-top: 2px solid black} h1 {border: 1px solid black}
Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content. Like margins, padding can be applied to individual sides of a box. p {padding: 10px} h1 {padding-top:0px} h2 {padding-right:5px} h2 {padding-bottom:7px} h3 {padding-left:10px} Padding can alse be applied using a single shorthand property Read More...
The background-color property sets the background color of an element. The backgound-image property applies a background image to an element, which will appear on top of any background-color. body { background-color:#000 } h1 { background-image:url(header.png); }
