Jump to content
xisto Community
web_designer

Css Cheat Sheet?part-1-

Recommended Posts

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:

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:

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:

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..

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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; 		}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!!!!! :)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.