Club Penguin Town
 
HomeFAQSearchMemberlistUsergroupsRegisterLog in

Share | 
 

 CSS STYLED TUTORIAL!

Go down 
AuthorMessage
The Mmv
Administrator
Administrator
The Mmv

Male
Number of posts : 243
Age : 22
Country/State : California,United States
Hobbies : Computer, go with friends and football
Penguin Username : The Mmv
Registration date : 2008-12-06

PostSubject: CSS STYLED TUTORIAL!   Tue Dec 23, 2008 11:06 am

CSS Styles Tutorial



Introduction


Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content in a web page. They are very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be managed from just one file. CSS Styles also enhance your site's look, accessibility and reduces file size. Another main advantage is reusability - instead of defining the properties of fonts, backgrounds, borders, bullets, uniform tags, etc. each time you use them you can just assign the corresponding css style in the class property.


You can store CSS styles directly in each document or, for more control and flexibility, in an external style sheet.



There are 3 types of CSS Styles:



  • Custom CSS (Class) styles: create a customized style with the set attributes. These class styles can be applied to any tag.
  • HTML Tag styles: redefine the formatting for a particular tag, such as

    . All text formatted with the h1 tag is immediately updated.

  • Advanced CSS Selector styles: redefine the formatting for:

    • A particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) and pseudo-class styles (for example, a:link, a:hover, a:visited)


    • A specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair id="myStyle")




How it works


CSS styles are defined within the


If you define the style in a external existing or new Style Sheet (recommended) you will find code similar to the following in your head content:



This code indicates that the document is linking to the external style sheet called styles.css located under the site root. If you open the style sheet in notepad you will find code similar to the code for the styles being embedded in the document. The big advantage of external style sheets is that the web site is easy to maintain and that when we make changes to the styles applied in the document, only the style sheet needs to be uploaded and not all the pages accessing it. As a practice, while using Macromedia Dreamweaver, link you template(s) to the external style sheet so that all the pages using the template can use just one style sheet.



Creating a New Style Sheet and a new CSS Style


Open your site in Dreamweaver and do the following:



  1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.


  2. Select Class in the Selector Type. Now type your style name in the Name box (example: .bullet). Use the Tag Selector Type for redefining HTML tags or the Advanced Selector Type for hovers, id attributes or combination of tags.


  3. Define the style in a New Style Sheet, give a name (example: styles.css) and save it under your site root. Click OK.

  4. In the CSS Style Definition pop-up window that appears give the Formatting Attributes like Font, List, Background, Border, Positioning, etc.


Applying the New Style



  1. To use this style just select and right click any tag


    in the tag selector located at the bottom left of the Document window. For the Set Class attribute select bullet from the list.


  2. While typing the HTML code use styles by setting the class property for any tag (example:
    Code:
    <span class="red"><ol class = "bullet"></span>
    ).

<


Last edited by The Mmv on Tue Dec 23, 2008 11:14 am; edited 2 times in total
Back to top Go down
View user profile http://themmv.com
Electro Kid1
Super Penguin
Electro Kid1

Male
Number of posts : 296
Hobbies : internet and CLUB PENGUIN!!!
Penguin Username : Electro Kid1
Registration date : 2008-12-16

PostSubject: Re: CSS STYLED TUTORIAL!   Tue Dec 23, 2008 11:07 am

ooooooook?
Back to top Go down
View user profile http://www.the1cpclub.wordpress.com
1847e
Rookie Penguin
1847e

Male
Number of posts : 69
Registration date : 2008-12-23

PostSubject: Re: CSS STYLED TUTORIAL!   Tue Dec 23, 2008 12:15 pm

that helps
Back to top Go down
View user profile http://www.clubpenguincheats.tk
vincento
Rookie Penguin


Male
Number of posts : 162
Penguin Username : penguin1
Registration date : 2008-12-08

PostSubject: Re: CSS STYLED TUTORIAL!   Tue Dec 23, 2008 6:34 pm

Thanks for the help
Back to top Go down
View user profile http://vincento2.wordpress.com
Jason Bronco
Super Penguin
Jason Bronco

Male
Number of posts : 225
Age : 23
Country/State : Australia
Hobbies : Cricket
Penguin Username : Josip52
Registration date : 2008-12-07

PostSubject: Re: CSS STYLED TUTORIAL!   Fri Dec 26, 2008 3:51 pm

Puzzled Puzzled Puzzled CONFUSED!!!!! Puzzled Puzzled Puzzled
Back to top Go down
View user profile http://jasonbronco.wordpress.com
Cooldood
Rookie Penguin
Cooldood

Male
Number of posts : 117
Age : 23
Hobbies : Computer Games, Programming, Web Design
Penguin Username : Maxamity
Registration date : 2008-12-26

PostSubject: Re: CSS STYLED TUTORIAL!   Sat Dec 27, 2008 7:31 am

Actually, for those of you who do not have Dreamweaver, just make a template and image set with Photoshop. You'll need to know CSS before you can lay out everything. If you don't have photoshop, just use an online photo editor and paint a picture. You can capture a picture from that. Next, lay out everything with the CSS code.
Back to top Go down
View user profile http://maxamity1.byethost8.com/
tbone3456
Rookie Penguin
tbone3456

Male
Number of posts : 83
Hobbies : games
Penguin Username : tbone3456
Registration date : 2008-12-09

PostSubject: Re: CSS STYLED TUTORIAL!   Sun Dec 28, 2008 6:13 pm

wut
Back to top Go down
View user profile http://alexclubpenguin.wikispaces.com
miss isya
Junior Penguin
miss isya

Female
Number of posts : 1188
Age : 21
Country/State : England,United Kingdom
Hobbies : The internet!!!
Penguin Username : miss isya
Registration date : 2008-12-16

PostSubject: Re: CSS STYLED TUTORIAL!   Sun Dec 28, 2008 6:14 pm

?????????

_________________
I will never lol again....
coz im not a lolgirl anymore...

~Miss Isya
Back to top Go down
View user profile http://clubpenguins-aisyah.blogspot.com
Sponsored content




PostSubject: Re: CSS STYLED TUTORIAL!   

Back to top Go down
 
CSS STYLED TUTORIAL!
Back to top 
Page 1 of 1
 Similar topics
-
» Curl Tutorial!
» AOE_Fan's RMS Command Tutorial
» How to make .abk book ( Arena ) step by step... tutorial...
» i need help ;/
» IvanHoe 999946f x64 vs. IvanHoe B46fB x64, 2.800 games, still running

Permissions in this forum:You cannot reply to topics in this forum
Club Penguin Town :: Club Penguin Forum :: Programming Planet-
Jump to: