Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Css Cheat Sheet…part-1-


9 replies to this topic

#1 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 30 December 2009 - 09:06 PM

Hi…everyone
I'll write this time about cheat sheet..
I don’t know about you but I really love cheat sheet…
They are very useful for beginners in CSS..
And very helpful for professionals
Because simply no one can remember everything …I mean every rule and every property…
So I'll give you my own cheat sheet that I use for CSS

1- The syntax:
Syntax
selector {property: value;}

External Style Sheet
<link rel="stylesheet" type="text/css" href="style.css" />

Internal Style
<style type="text/css">
selector {property: value;}
</style>

Inline Style
<tag style="property: value">

2- Generals:

Quote

Class: String preceded by a period
ID: String preceded by a hash mark
Div: Formats structure or block of text
Span: Inline formatting
Color: Foreground color
Cursor: Appearance of the cursor
Display: block; inline; list-item; none
Overflow: How content overflowing its box is handled (Visible, hidden, scroll, auto)
Visibility: Visible, hidden

3- Fonts:

Quote

Font-style: italic, normal
Font-variant: normal, small-caps
Font-weight: bold, normal, lighter, or you can use integer (100-900)
Font-size: means size of the font
Font-family: means a specific font

4-text:

Quote

Letter-spacing: means space between letters
Line-height: means the vertical distance between baselines
Text-align: means horizontal alignment
Text-decoration: like blink-line-through, none, overline, underline
Text-indent: means first line indentation
Text-transform: capitalize, lowercase, uppercase
Vertical-align: means vertical alignment
Word-spacing: means spacing between words
To be continued…with part-2-

I hope you'll find it useful..

#2 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 31 December 2009 - 06:12 PM

ok...that's hurt, what is going on? no body any more interest in CSS, or my topic is nonsense or duplicate or what? at least thank you is good. this is very disappointed, coz this is one of my first posts and it is hrard to think that nobody interested in it, especially after i worked hard to collect the info.

this is just to encourage any one to reply with thanks at least and to know if there is someone interesting in my posts

#3 BCD

    Premium Member

  • Kontributors
  • PipPipPipPipPipPipPipPip
  • 168 posts
  • Gender:Male
  • myCENT:27.66

Posted 31 December 2009 - 07:29 PM

Hey there. Happy new year.

Well, just because nobody replied doesn't mean nobody likes it. They will reply if they have something to say. As you see, one liner posts saying "Thank you" would be considered spam here. On the other hand they can give a five start rating if they like it. If you end up the post with some questions or asking opinions, to engage in conversation you will surely expect more replies.

Since this thread has the basics, I would like to add one too:

Centering a block element:
When I switched from HTML styling to CSS, this was the first thing I learned. In CSS, to center align a block element we use:
#block { 
		width: 500px; 
		margin: auto; 
		}


#4 Xalor

    Super Member

  • KS GFX Crew
  • PipPipPipPipPipPipPipPipPip
  • 249 posts
  • Gender:Male
  • Location:New Hyde Park, NY
  • myCENT:58.18
  • T17 GFX Crew

Posted 31 December 2009 - 07:46 PM

Thanks for the share. Its pretty useful for beginners who wants a quick reference to check up on the common values and properties. Its mostly just a list however it is good. I would make a condensed form of w3c schools properties and addon to their cheatsheets. That site has a couple of different cheat sheets for like ASP CFM Javascript/livescript, JSP, PHP, and like tons of other ones like mySQL I believe also. Well I mean other than teh standard CSS and HTML ones. Since we do have that I would make sure not to make another one like that, which is easily found. Don't get depressed if people don't post right away though =) Its still a good resource. For other who want more advanced techniques, I would go with the Woork Handbook, just google it, it should be woork.org with the rest of his cheatsheets. That should also help you out Threadstarter (TS). @TS its pretty usefull so you should look it up as a new resource.

#5 knoppixusr

    Member [Level 2]

  • Kontributors
  • PipPipPipPipPip
  • 82 posts

Posted 01 January 2010 - 05:58 AM

Hey web-designer, Thank you for the info i do find it pretty useful. Especially the part of your cheat sheet that contains all three: External Style sheet , Internal and Inline style. This is useful to know and in my experience most cheat sheets I have come across lacks this info. Perhaps in your part two, you can add something about the background properties and background position as i use them allot. If you can it would also be nice if you can mention what level of css ie css1 ,2 or 3 your cheat sheet is addressing. Keep up the good work ;-)

I don't think you need to worry about people not liking your post. Because it is the end of year most people are spending time with family/friends and aren't so active on the forum now. It's just....
HAPPY NEW Year everyone!!!!! :)

#6 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 02 January 2010 - 11:59 AM

View Postknoppixusr, on Jan 1 2010, 07:58 AM, said:

Hey web-designer, Thank you for the info i do find it pretty useful. Especially the part of your cheat sheet that contains all three: External Style sheet , Internal and Inline style. This is useful to know and in my experience most cheat sheets I have come across lacks this info. Perhaps in your part two, you can add something about the background properties and background position as i use them allot. If you can it would also be nice if you can mention what level of css ie css1 ,2 or 3 your cheat sheet is addressing. Keep up the good work ;-)

I don't think you need to worry about people not liking your post. Because it is the end of year most people are spending time with family/friends and aren't so active on the forum now. It's just....
HAPPY NEW Year everyone!!!!! :)

thank you and happy new year, and you are right about the css version but the question is from where can i know the version of css, i know it is a shame to ask such a question especially when i consider my self as pro in css but i really didn't know the answer, i hope you can helped me with that...

#7 BCD

    Premium Member

  • Kontributors
  • PipPipPipPipPipPipPipPip
  • 168 posts
  • Gender:Male
  • myCENT:27.66

Posted 02 January 2010 - 12:51 PM

View Postweb_designer, on Jan 2 2010, 05:29 PM, said:

where can i know the version of css
Like in HTML, there are no document declarations for CSS. I mean, we do not explicitly specify the CSS version the browser should use to render the page. Because in CSS there are no differences between the versions, each one builds up over the previous versions with more features. These CSS specifications are defined by w3 consortium. You can check out the different specifications: CSS 1, CSS 2.1, CSS 3. Apart from these versions there are other ones too, some of which are still in development.

#8 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 03 January 2010 - 12:06 AM

View PostBCD, on Jan 2 2010, 02:51 PM, said:

Like in HTML, there are no document declarations for CSS. I mean, we do not explicitly specify the CSS version the browser should use to render the page. Because in CSS there are no differences between the versions, each one builds up over the previous versions with more features. These CSS specifications are defined by w3 consortium. You can check out the different specifications: CSS 1, CSS 2.1, CSS 3. Apart from these versions there are other ones too, some of which are still in development.

thank you for these information i really didn't know that...i'll keep that in mind every time i use CSS and also i think it is a great thing that CSS is keeping developing i find it very useful and if they can fix more bugs in browsers which is killing me that will be very helpful for all designers

#9 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 16 January 2010 - 12:23 AM

Helpful CSS Cheat SheetCss Cheat Sheet…part-1-

I feel your pain.  You are truly appreciated by by Web Design (older student) like me.  I can use all the help I can  get.  THANK YOU!

-reply by Tamara

 



#10 TomCol

    Newbie [Level 3]

  • Kontributors
  • PipPipPip
  • 41 posts
  • Gender:Male
  • myCENT:68.33

Posted 17 May 2010 - 07:23 PM

Thanks for making this! I have been looking for CSS help for some time and this is just what I needed.




Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users