What Is CSS

What is CSS?
CSS is an acronym for Cascading Style Sheets. CSS is used to separate presentation and style from document markup content. It works by targeting your web page elements. CSS can target and style native elements like your body tag or all tags on the page. It can also be made to target specific individual page elements or a group of labeled elements, as long as you give those elements the appropriate class name or identifier. CSS is primarily used in HTML web documents, but can also work for any kind of XML document, allowing you the ability to create XML based data structures that are well organized and styled. As a webmaster and web applications creator I use external CSS files to style my web pages and help me to keep web site maintenance or changes easy. Separating content from style becomes more important the larger your websites become.
Web Site Directory Structure

Directory Structure for Better Organization
We are going to be demonstrating external CSS techniques since it is the ultimate way to work with CSS. Inline CSS methods work for quick stuff, but if you want the best and most organized way to manage a full site, use external styling. Set up your project folder like this for most of the CSS tutorials on this site. This structure is going to be very helpful for staying organized and adding/editing styles as we build on. Since the goal for using external CSS is to make design changes and site management easier, we will want to keep a nice tidy directory structure as we build on.
Tip: We will now add our images into our pages like this. Put your images into their own folder.
<img src="images/my_pic.jpg" alt="My Picture" />
Notice how we reference the images folder and images now --> "images/my_pic.jpg"
3 Ways to Style HTML Tags Using CSS

