Scribd
Upload
162 views

Css Cheat Sheet

This document provides a cheat sheet overview of basic CSS properties and syntax. It includes sections on fonts and text properties, colors, backgrounds, positioning, margins and padding, and more. CSS is introduced as a way to style web pages separately from HTML. Styles can be applied via external style sheets, internal style sheets, or inline styles. The cheat sheet lists common CSS properties like font sizes, weights, text alignment, colors, backgrounds, borders and boxes to control layout.

Uploaded by

alkarl
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
162 views

Css Cheat Sheet

This document provides a cheat sheet overview of basic CSS properties and syntax. It includes sections on fonts and text properties, colors, backgrounds, positioning, margins and padding, and more. CSS is introduced as a way to style web pages separately from HTML. Styles can be applied via external style sheets, internal style sheets, or inline styles. The cheat sheet lists common CSS properties like font sizes, weights, text alignment, colors, backgrounds, borders and boxes to control layout.

Uploaded by

alkarl
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Web Design / HTML Basic CSS Cheat Sheet

What is CSS? font-size: Backgrounds


small;
CSS stands for Cascading Style 12pt; background-image:
Sheets, and is a way to modify the 1em; url(image.gif);
look of your Web pages outside 120%;
the HTML. background-position:
http://webdesign.about.com/od/ vertical horizontal;
http://webdesign.about.com/od/ css/qt/tipfontsizes.htm top left;
beginningcss/a/aa021607.htm 50% 50%;
font-weight:
Adding Styles bold; background-repeat:
normal; no-repeat;
External Style Sheets repeat-x;
<head> http://webdesign.about.com/od/
fonts/qt/aa031807.htm
repeat-y;
<link rel=“stylesheet”
type=“text/css” http://webdesign.about.com/od/
href=“styles.css” /> text-align: beginningcss/p/aacss7bg.htm
</head> center;
justify; Shorthand Property
http://webdesign.about.com/od/
css/a/aa020199.htm
background:
text-decoration: color image repeat
underline; attachment position;
Internal Style Sheets line-through;
<style type= “text/css”>
background: #fff
style properties text-transform: url(image.gif) no-repeat
</style> capitalize; fixed center;
http://webdesign.about.com/od/ lowercase;
http://webdesign.about.com/
beginningcss/a/aa021807.htm
od/styleproperties/a/
text-indent:
aa021706.htm
Style Syntax 15px;
1em;
Basic syntax 10%; Margins and Padding
selector {
property: value;
Every element in HTML is a box
letter-spacing: with margins, padding, and borders
} 0.2em; around the four sides. These are
1%;
p { color: red; } controlled by the CSS box model.
word-spacing: http://webdesign.about.com/od/
Selectors 0.2em; advancedcss/a/aa100101a.htm
⇒ HTML Tags 1%;
p, strong, h3 margin:
⇒ Classes line-height: top right bottom left;
.className 1.2em; 10px 1em 5% 10px;
⇒ IDs 5%;
#idName padding:
http://webdesign.about.com/od/ top right bottom left;
beginningcss/p/aacss5text.htm
CSS Comments
/* comment text */ border:
Colors width style color;
http://webdesign.about.com/od/ Text color 1px solid black;
beginningcss/p/aacss2syntax.htm color: 1em dashed #000;
red; http://webdesign.about.com/od/
Font and Text Properties #f00; beginningcss/p/aacss6box.htm
font-family:
arial, sans-serif; Background color
“times new roman”,serif; background-color:
courier, monospace; red;
http://webdesign.about.com/
#f00;
http://webdesign.about.com/od/
fonts/f/blfontfaqgeneri.htm http://webdesign.about.com/od/
beginningcss/p/aacss7bg.htm

Jennifer Kyrnin – http://webdesign.about.com/

You might also like