Html With Css - a easy look at CSS

Pages: 1, 2
free web hosting

Latest Entry: (Post #13) by clagnol on Apr 3 2005, 04:42 AM. (Line Breaks Removed)
In response to Rogan's question:QUOTE(rogan @ Mar 30 2005, 09:14 AM)i try to create a css in macromedia drm. 2004 but when i strat that i only get a code,and i dont get the design sheet!who is good in macromedia drm. 2004 mx?i need helpThere is a tab labelled "Design" in Dreamweaver MX which keeps track of all of the stylesheet rules for a given page. Right-click on it and s... read more.
Express your Opinion! Contribute Knowledge.

Free Web Hosting, No Ads > CONTRIBUTE > Tutorials

Html With Css - a easy look at CSS

nickmealey
Cascading Stylesheets, or CSS, is a very easy way to spice up your web site. The thing I like about CSS, is it gives you a more extended version for styles. The <font> tag for example is very limited with what it can do. With CSS though, you can do numerous things. from mouseovers (a:hover) to just changing a simple paragraph tag to a fancy one.
there are two ways to incorperate the style sheet. the first one is to just put it inside your page:

CODE

<html>
<head>

<style>

all the stuff would go here
-
</style>


</head>

<body>



</body>
</html>




the second way is to link it to an outside source:

CODE

<html>
<head>

<link rel="stylesheet" type="text/css" href="/css/styles.css">

</head>


</html>




now, in css:

CODE

<style>

p {

color: blue;
font-family: "tahoma";
font-size: 15px;
}

</style>


 

 

 


Reply

googlue
Hi,
This tutorial is very useful for me.
I am using CSS for navigation menu in my site. I use the display: block css code. What are the other options other than block that I can use?
Can you also please elaborate more on different CSS styles?
Thank you
Googlue

Reply

guangdian
Css Make the Difference of All WWW web world.
Before the time I only know Frontpage I dont know CSS then I started to learn PageDesign It then come to a knowledge of css.It's about 1997.

Reply

rogan
QUOTE(googlue @ Mar 15 2005, 04:07 AM)
Hi,
This tutorial is very useful for me.
I am using CSS for navigation menu in my site. I use the display: block css code. What are the other options other than block that I can use?
Can you also please elaborate more on different CSS styles?
Thank you
Googlue
*


[B]If you want more css codes you can download Macroedia Dreamweaver MX 2004. That Program have everything.
Read this:

1*Basic page:
HTML,HTML TEMPLATE,LIBRARY ITEM,ACTION SCRIPT,CSS,JAVA SCRIPT,XML

2*Dynamic Page:ASP java script,ASP VB Script,ASP.NET C#, ASP.NET VB, Cold Fusion, Cold Fusion Component, JSP,PHP

3* Thay maded some exmples which you can chose!

If you cant find program a can give u a adress for downloading

Reply

mizako
Hi,
I do not know if you know about the CSS ZEN GARDEN project. This project really ilustrates what can be made with CSS.

Reply

bjrn
QUOTE(googlue @ Mar 15 2005, 04:07 AM)
I am using CSS for navigation menu in my site. I use the display: block css code. What are the other options other than block that I can use?

The other values for display depend on what element they are defined. For example
CODE
display: list-item
is only available to lists. W3Schools has a list of valid values.

If you want to learn more about CSS, I recommend reading through the W3Schools CSS tutorial. Which should be faster than downloading some software and going through its helpfiles.

Reply

doom145
this is a lame tutorial...tooo basic....any n0b who knows html would know this as its just another link just you change the tage name...LOl...not that hard.,..biggrin.gif

Reply

rogan
i try to create a css in macromedia drm. 2004 but when i strat that i only get a code,and i dont get the design sheet!
who is good in macromedia drm. 2004 mx?
i need help

Reply

Carsten
In addition to your tutorial and to make the markup code more valid, change <style> to
CODE
<style type="text/css">
. Average tutorial, you could explain more and go a little more indepth.

Reply

whyme
QUOTE(bjrn @ Mar 15 2005, 06:48 AM)
The other values for display depend on what element they are defined. For example
CODE
display: list-item
is only available to lists.  W3Schools has a list of valid values.

If you want to learn more about CSS, I recommend reading through the W3Schools CSS tutorial. Which should be faster than downloading some software and going through its helpfiles.
*



another way to do this is to use <li> and <ul> tags (XHTML only for <uL>)

So it would be something like this

CODE
<li><a href="blah.html">Blah</a></li>
<li><a href="blah2.html">Blah2</a></li>
<li><a href="blah3.html">Blah3</a></li>


then your css would be.

CODE

#li {
right-margin: 20px;
color: #999;
font-family: Arial;
}