Before we get too far into learning CSS we should know that there are three ways you can apply CSS styling to your HTML elements and tags.
1. Inline styling using the "style" property of the tag to apply CSS. 2. Place CSS in the <head> tag of the document you want it to affect. 3. Using a separate style sheet(Adam's preference when site making). Adam focuses more on method 3 throughout these lessons. Here are examples of each method: 1. Inline Styling
<p style="color:#F00; fontsize:18px;">Styling tags using inline styling with the <u>style</u> property.</p>
Styling tags using inline styling with the style property.
2. CSS in the <head> tag of the document you want it to affect

<html> <head> <style type="text/css"> .myStyle1{ color:#F00; font-size:18px; } </style> </head> <body> <p class="myStyle1">Styling tags using CSS defined in the document header.</p > </body> </html>
Styling tags using CSS defined in the document header.
3. Using a separate style sheet(Adam's preference when site making) Click here to see the 3rd and most prefered method
CSS TUTORIALS
Getting Started With CSS What is CSS? Web Site Directory Structure 3 Ways to Style HTML Tags Us... Create and Link to CSS Style... Style Classes and IDs CSS Attributes and Values Re... Create Backgrounds for your ... Add Backgrounds to Tables an... CSS Layers and Positioning Customize HTML Link Appearan... Easy Site-wide Changes Using... Strategically Placing Conten... CSS Examples, Tips, Tricks... Pure CSS Drop Down Menu Exam... Opacity Settings For Transpa... CSS z-layer with Opacity Tut...
Create and Link to CSS Style Sheet
By Adam Khoury Jul 14, 2008 28,868 views
Create and Link to CSS Style Sheet

A CSS style sheet is used to add styling to your page elements(tags) in a more organized fashion to help with code clutter. You can make site-wide changes by changing one line of code in your style sheet. In addition, most of our CSS lessons are given assuming that you are using a .css style sheet. It is the smarter way to design. Now on to it......
1. Create a new folder inside of your main project folder (where your index.html file lives). Name this new folder "style".
2.
Fire up your HTML editor and create a new blank file named "main.css"
3.
Save main.css into the new folder you just created named style
4.
Open index.html and add the following line of code inside of your head tag, directly under your title tag is a good spot.
Full Code Example for you to reference where to place the line above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>My Web Page</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> Hello World! </body> </html>
Each web page you have can use the same or different style sheets.
Run a quick test to check CSS style sheet linkage
1. Open your index.html file and place the following code within your <body> tag. Then save the file.
<div class="style1">Hello World!</div>
2. Open main.css and place the following code into it, then save the file.
.style1 { background-color: #00FF00; height:100px; width:100px; }
3. Open index.html using your web browser. If you see Hello World! inside of a bright green 100x100px square, you have successfully linked to your new style sheet! If you do not see the bright green square, you do not have style sheet linkage.
If you happen to fail in the linkage test
1. Be sure that you have saved both files before testing. 2. Check that your directory structure matches this Click Here 3. Make sure that your index.html file looks exactly like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>My Web Page</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="style1">Hello World!</div> </body> </html>
4. Be sure that your main.css looks exactly like this:
.style1 { background-color: #00FF00; height:100px; width:100px; }
And be sure everything is in the appropriate folders.
Style Classes and IDs

Now that we have our main.css style sheet linked to our index.html page we can add code into our HTML tags to have them styled individually or by group from the style sheet. class - Used to group and style page tags. Multiple page tags can have the same class name applied. id - Used to style individual tags on the page. Only one tag on the page can be tied to an id. Here is an example of using the class and id attributes on different kinds of HTML tags to make
all of them have the same style. In the example below we have given the <h2> tag the id attribute to make it behave slightly different from the other tags by applying "mystyle2" from the style sheet to it as well as the class style "mystyle1". index.html <html> <head> <title>My Web Page</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="mystyle1">Here is content in a div tag</div> <hr class="mystyle1" / > <p class="mystyle1">Here is content in a p tag</p> <h2 class="mystyle1" id="mystyle2">Here is content in a H2 tag</h2> <img src="images/my_pic.jpg" class="mystyle1" /> </body> </html> And this is what your style sheet would look like defining mystyle1 and mystyle2. main.css /* We define a class style using a [.] */ .mystyle1 { background-color:#333366; color:#00FFFF; padding: 8px; letter-spacing:.5em; border-width: thick; border-style: solid; border-color: #990000 #0000FF #996600 #009900; } /* We define an ID style using a [#] */ #mystyle2 { width:350px; height:150px;
margin-left:100px; }
You can create as many styles in your style sheet as you like. Use them or not.
You can add the class or id attributes to most HTML tags. Experiment with any tags you want. Below we have given some examples for reference. <div class="mystyle1">Text</div> <p class="mystyle1">Text</p> <table class="mystyle1">Text</table> <hr class="mystyle1" / > <h3 class="mystyle1">Text</h3> <img class="mystyle1" src="images/my_pic.jpg" />
CSS Attributes and Values Reference Guide

Here is the CSS attribute and values reference guide. There are small examples of applying each attribute in the description area for each. Attribute background Description Allows you to Define all the background properties that are listed below this one, all together in one rule. Or you can choose to use the background specific properties below instead and get the same results. And here is how we apply values all together in an attribute: background: url(myBG.jpg) top center fixed repeat-x; That can be done in most styling attributes or properties. backgroundattachment Used for instructing your background image to scroll or be fixed in place when a user scrolls your page. background-attachment: scroll; Values fixed scroll color value percentage url repeat repeat-x repeat-y no-repeat fixed scroll
backgroundcolor backgroundimage backgroundposition
Define the color of the background. background-color: #999999; Define an image to Define as a background on your web page. background-image: url(myBG.jpg); Define the position of your background when using an image. background-position: top center;
color value
URL of Image bottom center left right top repeat repeat-x repeat-y no-repeat thin thick solid double groove dotted dashed inDefine outDefine thin ridge hidden four-sides number color value
backgroundrepeat
Define whether or not your background will render repeat image tiling or not, and in what direction. background-repeat: no-repeat;
border
Define a border and style. border: #060 2px solid;
borderbottom
Define what the bottom border of the HTML element will look like. Each edge of the border can look different if you like. border-bottom:#090 1px solid;
borderbottom-color borderbottom-style
Define what the bottom border color will be for the element. border-bottom-color:#F00; Define what the bottom border style will be for the element. border-bottom-style:dashed;
color value
solid double groove dotted
dashed inDefine outDefine ridge hidden borderbottom-width border-color Define the width of the bottom border. border-bottom-width:2px; Define the color of a border. border-color: #F00; border-left Define the left border of the element. Each edge of the border can look different if you like. border-left: #06C thin groove; border-leftcolor border-leftstyle Define the left border color. border-left-color: #06C; Define the left border style. border-left-style: double; solid double groove dotted dashed inDefine outDefine ridge hidden number color value number color value color value number
border-leftwidth border-right
Define the left border's width. border-left-width: thick; Define the right border of the element. Each edge of the border can look different if you like. border-right: #F90 thick outset;
number color value
border-rightcolor border-right-
Define a color for the right border. border-right-color: #06C; Define the right border style.
color value
solid
style border-right-style: double;
double groove dotted dashed inDefine outDefine ridge hidden number
border-rightwidth border-style
Define the width of the right border. border-right-width: thick; Define a border style. border-style: ridge;
solid double groove dotted dashed inDefine outDefine ridge hidden four-sides number color value color value
border-top
Define a top border. border-top: #960 medium dotted;
border-topcolor border-topstyle
Define a color for the top border. border-top-color: #06C; Define a style for the border top. border-top-style: double;
solid double groove dotted dashed inDefine outDefine ridge hidden number
border-topwidth
Define the width for the top border. border-top-width: thin;
border-width
Define the width for the entire border. border-width: thick;
number
clear
Clear space on the side of an element. Causes any floating elements in that space to display the next line down. clear: left;
left right both none color value
color
Define the color of text. color: #06C;
display
Some HTML elements will take up a block(full display line) by default. But they can be set to inline where needed. And tags that do not block by default can render as a block if you define it for the element's display attribute. The <IMG> and <SPAN> tags are inline by default, while <DIV> and <P> elements display as blocks by default. Try putting two raw <P> tags on the same display line. Not possible unless you set the display value correctly. <p style="display: inline;">Hello</p> <p style="display: inline;"> World</p> Try the example above, then remove the styling and view it. Or change "inline" to "block" and view.
block inline
float
Float an element to the left or right. Other content will wrap around a floated element. float:right;
left right
font-family
Define the font family you want to use in an element. <div style="font-family:Arial, Helvetica, sansserif;">Hello</div>
font-name
font-size
Define font size in an element. font-size:16px;
percentage number italic oblique normal small-caps
font-style
Render font italicized on fonts that support it. font-style: italic;
font-variant
Render small capitals on fonts that support it.
font-variant:small-caps; font-weight Define the thickness of text using values from 100 to 900. 100 is thinnest, and 900 is thickest. font-weight:900; height Define the height of an HTML element. height:340px; letter-spacing Define the value of the space between your letters. letter-spacing:18px; or letter-spacing:2.5em; line-height Defines the vertical space between lines of text in an HTML element. line-height:1.8em; or line-height:24px; or line-height:20%; list-style Define all of the characteristics of HTML list elements in one decleration. list-style:upper-roman inside; circle square disc upperalpha loweralpha upperroman lowerroman decimal inside outside url none url percentage number number number auto weightvalue
list-styleimage
Define an image file in place of the normal list styled bullets. Small images work best.
list-style-image:url(myBullet.gif); list-styleposition Define the placement of your bullets points or numbers within your list items. <ul> <li style="list-style-position:inside;">Hello</li> <li style="list-style-position:outside;">World</li> </ul> list-style-type Define the style for your list items. <ul> <li style="list-style-type: upper-roman;">Hello</li> <li style="list-style-type: upper-roman;">World</li> </ul> circle square disc upperalpha loweralpha upperroman lowerroman decimal percentage number auto inside outside
margin
Define the margin space around the outside of an HTML element. This will set all margins uniformaly to a value if used. Use the attributes below for fine tuning your margins and setting different values for each side. margin:30%;
marginbottom
Define the bottom margin of an HTML element. Margins add space directly around the outside of an HTML element. margin-bottom:40%;
number percentage auto number percentage auto number percentage auto
margin-left
Define the left margin of an HTML element. Margins add space directly outside of an HTML element. margin-left:10px;
margin-right
Define the right margin of an HTML element. Margins add space directly outside of an HTML element. margin-right:50%;
margin-top
Define the top margin of an HTML element. Margins add space directly outside of an HTML element. margin-top:30px;
number percentage auto number percentage four-sides number percentage number percentage number percentage number percentage absolute relative percentage number right center left justify linethrough overline underline none number percentage
padding
Define the padding all around the content inside of an HTML element. padding:8px;
paddingbottom padding-left
Define the bottom padding of an HTML element. padding-bottom:8px; Define the left padding of an HTML element. padding-left:12px;
padding-right
Define the right padding of an HTML element. padding-right:12px;
padding-top
Define the top padding of an HTML element. padding-top:8px;
position
Define the position type of an element and how it relates to other elements around it. Use the Top, Right, Bottom, and Left attributes to define where the object will be placed exactly. position:fixed;
text-align
Define the alignment of text. text-align:center;
textdecoration
Define the text's decoration. Usually used in styling links on a web page. text-decoration:underline;
text-indent
Define Indention for the first line of an element. text-indent:80px;
texttransform vertical-align
Change text from uppercase to lowercase, and capitalize. text-transform:uppercase; Defines the vertical alignment of your element. vertical-align:top;
capitalize lowercase uppercase verticalvalues nowrap
white-space
Prevent your text from wrapping with nowrap. Normally text will automatically break line to the next line down if the words reach a barrirer inside an element. Use this to prevent the auto-wrap. Usually results in a horizontal slider appearing unless you set the overflow attribute to the "hidden" value. white-space:nowrap;
width
Define the width of an element. width:100%; or width:800px;
number percentage auto
word-spacing
Define the value of the space between words in your text. You can define a negative value in this attribute. It may not render visually in your HTML editor, but the browser software will render it, not to worry. word-spacing:48px;
number
z-index
Define the z-index of an HTML element. Used in layering elements, or stacking elements. The element with the lowest zindex would be on the bottom of the stack(layers). z-index:5;
wholenumber
Create Backgrounds for your HTML Pages

These examples assume you have saved your custom background image into the style folder where your main.css file lives.
Copy+Paste code for each example will be on the page when it opens.
Fast Loading Strips and Tiles
Example 1 - Centered Image Strip that repeats vertically Example 2 - Image Strip that repeats horizontally Example 3 - Repeating Tiles The page you are on now has a horizontally repeating Strip (22px wide and 905px high)
Slow Loading (full image) Backgrounds
Take slightly longer to load but can be more fun and creative! Example 1 - Centered custom large image background
Add Backgrounds to Tables and Divs with CSS

Using CSS we can set custom images as backgrounds for most any HTML element like a <table>, <div>, <p> etc... 1. Create a custom image of any size. 2. Save it as divBG.jpg into your style folder. 3. Use the following HTML and CSS (save both files before testing it) First the HTML code that should go in your HTML file:
<div class="mydiv"> <h5>The beauty of this is that you can type <br /><br /> HTML text into your table after you stick <br /><br /> your nifty custom background image in it.</h5> </div>
Now the CSS to put in main.css style sheet: (set width and height to match image)
.mydiv { background-image:url(divBG.jpg); width:380px; height:258px; border: #666666; border-style:solid; padding-left:12px; } Be sure to set your width and height to match the dimensions of your image. Else it will autorepeat unless you tell it not to using another CSS property. You can use this method to dress up most any HTML element(tag). Use it for tables, paragraphs, list items, headings and much more.
CSS Layers and Positioning

You can set some of your page elements like tables, divs, text, and images to be layered. Meaning that some can reside on a layer above the rest using z-index. Setting the z-index value of the style will place that element in that layer on your page. We will demonstrate how to take the four colored squares below and layer them using a table as a holder, and means of positioning strategically with other content.
First right click and save each colored square above into your images folder.
HTML Code: <table width="100%" border="3" bgcolor="#FFFFFF"> <tr><td height="110"> <img src="images/layerbox1.jpg" alt="square1" width="100" height="100" class="layer1" /> <img src="images/layerbox2.jpg" alt="square2" width="100" height="100" class="layer2" /> <img src="images/layerbox3.jpg" alt="square3" width="100" height="100" class="layer3" /> <img src="images/layerbox4.jpg" alt="square4" width="100" height="100" class="layer4" /></td> </tr> </table>
CSS which goes in your style sheet: .layer1{ z-index:1; position: relative; left: 0px; bottom: 0px; } .layer2{ z-index:2; position: relative; right: 25px; bottom: 25px; } .layer3{ z-index:3; position: relative; right: 50px; bottom: 50px; } .layer4{ z-index:4; position: relative; right: 75px; bottom: 75px; }
Customize HTML Link Appearance Using CSS (multiple link sets)

Set a universal appearance on all of the links on your website instantly! If you are linked to a style sheet you can change the link appearance on all of your web pages at once using your style sheet to specifically target the <a> tag. Add the following code to your main.css style sheet, save it, then view your links.
a{ font-size: 12px; color: #990000; } a:link { text-decoration: underline; } a:visited { color: #990000; text-decoration: underline; } a:hover { color: #FF0000; font-weight:bold; text-decoration: none; } a:active { color: #990000; text-decoration: underline; } These will style all default links on your pages. You can set any values you like inside of the above definitions, and also add new attributes like resize the text on "hover".
link - allows you to style what the link looks like in its initial regular state. visited - defines what the link looks like after it's been visited.
hover - allows for a hover(mouse over) style to be set. active - defines what it looks like in its active page state.
What if you need a set of links to look different from all others?
Set another set of link definitions inside your main.css file
.linkStyle2 { color: #999; text-decoration: none; } .linkStyle2 a:link { color: #999; text-decoration: none; } .linkStyle2 a:visited { color: #666; text-decoration: none; } .linkStyle2 a:hover { color: #CCC; text-decoration: none; } .linkStyle2 a:active { color: #999; text-decoration: none; }
Then you must give those links that class name in your HTML. You can also give any element containing these links the class name instead of giving each link the class name.
<a href="http://www.developphp.com/" class="linkStyle2"> My Link </a>
Easy Site-wide Changes Using An External CSS File

Using our external CSS style sheet we can easily change design on all of our web pages at once by changing just a few lines of code. Important: Each web page of your website that you want affected must have the style sheet link in its <head> tag. 1. Add the following code to your main.css file and then save it.
/* This automatically affects a page <body> tag without the need for class or id identifier */ body { background-color: #FF9900; margin-top: 5px; } /* This automatically affects all text fonts on the page without the need for class or id identifier */ body,td,th { font-family:Arial, Helvetica, sans-serif; font-size: 12px; } /* This automatically affects all paragraph tags on the page without the need for class or id identifier */ p{ font-size: 12px; } /* This automatically affects all list tags on the page without the need for class or id identifier */ li { font-size: 14px; } 2. View all of your HTML pages with the style sheet link in your browser.
So now we know that we can target native types of tags and batch style them. And we can also use class and id identifiers to target specific tags to style them individually.
Strategically Placing Content Independently

There may be an occasion where you would like a page element or some content to be independently positioned from all of the other content on the HTML page. In the example below I show you how to place a DIV tag with an image inside of it in the top left corner of a page. This method places CSS style attributes in the HTML tag to position it.
<div style="position:absolute;top:0px;left:0px;padding:0px;margin:0px;"> <img src="images/somePicture.jpg" border="0" /> </div> You can change the number values to place it exactly where you need it. "left" can become "right", "top" can become "bottom", and so on. Negative numeric values work. Strategic placement is sometimes the only way to get the design you want on a web page that is HTML based.
Pure CSS Drop Down Menu Example 1

Pure CSS Drop Down Menu - W3C Validated - Works In All Major Browsers With No Browser Hacks. It works by sensing mouse "hover" or "onmouseover" to make a hidden or displaced element come into existence where we assign it to. This example offers two drop down menus but you can have as many as needed in your web site navigation system. You can simply copy and paste this code into a new blank HTML document to expreriment with it. The CSS is magenta and the HTML is blue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pure CSS Drop Down Menu</title> <style type="text/css"> /* -------------------- Main body tag styling ---------------------- */ body,td,th { font-family: Arial, Helvetica, sans-serif; } /* -------------------- What the entire dropdown backround will look like and its positioning --------------------- */ ul { margin:0; padding:0; } .dc{ display:inline; position: relative; z-index: 0; margin:0; padding:0; } .dc:hover{ background-color: transparent; z-index: 50; } .dc ul{ position: absolute; width:120px; background-color: #999; left: -1000px; list-style-type:none; visibility: hidden; } .dc:hover ul{ visibility: visible; top: 16px; left:0px; } /* -------------------- What the list items will look like inside the dropdown ---------------------- */ .dc ul li{ margin:0; padding:0;
background-color: #EBEBEB; margin:1px; } .dc ul li:hover { background-color: #FFF; margin:1px; } /* -------------------- What the links look like inside the dropdown ---------------------- */ .dc ul li a { display:block; padding:4px; font-size:12px; } .dc ul li a:link { color: #333; text-decoration: none; } .dc ul li a:visited { text-decoration: none; color: #000; } .dc ul li a:hover { text-decoration: none; color: #333; } .dc ul li a:active { text-decoration: none; color: #333; } /* END PURE CSS DROP MENU */ </style> </head> <body> <div class="dc"> <a href="#">Drop Menu 1</a> <ul> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li>
</ul> </div> <div class="dc"> <a href="#">Drop Menu 2</a> <ul> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </div> </body> </html>
Opacity Settings For Transparent Web Page Elements (div, p, table,etc..)

In this CSS script we will demonstrate how we can make our web page elements transparent by setting opacity for those elements, and hope that we get it working for all major browsers by adding browser specific attributes and values for setting opacity. I tested it in IE8, Chrome, and Firefox. It working well in those 3 browsers makes me confident today(Nov 7, 2010) to use it in my design arsenal further for a while. TIP: One could use z-index layering in CSS to place a text or photo container element directly on top of a faded transparent element if that webmaster did not want the inner contents of their container to be faded by the opacity. VIDEO TUTORIAL - This code here on page corresponds with the video lesson linked to below: How to Render Transparent Web Site Elements : CSS Opacity Tutorial
<html> <head> <style type="text/css">
<!-body { background-image: url(myBG.jpg); background-position:top left; background-repeat:no-repeat; background-attachment:fixed; margin-top:48px; } #element1 { width:900px; color:#FFF; text-align:left; background-color:#000; border: #F90 1px solid; padding:24px; /* start opacity settings */ filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; /* end opacity settings */ } body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 14px; } --> </style> </head> <body> <div align="center"> <div id="element1"> Put your content for this container here </div> </div> </body> </html> Be sure you have a background file in place for your web page element... then you can place another element inside of it and use this. Or use the method above to use full page background and make elements on the page transparent.
CSS z-layer with Opacity Tutorial For Text That Will Not Fade
Learn how to use the z-index and opacity CSS properties together to achieve content that will not fade inside of a transparent element. We'll simply lay one on top of the other. This will give you #element1 with faded background... with #content1 right inside of it that will not fade, which works in all major browsers of today. This code's Z-index logic is explained in depth in this video tutorial:
CSS z-index Video Tutorial for CSS Opacity Tutorial
<html> <head> <style type="text/css"> <!-body { background-image: url(myBG.jpg); background-position:top left; background-repeat:no-repeat; background-attachment:fixed; margin-top:48px; } body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 14px; } #element1 { position:relative; z-index:1; width:900px; height:240px; text-align:left; background-color:#000; border: #F90 1px solid; /* start opacity settings */ filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; /* end opacity settings */ } #content1 { position:relative; z-index:2; top:-240px; width:840px; color:#FFF; text-align:left; margin:24px; }
--> </style> </head> <body> <div align="center"> <div id="element1"></div> <div id="content1"> <p>Put your content for this container here </p> <p>Put your content for this container here </p> <p>Put your content for this container here </p> </div> </div> </body> </html>

What Is CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is CSS

Uploaded by

Copyright:

Available Formats

What is CSS?

Web Site Directory Structure

<img src="images/my_pic.jpg" alt="My Picture" />

3 Ways to Style HTML Tags Using CSS

Styling tags using inline styling with the style property.

2. CSS in the <head> tag of the document you want it to affect

Styling tags using CSS defined in the document header.

Create and Link to CSS Style Sheet

By Adam Khoury Jul 14, 2008 28,868 views

Create and Link to CSS Style Sheet

<div class="style1">Hello World!</div>

.style1 { background-color: #00FF00; height:100px; width:100px; }

4. Be sure that your main.css looks exactly like this:

.style1 { background-color: #00FF00; height:100px; width:100px; }

And be sure everything is in the appropriate folders.

Style Classes and IDs

CSS Attributes and Values Reference Guide

backgroundcolor backgroundimage backgroundposition

Define a border and style. border: #060 2px solid;

solid double groove dotted

number color value

style border-right-style: double;

double groove dotted dashed inDefine outDefine ridge hidden number

Define a top border. border-top: #960 medium dotted;

Define the width for the top border. border-top-width: thin;

Define the width for the entire border. border-width: thick;

left right both none color value

Define the color of text. color: #06C;

Define font size in an element. font-size:16px;

percentage number italic oblique normal small-caps

Render font italicized on fonts that support it. font-style: italic;

Render small capitals on fonts that support it.

number percentage auto number percentage auto number percentage auto

Define the right padding of an HTML element. padding-right:12px;

Define the top padding of an HTML element. padding-top:8px;

Define the alignment of text. text-align:center;

Define Indention for the first line of an element. text-indent:80px;

capitalize lowercase uppercase verticalvalues nowrap

Define the width of an element. width:100%; or width:800px;

number percentage auto

Create Backgrounds for your HTML Pages

Fast Loading Strips and Tiles

Slow Loading (full image) Backgrounds

Add Backgrounds to Tables and Divs with CSS

CSS Layers and Positioning

Customize HTML Link Appearance Using CSS (multiple link sets)

Set another set of link definitions inside your main.css file

<a href="http://www.developphp.com/" class="linkStyle2"> My Link </a>

Easy Site-wide Changes Using An External CSS File

Strategically Placing Content Independently

Pure CSS Drop Down Menu Example 1

Opacity Settings For Transparent Web Page Elements (div, p, table,etc..)

<html> <head> <style type="text/css">

You might also like