April 1st, 2010
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...
Tags: color, CSS, css tutorial, font-family, font-size, font-style, font-weight, How To, line-height, text-align, tutorial, Tutorials
Posted in CSS Formatting Text |
2 Comments »
March 27th, 2010
In this CSS Tutorial, you will learn how to apply a background image to the <body> element. You will also learn how to apply the background-repeat and background-position properties. The goal is to create a gradient image that repeats down the right edge of the page.
Setting up the HTML Code
The HTML code for this tutorial will be comprised of three paragraphs of text Read More...
Tags: background-attachment, background-color, background-image, background-image property, background-position, background-repeat, CSS, div, How To, selectors
Posted in CSS Adding Background Images |
No Comments »
February 3rd, 2010
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...
Tags: CSS, How To, padding, Tutorials
Posted in CSS Box Model |
No Comments »
January 22nd, 2010
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...
Tags: background, background-color, background-image, background-image property, CSS, How To, id, RGBa, selectors, transparent, Tutorials
Posted in Uncategorized |
1 Comment »
December 16th, 2009
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...
Tags: box model, CSS, element, How To, margin, margins, short-tag, style, styles, tutorial, Tutorials
Posted in CSS Box Model |
1 Comment »
October 3rd, 2009
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...
Tags: class, color, content, CSS, How To, id, padding, selectors, Tutorials, width
Posted in CSS Box Model |
No Comments »
August 26th, 2009
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}
Tags: borders, CSS, How To, padding, Tutorials
Posted in CSS Box Model |
No Comments »
August 24th, 2009
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...
Tags: class, CSS, div, h1, h2, How To, margin, padding, Tutorials
Posted in CSS Block Quote |
No Comments »
August 23rd, 2009
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);
}
Tags: background, class, CSS, div, h1, h2, How To, image, margin, Tutorials
Posted in CSS Adding Background Images |
No Comments »
August 19th, 2009
Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.
Margins can be applied to individual sides of a box:
p { margin-top: 0;}
p { margin-right: -5px;}
p { margin-bottom: 10px;}
p { margin-left: 5px;}
Margins can also be applied using a single shorthand property Read More...
Tags: CSS, div, How To, margin, margins, style, Tutorials
Posted in CSS Box Model |
No Comments »
Home