this would space the links evenly across, with 20px spaces.

on a completely different note, i think that this tutorial is much too basic. need a lot of spicing up.

 

 

 


Reply

Latest Entries

clagnol
In response to Rogan's question:

QUOTE(rogan @ Mar 30 2005, 09:14 AM)
i try to create a css in macromedia drm. 2004 but when i strat that i only get a code,and i dont get the design sheet!
who is good in macromedia drm. 2004 mx?
i need help
*



There is a tab labelled "Design" in Dreamweaver MX which keeps track of all of the stylesheet rules for a given page. Right-click on it and select "New CSS Style". You can use CSS to create styles for any imaginable object, but for this example, I'll create a style for body paragraphs (that is, the text between <p> tags).

Now, you can either create a new class (which I'll explain shortly), redefine an html tag, or use a CSS selector (a:link, a:hover, a:visited, a:active).

If you define a new class, you'll want to give it a descriptive name preceded by a period, for example, ".body". To apply this style to a paragraph inside my main html page, I need only to type '<p class="body">'.

If you decide to redefine an html tag, simply select the <p> tag from the dropdown menu, and then all <p> tags within the html page will be affected by the new style.

And the CSS selectors merely affect link behavior.

Once you've chosen a style type, you must choose whether you are going to define your new style in the html page ("global"), or in a special CSS page ("linked"). There is a third option ("local") which consists of adding the CSS into the individual tags (like so: <p style="font-family: georgia, times new roman, serif">) but Dreamweaver will not help you with that, so you must actually learn CSS to use that method.

I think the rest is pretty self-explanatory. If anyone has any questions about CSS or design in general, feel free to ask me.

Reply

thebluekirby
isn't this tutural a little too basic?

anyways, it's pretty helpful ^__^ well... now i know that you can combine css codes in 1, lol (yeah, i didn't know that before tongue.gif)

Reply

Becca
i love css.. Been using it every since I knew html... it's the best... you can just make your own stuff up.
It saves a lot of space and time.... and it's really really really easy...

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Pages: 1, 2
Similar Topics

