根据句意和首字母的提示填写单词fill in this f____,then you can join the football club.tell me the t____,then i can help you find the reason.try your best to do things well,but don't expect to p____ everyonee-mail english is used to show the emotion you are f____
想南和巧86
form填表trouble麻烦persuade说服feeling感觉
为您推荐：
其他类似问题
formthingpleasefeelings
扫描下载二维码CSS Tutorial For Newbies and Everybody Else
Before You Begin
Whenever you are doing something new, I assume you know the following:
How to make a simple web page
Have access to at least a plain text editor like NotePad or other plain text editor
Have patience if you are a newbie. Have even more patience if you are an expert
With that said, I want to tell you, YES! There are plenty of editors out there to help you along, but before you can learn anything, you need to know how to hand code first. The reason why I say this is because if you rely on programs to generate code for you, it will not do you any good if you are forced to work in a non-WYSIWYG environment. Also it will be very difficult to undo bad habits. If you want to use editors to make coding easier later on, there is nothing to stop you. Aids do not make you any more l33t than somebody who does not. What's important is what')
At the end of this tutorial, I will list some of the tools to speed things up for you.
What in the world is CSS, and where can I learn more?
CSS means Cascading Style Sheets and is the growing standard for its expandability, ease of coding, functionality, and customization. Editing a single line of CSS code can make the look of a whole web page different. CSS can be used in text formatting, form elements, alignment, DHTML, tables, and the list goes on and on. Also, since CSS is starting to be supported in just about every browser except for the older or plain text browsers. However, CSS is far from perfect, and not all CSS elements are supported, have partial support, or is buggy altogether. So I took the liberty of finding a compatabilty list for browsers out there so you do not have to see what works in what browser.
Windows/Mac CSS1 compatibility list by Eric A. Meyer: /style/css1/charts/mastergrid.shtml
Windows/Mac CSS2 compatability list by Eric A. Meyer: /style/css2/charts/selectors.shtml
*NIX CSS list by Eric A.Meyer: /browsers/browsers.shtml
Also, you might wanna check out Eric A, Meyer's site: /eric/ and is a wealth of info!
Furthermore, the standardizations, structures, rules and official documentation for CSS can be found in a number of places, and the greatest can always be found on WDG's site:
/reference/css/. Now with this out of the way, let us move on
to the good stuff!
What does CSS look like?
CSS looks KIND OF Java-Scriptish, but without all the functions, etc. There are many ways to implement style sheets, and here is the basic structure of a style sheet
.class attribute something
/*comments*/
property:something,something,
and if it looks simple, it really is! Changes to whole web sites can be changed with the tweaking of a few lines in the CSS code as long as the CSS is called from somewhere. In fact, instead of going through all the theory, let us look at a practical example you can follow along with. For me, the best way to learn was to see other code in action that works!
Your first style sheet in a sample web site
Let us make a sample web page without CSS code and the HTML looks like this:
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&My Boring Web Page&/title&
&div align="center"&
&&p&This is a sample web page. Kinda boring, huh?&/p&
&&p&&a href="#"&Link 1&/a&&br&
&&a href="#"&Link2 &/a&&/p&
now you see we have some text and a few links. Let's jazz it up with a style sheet! In this example, let us change the background color, the scrollbar, the header text, and the links to some crazy colors and behaviors. Do not worry if the colors and the behaviors loo it's not really that important now. What's important is you see the radical difference CSS can do!
Now how do you do this? In several ways. In this example, I will bold the differences for you
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Better Webpage&/title&
&!--Begin Stylesheet example--&
&STYLE type=text/css&
COLOR: red /*The color of the link*/
A:visited {
COLOR: #800080 /*The color of the visited link*/
COLOR: green /*The color of the mouseover or 'hover' link*/
FONT-SIZE: LARGE; FONT-FAMILY: Verdana,Arial,Helvetica /*Properties of items inside of a table*/
BODY /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: X-SMALL; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
&!--End Stylesheet example--&
&div align="center"&
&&table width="45%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td&&div align="center"&This Is A Little Better, But Annoying!&/div&&/td&
&&p&TEXT FOR BODY&/p&
&&p&&a href="#"&Link 1&/a&&br&
&&&&a href="#"&Link2 &/a&&/p&
That is one way to do it, and a very popular way to do it at that. Please note this CSS code affects everything, and not selected items (we will cover that later when dealing with classes). However, it is quick and easy to make changes. Another way to do the same exact thing is to do CSS in a separate file. This reduces the size of the HTML file, and makes your HTML code "cleaner," but that is always a subject to debate. Either way, to achieve this, simply open a plain text editor and enter the code
/*This is my stylesheet!*/
COLOR: red
A:visited {
COLOR: #800080
COLOR: green
FONT-SIZE: LARGE; FONT-FAMILY: Verdana,Arial,Helvetica
scrollbar-base-color:
scrollbar-arrow-color:
scrollbar-DarkShadow-Color:
FONT-SIZE: X-SMALL; FONT-FAMILY: Verdana,Arial,Helvetica
now save it as sample.css (and make sure you save it as sample.css and NOT sample.txt.css! To avoid this, simply let Explorer see all extensions. Don't worry about *NIX machines on this...) Next, the HTML changes to
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Better Webpage&/title&
&--! This makes things easier to read!! Notice the LINK pointing to a URL, the type of file, and what it's relative to.--&
&LINK href="sample.css" type=text/css rel=stylesheet&
&div align="center"&
&&table width="45%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td&&div align="center"&This Is A Little Better, But Annoying!&/div&&/td&
&&p&TEXT FOR BODY&/p&
&&p&&a href="#"&Link 1&/a&&br&
&&&&a href="#"&Link2 &/a&&/p&
Congratulations!! You have made your very first stylesheet! If you have done this before and find this boring, skip over it or better yet, remember you were a newbie once too! Now that you have a basic idea on what stylesheets do, now let us recap what we have learned so far:
CSS means Cascading Style Sheets and is a great way to format and make web sites attractive without the need of cumbersome, slow code such as JavaScript.
CSS code is easily deployed and coded, and has many uses.
There is more than one way to implement CSS in your HTML such as in the HTML itself or form a CSS file itself
There is a big difference in the way pages look with CSS than without.
Making your second style sheet and form elements
Now, let us make your second stylesheet, only this time, we will make it a little more complex and let's add some form elements. When doing forms, it can be boring,
and users want to look at something that matches the overall theme of your site. Also, the next question might be, HOW in the world can I apply a style to certain elements of my page without having everything affected? We will answer that in the form of a CLASS and within HTML tags within the &BODY&&/BODY& tags and not the
tags. With that said, let us get some code!
Let's see some code with some form elements
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Webpage With Forms&/title&
&!--Begin Stylesheet example--&
&STYLE type=text/css&
COLOR: red /*The color of the link*/
A:visited {
COLOR: #800080 /*The color of the visited link*/
COLOR: green /*The color of the mouseover or 'hover' link*/
FONT-SIZE: LARGE; FONT-FAMILY: Verdana,Arial,Helvetica /*Properties of items inside of a table*/
BODY /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: X-SMALL; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
SELECT { /*This is the declaration for a section field*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 10
COLOR: #FFFFFF;
BACKGROUND-COLOR:
TEXTAREA{ /*Text areas can be changed here*/
FONT-SIZE: 12
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
COLOR: #FFFFFF;
BACKGROUND-COLOR:
BUTTON { /*The same goes for the button*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 9
COLOR: #FFFFFF;
BACKGROUND-COLOR: GREEN;
INPUT { /*You get the idea...*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 9
COLOR: #FFFFFF;
BACKGROUND-COLOR:
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 10
COLOR: #FFFFFF;
BACKGROUND-COLOR:
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 10
COLOR: #FFFFFF;
BACKGROUND-COLOR:
&!--End Stylesheet example--&
&div align="center"&
&&table width="100%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td&&div align="center"&WELCOME TO MY WEB SITE!&/div&&/td&
&&table width="100%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td&&div align="center"&&a href="#"&LINK 1&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 2&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 3&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 4&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 5&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 6&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 7&/a&&/div&&/td&
&&&&&&td&&div align="center"&&a href="#"&LINK 8&/a&&/div&&/td&
&&form name="form1" method="post" action=""&
&&&&table width="49%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&&&td&&div align="center"&Some Form Elements&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center"&
&&&&&&&&&&&&select name="select"&
&&&&&&&&&&&&&&option selected&AntiOnline&/option&
&&&&&&&&&&&&&&option&ScriptKiddies&/option&
&&&&&&&&&&&&&&option&l33t Cowboys&/option&
&&&&&&&&&&&&&&option&JP Rules&/option&
&&&&&&&&&&&&&&option&alldas.de&/option&
&&&&&&&&&&&&/select&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center"&
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 1
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 2
&&&&&&&&&&&&input type="checkbox" name="checkbox" value="checkbox"&
&&&&&&&&&&&Check 1
&&&&&&&&&&&&input type="checkbox" name="checkbox2" value="checkbox"&
&&&&&&&&&&&Check2&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center"&
&&&&&&&&&&&&textarea name="textarea" cols="20" rows="10"&Here is some text inside of the
form that is mutli-lined.
Hello, World!&/textarea&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center"&
&&&&&&&&&&&&input type="submit" name="Submit" value="Push Me!"&
&&&&&&&&&&&&input type="submit" name="Submit2" value="Submit Now!"&
&&&&&&&&&&&&input type="submit" name="Submit3" value="Process The Order!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center"&
&&&&&&&&&&&&input name="textfield" type="text" value="enter a field value!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&/table&
&&p&This is some body text that can be changed, and this web page example does
And guess what you see? A form and elements within your web page looking pretty darn loud! Here's an exercise for you. Fix the elements within the CSS code to make it look better or, employ some of the code within your own practice code so you can get practice. Remember, nothing beats practice. Now, the same thing applies to calling a separate CSS document. And this can be applied (without all the code, and the
tags remaining intact for space consideration. If you are still confused, please re-read the other sections of this tutorial).
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Webpage With Forms&/title&
&--! This makes things easier to read!! Notice the LINK pointing to a URL, the type of file, and what it's relative to.--&
&LINK href="sample2css" type=text/css rel=stylesheet&
With all the elements of the page within a separate CSS document. Easy and neat, isn't it? And to tell you the truth, it is not hard to code at all! Okay, now let us look at another important aspect of CSS, and that is the idea of a CLASS.
The idea of a CLASS
Classes in CSS do many things. It does not make coding any easier (it can get even more complex), but it makes your pages and different elements within your web site able to be more flexible and lets you pick and choose what get affected by your CSS code, and you are in more control is what we all want in the first place. Now, with this is mind, we want to know how we implement such a class, or a collection of classes within a CSS document. Let us look at an example with some of the other examples we have been using thus far for ease of understanding. We will point out a few things along the way.
Let us start with the page with the form elements on it. Also, remember, the CSS can always be called from a separate file if it does got *too* out of hand. In this case, this will get out of hand for educational purposes.
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Webpage With Forms&/title&
&!--Begin Stylesheet example classes are in teal--&
&STYLE type=text/css&
/*We will use this block to represent some links on the bottom of the page*/
.Link1 A:link {
COLOR: /*The color of the link*/
.Link1 A:visited {
COLOR: /*The color of the visited link*/
.Link1 A:hover {
COLOR: /*The color of the mouseover or 'hover' link*/
/*end block*/
/*We will use this block to represent the rest of the links on the bottom of the page*/
.Link2 A:link {
COLOR: /*The color of the link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: NONE;
.Link2 A:visited {
COLOR: /*The color of the visited link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: NONE;
.Link2 A:hover {
COLOR: /*The color of the mouseover or 'hover' link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: UNDERLINE;
/*end block*/
/*This block will control aspects and behaviors within a table. Notice there are other classes being combined here. Try a few*/
/*more yourself and see what you come up with!*/
.TopMargin {
background-color:
border-color: #8080FF;
border-style:
font-family: Verdana, Arial, H
.TopMargin TD .Link2 {
border-color:
border-width: 1
border-style:
font-family: Verdana, Arial, H
font-size: 10
/*end block*/
/*I will include a couple of BODY classes to demonstrate how easy it is to change one style to another.*/
.ExampleBody1 BODY, HTML /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: X-SMALL; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
/*end block*/
/*begin second body block*/
.ExampleBody2 BODY, HTML /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: LARGE; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
/*end block*/
/*this is the first block for the form element*/
.Selection1 SELECT { /*This is the declaration for a section field*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 10
COLOR: #FFFFFF;
BACKGROUND-COLOR:
.TextArea1 TEXTAREA{ /*Text areas can be changed here*/
FONT-SIZE: 12
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
COLOR: #FFFFFF;
BACKGROUND-COLOR:
.Input1 INPUT { /*You get the idea...*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 9
COLOR: #FFFFFF;
BACKGROUND-COLOR:
/*end block*/
/*this is the second block for the form element*/
.Selection2 SELECT { /*This is the declaration for a section field*/
FONT-FAMILY: Courier New, Courier,
FONT-SIZE: 14
COLOR: #000000;
BACKGROUND-COLOR:
.TextArea2 TEXTAREA{ /*Text areas can be changed here*/
FONT-SIZE: 12
FONT-FAMILY: Courier New, Courier,
COLOR: #000000;
BACKGROUND-COLOR:
.Input2 INPUT { /*You get the idea...*/
FONT-FAMILY: Courier New, Courier,
FONT-SIZE: 20
COLOR: #FFFFFF;
BACKGROUND-COLOR: BLACK;
/*end block*/
&!--End Stylesheet example--&
Now all the code is written, let us put the CSS to good use in the HTML code itself. Remember, when using a class, you need to call it from the CSS document before it can be seen. The code
&!--classes are shown in TEAL--&
&div align="center" class="ExampleBody1"&
&&table width="100%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td class="TopMargin"&&div align="center"&WELCOME TO MY WEB SITE!&/div&&/td&
&&table width="100%" border="0" cellspacing="1" cellpadding="0" CLASS="TopMargin"&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#"&LINK 1&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#"&LINK 2&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#"&LINK 3&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#"&LINK 4&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#"&LINK 5&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#" CLASS="Link1"&LINK 6&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#" CLASS="Link1"&LINK 7&/a&&/div&&/td&
&&&&&&td CLASS="Link2"&&div align="center"&&a href="#" CLASS="Link1"&LINK 8&/a&&/div&&/td&
&&form name="form1" method="post" action=""&
&&&&table width="49%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&&&td CLASS="TopMargin"&&div align="center"&Some Form Elements&/div&&/td&
&&&&&&/tr&
&&&&&&&&td &&div align="center" class="Selection1"&
&&&&&&&&&&&&select name="select"&
&&&&&&&&&&&&&&option selected&AntiOnline&/option&
&&&&&&&&&&&&&&option&ScriptKiddies&/option&
&&&&&&&&&&&&&&option&l33t Cowboys&/option&
&&&&&&&&&&&&&&option&JP Rules&/option&
&&&&&&&&&&&&&&option&alldas.de&/option&
&&&&&&&&&&&&/select&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" class="Input2"&
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 1
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 2&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" class="Input1"&
&&&&&&&&&&&&input type="checkbox" name="checkbox" value="checkbox"&
&&&&&&&&&&&Check 1
&&&&&&&&&&&&input type="checkbox" name="checkbox2" value="checkbox"&
&&&&&&&&&&&Check2&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" class="TextArea2"&
&&&&&&&&&&&&textarea name="textarea" cols="20" rows="10" CLASS="TextArea2"&Here is some text inside of the
form that is mutli-lined.
Hello, World!&/textarea&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" class="Input1"&
&&&&&&&&&&&&input type="submit" name="Submit" value="Push Me!"&
&&&&&&&&&&&&input type="submit" name="Submit2" value="Submit Now!"&
&&&&&&&&&&&&input type="submit" name="Submit3" value="Process The Order!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td CLASS="TopMargin"&&div align="center" class="Input1"&
&&&&&&&&&&&&input name="textfield" type="text" value="enter a field value!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&/table&
&&p class="Link2"&This is some body text with classes. &a href="#"&Link#1&/a&
&&p class="Link1"&&a href="#"&Link #2&/a&&/p&
shows the versatility of CSS when classes are used. The above example used exclusively in classes and looks pretty "good" to me. Next, you might wanna know, okay, is there a limit to how many class elements you can have? No, not from what I have seen. From the above example, you can just imagine how many combinations and ways you can change things around by changing the name of the class or the elements within the block delimiters itself. Next, there is a similar method called the ID...
Using the same example used above, let us start with the ID. Unlike the class, the ID can be utilized by different tags. The code
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&A Webpage With Forms&/title&
&!--Begin Stylesheet example ID's are in teal--&
&STYLE type=text/css&
/*We will use this block to represent some links on the bottom of the page*/
#Link1 A:link {
COLOR: /*The color of the link*/
#Link1 A:visited {
COLOR: /*The color of the visited link*/
#Link1 A:hover {
COLOR: /*The color of the mouseover or 'hover' link*/
/*end block*/
/*We will use this block to represent the rest of the links on the bottom of the page*/
#Link2 A:link {
COLOR: /*The color of the link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: NONE;
#Link2 A:visited {
COLOR: /*The color of the visited link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: NONE;
#Link2 A:hover {
COLOR: /*The color of the mouseover or 'hover' link*/
font-family: Verdana, Arial, H
font-size: 10
TEXT-DECORATION: UNDERLINE;
/*end block*/
/*This block will control aspects and behaviors within a table. Notice there are other classes being combined here. Try a few*/
/*more yourself and see what you come up with!*/
#TopMargin {
background-color:
border-color: #8080FF;
border-style:
font-family: Verdana, Arial, H
#TopMargin TD .Link2 {
border-color:
border-width: 1
border-style:
font-family: Verdana, Arial, H
font-size: 10
/*end block*/
/*I will include a couple of BODY classes to demonstrate how easy it is to change one style to another.*/
#ExampleBody1 BODY, HTML /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: X-SMALL; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
/*end block*/
/*begin second body block*/
#ExampleBody2 BODY, HTML /*Everything within the BODY tags*/
scrollbar-base-color: /*Scrollbar color*/
scrollbar-arrow-color: /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: /*Scrollbar shadow color*/
FONT-SIZE: LARGE; FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
/*end block*/
/*this is the first block for the form element*/
#Selection1 SELECT { /*This is the declaration for a section field*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 10
COLOR: #FFFFFF;
BACKGROUND-COLOR:
#TextArea1 TEXTAREA{ /*Text areas can be changed here*/
FONT-SIZE: 12
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
COLOR: #FFFFFF;
BACKGROUND-COLOR:
#Input1 INPUT { /*You get the idea...*/
FONT-FAMILY: Verdana,Arial,Helvetica,sans-
FONT-SIZE: 9
COLOR: #FFFFFF;
BACKGROUND-COLOR:
/*end block*/
/*this is the second block for the form element*/
#Selection2 SELECT { /*This is the declaration for a section field*/
FONT-FAMILY: Courier New, Courier,
FONT-SIZE: 14
COLOR: #000000;
BACKGROUND-COLOR:
#TextArea2 TEXTAREA{ /*Text areas can be changed here*/
FONT-SIZE: 12
FONT-FAMILY: Courier New, Courier,
COLOR: #000000;
BACKGROUND-COLOR:
#Input2 INPUT { /*You get the idea...*/
FONT-FAMILY: Courier New, Courier,
FONT-SIZE: 20
COLOR: #FFFFFF;
BACKGROUND-COLOR: BLACK;
/*end block*/
&!--End Stylesheet example--&
shows the ID's and what they look like. Now, the difference in the HTML is no different, but this time, it uses ID instead of CLASS as the code shows the difference when we do indeed apply the ID's. As usual, if the CSS does get too large, you can always call it from a separate file.
&!--ID's are highlighted in blue--&
&div align="center" ID="ExampleBody1"&
&&table width="100%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&td ID="TopMargin"&&div align="center"&WELCOME TO MY WEB SITE!&/div&&/td&
&&table width="100%" border="0" cellspacing="1" cellpadding="0" ID="TopMargin"&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 1&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 2&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 3&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 4&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 5&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 6&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 7&/a&&/div&&/td&
&&&&&&td ID="Link2"&&div align="center"&&a href="#"&LINK 8&/a&&/div&&/td&
&&form name="form1" method="post" action=""&
&&&&table width="49%" border="0" cellspacing="1" cellpadding="0"&
&&&&&&&&td ID="TopMargin"&&div align="center"&Some Form Elements&/div&&/td&
&&&&&&/tr&
&&&&&&&&td &&div align="center" ID="Selection1"&
&&&&&&&&&&&&select name="select"&
&&&&&&&&&&&&&&option selected&AntiOnline&/option&
&&&&&&&&&&&&&&option&ScriptKiddies&/option&
&&&&&&&&&&&&&&option&l33t Cowboys&/option&
&&&&&&&&&&&&&&option&JP Rules&/option&
&&&&&&&&&&&&&&option&alldas.de&/option&
&&&&&&&&&&&&/select&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" ID="Input2"&
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 1
&&&&&&&&&&&&input type="radio" name="radiobutton" value="radiobutton"&
&&&&&&&&&&&Radio 2&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" ID="Input1"&
&&&&&&&&&&&&input type="checkbox" name="checkbox" value="checkbox"&
&&&&&&&&&&&Check 1
&&&&&&&&&&&&input type="checkbox" name="checkbox2" value="checkbox"&
&&&&&&&&&&&Check2&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" ID="TextArea2"&
&&&&&&&&&&&&textarea name="textarea" cols="20" rows="10"&Here is some text inside of the
form that is mutli-lined.
Hello, World!&/textarea&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td&&div align="center" ID="Input1"&
&&&&&&&&&&&&input type="submit" name="Submit" value="Push Me!"&
&&&&&&&&&&&&input type="submit" name="Submit2" value="Submit Now!"&
&&&&&&&&&&&&input type="submit" name="Submit3" value="Process The Order!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&&&&&td ID="TopMargin"&&div align="center" ID="Input1"&
&&&&&&&&&&&&input name="textfield" type="text" value="enter a field value!"&
&&&&&&&&&&/div&&/td&
&&&&&&/tr&
&&&&/table&
&&p ID="Link2"&This is some body text with classes. &a href="#"&Link#1&/a&
&&p ID="Link1"&&a href="#"&Link #2&/a&&/p&
Can CSS be used without the aid of a separate document or in the &HEAD&&/HEAD& tags?
Yes, they can. If you only need to change one or a few elements, then it would be kind of pointless to change everything within the whole HTML document. In fact, if you weren't going to use a CLASS or ID, then if you did place it in the
tags or call it from a separate file, then every element (such as FONT{something:something}) would be affected. To get around this, let us look at another example, but this time, let us use the very first example we used in this tutorial.
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&My Boring Web Page&/title&
&body style="BACKGROUND: GREEN"&
&div align="center"&
&&p&This is a sample web page. Kinda boring, huh?&/p&
&&p&&a href="#" STYLE="color: green"&Link 1&/a&&br&
&&a href="#" STYLE="color: blue"&Link2 &/a&&/p&
and changes the elements within your pages (looks nasty as crap) without the need for the other methods. Easy, isn't it?
OK, I got it. Now what are some guidelines?
Like everything else in this life, it is all subjective and depends on what you are going to do. For instance, if your intended audience was somebody wanting to bank from you, buy stocks or hive their hard-earned money to you, the guidelines may be more stringent than a web site geared towards having fun or something you threw together yourself. With that in mind, there are certain "annoyances" everybody is aware of and is essentially universal for any web page out there. In fact, for some really, really nasty web site design and to know NOT what to do, see
it's great!
Make sure your fonts are clear and readable. This means to not have really gigantic fonts that are dark green on a black background and expect people to understand the message you are trying to say, especially on a professional-like level. In very rare circumstances, without readable fonts, then visitors will go away.
Just like HTML, Java, JavaScript, the same annoyance guidelines still apply to CSS. Loud backgrounds, clashing elements, nasty background graphics, cluttered (or haphazard) formatting, etc. will only discourage visitors from taking you seriously. If you are not serious and want to do this for fun or to make a statement, then fine.
Test, test, test! Whenever you try something new and want to implement something different then you need to test your code in a number of browsers in as many platforms as possible. Remember, CSS is NOT perfect, and not everything that may work for you will work for somebody else. As said in the compatibility chart by Mark A. Meyer, there are many browsers out there and not everything in CSS is supported. Whenever in doubt, refer to that document.
There is nothing wrong with simple. If at all possible, keep your styles as simple as possible and to add to your web page not overwhelm it. This is not the end-all rule, but how many pages have you visited that are so loud or over burdened with crap you, no matter how helpful the content, you just click the "back" button on your browser? Of course, most of us have. In fact, there is nothing wrong with having a plain text version if at all possible as a catch all especially if you sell stuff and depend on it for income.
Get a second opinion. That's why you have friends and AntiOnline, to get constructive criticism (or flames), praise, and feedback to make things better. Because you think it looks good may not good to somebody else. Remember, you cannot please everybody, but you want to make it appealing to as many as possible.
If all else fails, go to .
These guidelines do not apply if you or your intended audience do not care. If you have a site where you want to express yourself and your intended audience does not care, or you do not care, then these guidelines are just that.
Keep your code readable and maintainable by reasonable name conventions. Like other programming languages, the need for useful names are very important in case you need to go back to it later. For instance, the expression
.TopMargin {
background-color:
border-color: #8080FF;
border-style:
font-family: Verdana, Arial, H
tells you something useful. The expression
.CrackWhore {
background-color:
border-color: #8080FF;
border-style:
font-family: Verdana, Arial, H
does not. At the time of coding, you knew what CrackWhore meant, but six months, a year down the road, it's time to dig around the code and see what it does.
Now that I know the basics, where can I go to learn EVEN more?
I put some links together for some wonderful guides and standards being devised for CSS and applications. Here are some!
and that should keep you busy for a while.
Okay, I know what I am doing, and would like to make coding this stuff easier. Are there any programs?
Yes. There are many, many programs proprietary and free that will guide your development is CSS. Here are some you might enjoy!
- cost:FREE
- cost: FREE
- cost: $30
- cost: $399
- cost:$80
- cost:$399
There are many others available, but these are worth a try.
- cost:OpenSource
- cost: OpenSource
- cost: OpenSource
- cost: OpenSource
- cost: OpenSource
And many, many more. These are surely worth a try.
Conclusion
In the end, CSS is not hard to code at all, and just about anybody that has a passion to learn can get this. Even me, who has a hard time coding found CSS very satisfying and rewarding. It seems a single line of code makes a whole lot of difference and that's what anybody hopes for. Yes, this document may have seemed to be a gimme, but hey, there is somebody out there somewhere that wants to know more about CSS.
All in all, I hope you have enjoyed this tutorial, and I hope to add more to this as time goes on. If you do find bugs, want to contribute or whatever, please PM me. Thank you for your time.
Web Development Newsletter Signup
Invalid email
You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date