Keywords : html css css

  1. Add Flashing Inbox To Invisionfree Forum - Html code for invsiionfree!! (1)
  2. How To: Html Tables. - I find these really useful. (8)
    If you are a novice web designer, but want your site to look advanced and proffessional, then what
    better way to do so than to use HTML tables? HTML tables are a really easy way of formatting your
    text, to make your ste look proffesional. It looks good, and its easy, what more can you ask for?
    You have to use the tag, so first lets start off with: HTML Table > /table > In
    between theese two tags, we will add the data for the table, using the tags and . =Table
    Heading (Title) =Table Data (what you want in the table) =table row (new row) So, lets ...
  3. Creating Navigation For Html Websites - Have a common navigation menu for the whole website! (12)
    Pre-requisite: HTML, inline frame tags 1 Attachment(.zip) included. Updates : 29-12-07: Doctype
    added in example files (Advised by jlhaslip) Designing a whole website takes a lot of planning
    and organization. Designing a proper navigation system is a basic step in building your website. If
    you are developing webpages in html you would have observed that as you go on creating pages it
    becomes difficult to maintain the links to the pages. This article will guide you in developing a
    common navigation menu for your website. It describes three ways, so if you don'...
  4. Simple Scripts In Html And Javascript - Things like BackgroundColorChanger and so (7)
    like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
    on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
    desktop and write the following: QUOTE <script language = "JAVASCRIPT">
    browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
    the looking of your site. you can add things like "bgcolor" for the background, "text" for the
    textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i...
  5. [php] Clean Code Functions - Clean up your html output from php scripts (5)
    There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
    I'll edit this Topic and add the link so you can review it on your own, and there is no need for
    me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
    functions which can be used for making sure that the HTML output from my scripts is readable when a
    view-source is reviewed. Two handy functions are included here. They work together quite nicely,
    and I will start this Tutorial with a short summary of the reasons for their 'being...
  6. Html Legend - Learn how to create a handy legend with HTML! (9)
    I think this is pretty neat... good for those people who maybe aren't that great at designing
    things but still want something to look nice.. CODE <fieldset> <legend>Legend
    title</legend> Content </fieldset> try it in note pad.. it looks nice...good for
    forums, sign up forms......
  7. Cakephp On Ubuntu - using your own public_html folder (0)
    Hi, there are many tutorials about this, but i would like to type the steps i followed in order to
    get cakephp working on my user public_html folder. as many of you probably know, if you have
    apache's userdir module loaded, you can put your web pages on /home/user/public_html , and
    access them with the url: http://localhost/~user/ . I really prefer this, so all my web pages are
    on my personal home, but how to configure cakephp to work with these paths, i got a hard time with
    this, but finally got it!. here's how: in case you don't have apache2's u...
  8. Html Span - (7)
    HTML Span Description The span tag is quite the handy tag to have at your disposal. You can use
    it for everything from Text Formating, to creating a scrollable text area. When combined with CSS it
    becomes an easy-to-use tool for making your website as uniform as possible, as your not bogged down
    with tags for every heading and title on your website. Try It Out CODE <html>
    <body> <div class="content"> <span class="heading1"> Heading
    or title goes here. </span><br><br> All the content insi...
  9. Html Bdo... - (13)
    Description I find that it is often difficult to write a sentence backwards, but thanks to HTML, I
    can now complete this task in only a few seconds. Now the only problem is it is very difficult to
    read... Try It Out Welcome to one of the most useless functions of HTML. The tags enable you to
    write a sentence backwards. The code is quite simple. CODE <bdo dir="rtl">I
    find that it is often difficult to write a sentence backwards, but thanks to HTML, I can now
    complete this task in only a few seconds. Now the only problem is it is very difficult to r...
  10. Want-to-start Html Tutorials - An HTML tutorial that covers the basics (2)
    NOTE: Don't use a rich text editor* for writing HTML code! Use Notepad in Windows,
    SimpleText in Mac or TextEdit in OSX, but you must set the following preferences for the HTML code
    to work! In the Format menu, select Plain Text. Open the preferences window from the Text
    Edit menu, then select "Ignore rich text commands in HTML files." Start Creating Your Own HTML
    File You can either use HTM or HTML file extensions. For more information, visit:
    http://filext.com/file-extension/htm for HTM or http://filext.com/file-extension/html for HT...
  11. Create A Simple Html Editor With Php And Javascript - (3)
    Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
    tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
    Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
    Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
    documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
    our PHP script that we will use to make the file. Make a file called save.php Here is the...
  12. Spice Up Your Forms - With a bit of CSS and HTML alignment (11)
    Ever wonder how to make those stylish forms you see everywhere? Well now it's your change to
    learn. This short tutorial will show you how to do exactly that. Here is a bit of css to spice
    up the form. I have included comments to explain what classes will change what in the forms.
    CODE <style type='text/css'> .form table { background-color: #187cae; }
    /*The following css class will change the table cells within the .form div */ .form td {
    background-color: #bbe0f4;            padding: 3px;            border: 0px;         ...
  13. HTML tags and examples - Condensed form of course from my site... (37)
    Well, I decided to try and help out some of the users here who might be unexperienced in HTML, so I
    condensed the begginer's HTML course at my website. Here it is... Lesson 1 HTML means Hyper
    Text Markup Language. HTML is a very common language used for many websites, is the base for more
    complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the
    easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two
    arrows-like brackets created by hitting Shift and the comma key, or Shift and the period...
  14. Do You Want To Use Php Code In Your Html Pages? - Within two minutes you will! (9)
    Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
    - lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
    remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
    web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
    Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
    to make the point, this is in no way a difficult task and it doesn't requir...
  15. How To Make A Simple File Based Shoutbox Using Php And Html - (8)
    A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
    equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
    simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
    changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
    this code and add it to another php page n your site. Shout.php is the proccessing page and
    shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box....
  16. Document Type Declarations - And why we use them in html pages (0)
    This code: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
      <title>HTML 4.0 Strict document</title>     <meta
    http-equiv="content-type"  content="text/html;charset=utf-8" >     <meta
    http-equiv="Content-Style-Type"  content="text/css" > </head>
    <body>      <p>... Your HTML content here ...</p>      <p>... More
    HTML content here ...</p>   </b...
  17. Fast Template Design In Joomla Cms - Basic knowlege of Html needed (2)
    Joomla is one of the most powerfull CMS sistems around. It is free under GNU/GPL license and
    everyone with simple knowlege of webdesign (and even without it) can use it for it's website.
    For now the only way i know on how to design a template in joomla is by using Dreamweaver and Joomla
    (joomlasolutions1.0.mxp-dreamweaver.mxp) extension for dreamweaver! Template design in joomla
    is quite simple really. This template that i'll show you is the most simplest of them all, but
    it's enough for one to learn Basics of template design. Further notice is that this...
  18. Integrating Html And Css Part 1 - (5)
    Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I
    hope this helps. Introduction to HTML and CSS
    HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what
    makes everything look outreageous! For instance, I would use HTML if i wanted to put "Trap17 is
    the poop!" onto my page, although if i wanted to make it look nice like this by adding a font,
    and maybe some color, then I would use CSS. Learn the HTML. Ok this is my lit...
  19. Basic Html (for Us Kids) - (23)
    What is HTML? HTML (hypertext markup language) is computer language that is used to webpages. It
    can be confusing to understand for some of us kids. HTML pages are text files that has of HTML tags
    (they can place the text or images whereever you want to place it), and text you can place between
    the tags so the text willshow up on your page when you put it on the WWW. Tags are instructions that
    tell your browser what to show on ya website. They break up your webpage into basic sections. All
    tags start with a (right bracket). If you are a starter you need 4 tools A...
  20. How To Create Html Page Anchors - Click A Link And Take You To A Certin Place On The Same Page (5)
    Have you ever wondered how people have a normal link but all it does it take you to the middle of a
    long page? well here is a solution DEMO: Here Ok well first off for the link it will be just
    like a normal link code except you wont put a http://URL.com/file.php it will look somthing like
    this QUOTE name ">Click This Link! there must be a # sign in front of this to work..
    now, for the content that the person will be re-directed to after clicking the link QUOTE name
    "> the items in bold is what you need to change QUOTE name "> i...
  21. Multiple Classes In Html - you can use more than one at a time (8)
    Multiple Classes in Css Styles Classes are used in html pages to give certain defined
    attributes to elements. They are useful when the attributes are to be used in more than one place on
    a page. (Named Id's are only allowed once per page, but I digress... might have a tutorial on
    that some day.) Sometimes you want Red text and sometimes you want Bold text. Easy enough to do,
    simply define a class and apply it to the element you want red or bold. Use this class where you
    want on the page, since classes are enabled to be used in several spots, for different u...
  22. Saint-michaels Html Tips And Tricks Issue # 2 - some more tricks of the trade and some wierd stuff to (2)
    Well i thought it was time to bring in issue 2 of html tips and tricks and i found a very
    interesting html coding which i thought was funny as hell its called Preventing Search Engine
    Indexing this coding is used to keep your website from being index why i don't know why you
    don't want you website listed unless it someone stupid as in telletubbies.com but heres the code
    This tag tells the robots not to index this page and not to follow any links within the
    page. QUOTE This tag tells the robots not to index this page, but follow any links wit...
  23. Saint-michaels Html Tips And Tricks #4 - been awhile so here somewhat new stuff (12)
    WEll its been awhile since i did so i will put up some more useful html tips and tricks here on
    trap17.com Ok for trick actually, want to know how some websites got those ool icons put on their
    website link in the favorites folder well here you go in 3 quick steps. 1. create an image then
    shrink it down to 16x16 and save it as avicon .bmp. 2. then change it to .ico, when is the file
    reconizing it as a icon., if you are having problems saving it, there are some resources out there
    that can change it for you. 3. load the image to your website and add this tag in betwee...
  24. Saint Michael Xhtml Tips And Tricks #1 - xhtml= html 5.0 :P (3)
    Well by the many views i have seen on my web design issues i should go into new territory, so im
    going start with some useful xhtml info for you web design fenatics, the info i present to you is
    from other websites so be warned it might or might not work all depends but lets start off with the
    basic info for using xhtml. Also this tutorial is for beginners so i won't be doing any xml
    info due to it being a more server side then actually webdesign 1. DOCTYPE this is used to tell
    the browser what kind of infomation it will be displaying. nothing as really changed...
  25. Saint-michael Html Tips And Tricks Issue #3 - exploring meta tags and what uses they have (0)
    Todays issue we are going to talk about a bunch of good newbie stuff. The first is meta tags to
    make it easy use a generator, from my searches on the internet ther are soe many meta tags to use
    its not even funny but for those whoe like them is are the more common ones that are used for a
    website. QUOTE also for a dynamic look using the meta this called page
    fading so to speak, what it does when you click on a link the website will fade for a duration of
    time to the next page on your site warning it doesn't do anything when you first cl...
  26. Saint_michael Html Tips & Tricks Issue #1 - useful html stuff (1)
    this little trick i though was useful it used to send a visitor to another page using meta tag and
    it sends the user to another page with in a few seconds for example you will go to the new page in 5
    seconds CODE <META HTTP-EQUIV=REFRESH
    CONTENT="5;URL=http://www.yoursitehere.com"> and for those have a good knowledge
    of javascript they could use this script right here CODE <html> <head>
    <title>Refresh Page</title> <script language="JavaScript">
    <!-- var time = null function move&#...
  27. Web Programming Tuts For The Beginner - HTML for the beginner (8)
    Hello and welcome to our lil' web programming session. Here we assume that our students are
    complete noovices of web programming. If you havent ever done any web prograqming, then you've
    come to the right place. HERE WE GO
    -------------------------------------------------------------------------------- HTML TAGS HTML
    works in a very simple, very logical, format. It reads like you do, top to bottom, left to right.
    That's important to remember. HTML is written with TEXT. What you use to set certain sections
    apart as bigger text, smaller text, bold text,...
  28. Webmaster Level 1 - The sequel to my smash hit HTML tutorial (3)
    Here is the link to my first HTML turtorial, which will help as a refresher course, even if you
    already know HTML pretty wel. http://www.trap17.com/forums/Html-t8780.html WebMaster Level 1
    Lesson 1 a Breif Refresher Course Remeber the tutorial I wrote up a few days ago? Well this is
    the sequel, it includes some heavy HTML, some CSS. First of all we should make sure your still up
    to date, so take this simple little quiz, it you get 2 or more wrong please go back to the first
    tutorial and do a little reveiwing. True or False? 1.) The basic structure of HTML is...
  29. Simple Html Guide - (17)
    =============================================================================== ***Simple HTML Guide
    By: Chris Martínez a.k.a. iLL*** ..::::.. ill.zero gmail.com ..::::.. ..::::.. www.zroenergy.net
    ..::::.. =============================================================================== How To Use
    this HTML Guide
    ---------------------------------------------------------------------------------------- Many things
    are explained in this guide, if you already know them, you might wish to skip the first few sections
    and go straight to the tags. Notes are made between ..:: and...



Looking for html, css, easy, css

Searching Video's for html, css, easy, css
Add Flashing
Inbox To
Invisionfree
Forum Html
code for
invsiionfree
!!
How To: Html
Tables. I
find these
really
useful.
Creating
Navigation
For Html
Websites
Have a
common
navigation
menu for the
whole
website!
Simple
Scripts In
Html And
Javascript
Things like
BackgroundCo
lorChanger
and so
[php] Clean
Code
Functions
Clean up
your html
output from
php scripts
Html Legend
Learn how to
create a
handy legend
with
HTML!
Cakephp On
Ubuntu using
your own
public_html
folder
Html Span
Html Bdo...
Want-to-star
t Html
Tutorials An
HTML
tutorial
that covers
the basics
Create A
Simple Html
Editor With
Php And
Javascript
Spice Up
Your Forms
With a bit
of CSS and
HTML
alignment
HTML tags
and examples
Condensed
form of
course from
my site...
Do You Want
To Use Php
Code In Your
Html Pages?
Within two
minutes you
will!
How To Make
A Simple
File Based
Shoutbox
Using Php
And Html
Document
Type
Declarations
And why we
use them in
html pages
Fast
Template
Design In
Joomla Cms
Basic
knowlege of
Html needed
Integrating
Html And Css
Part 1
Basic Html
(for Us
Kids)
How To
Create Html
Page Anchors
Click A Link
And Take You
To A Certin
Place On The
Same Page
Multiple
Classes In
Html you can
use more
than one at
a time
Saint-michae
ls Html Tips
And Tricks
Issue # 2
some more
tricks of
the trade
and some
wierd stuff
to
Saint-michae
ls Html Tips
And Tricks
#4 been
awhile so
here
somewhat new
stuff
Saint
Michael
Xhtml Tips
And Tricks
#1 xhtml=
html 5.0 :P
Saint-michae
l Html Tips
And Tricks
Issue #3
exploring
meta tags
and what
uses they
have
Saint_michae
l Html Tips
& Tricks
Issue #1
useful html
stuff
Web
Programming
Tuts For The
Beginner
HTML for the
beginner
Webmaster
Level 1 The
sequel to my
smash hit
HTML
tutorial
Simple Html
Guide
advertisement



Html With Css - a easy look at CSS



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE