Scribd
Upload
18 views

CSS Properties

CSS is used to style and lay out web pages. The document outlines CSS properties for color, background, fonts, text, borders, margins, padding, images, links and more. It also covers CSS3 properties like border-radius, transition effects, opacity, and shadows.

Uploaded by

wianneeee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

CSS Properties

CSS is used to style and lay out web pages. The document outlines CSS properties for color, background, fonts, text, borders, margins, padding, images, links and more. It also covers CSS3 properties like border-radius, transition effects, opacity, and shadows.

Uploaded by

wianneeee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CASCADING STYLE SHEET/CSS

COLOR: CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an
element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and
other decorative effects.

BACKGROUND:

• The background-color property is used to set the background color of an element.


"background-color:yellow;
• The background-image property is used to set the background image of an element.
background-image:url(/images/pattern1.gif);
• The background-repeat property is used to control the repetition of an image in the background.
background-repeat: repeat; no-repeat, repeat-x, repeat-y
• The background-position property is used to control the position of an image in the background.
background-position:100px 200px;
• The background-attachment property is used to control the scrolling of an image in the background.
background-attachment:fixed; scroll and fixed
• The background property is used as a shorthand to specify a number of other background properties
background:url(/images/pattern1.gif) repeat fixed;

FONTS:

• The font-family property is used to change the face of a font.


font-family:georgia,garamond,serif;
• The font-style property is used to make a font italic or oblique.
font-style:italic; normal, italic and oblique
• The font-variant property is used to create a small-caps effect.
font-variant:small-caps; normal and small-caps
• The font-weight property is used to increase or decrease how bold or light a font appears.
font-weight:bold; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
• The font-size property is used to increase or decrease the size of a font.
font-size:20px; xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %
• The font property is used as shorthand to specify a number of other font properties.
font:italic small-caps bold 15px georgia;

TEXT:

• The color property is used to set the color of a text.


• The letter-spacing property is used to add or subtract space between the letters that make up a word.
• The word-spacing property is used to add or subtract space between the words of a sentence.
• The text-indent property is used to indent the text of a paragraph.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and strikethrough text.
Possible values are none, underline, overline, line-through, blink.
• The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
Possible values are none, capitalize, uppercase, lowercase.
• The text-shadow property is used to set the text shadow around a text.
text-shadow:4px 4px 8px blue;

BORDERS: The border properties allow you to specify how the border of the box representing an element should look.
(border-bottom, border-top, border-left, border-right)

• The border-color specifies the color of a border.


• The border-style specifies whether a border should be solid, dashed line, double line, or one of the other
possible values.
o none: No border. (Equivalent of border-width:0;)
o solid: Border is a single solid line
o dotted: Border is a series of dots.
o dashed: Border is a series of short lines.

1
o double: Border is two solid lines.
o groove: Border looks as though it is carved into the page.
o ridge: Border looks the opposite of groove.
o inset: Border makes the box look like it is embedded in the page.
o outset: Border makes the box look like it is coming out of the canvas.
• The border-width specifies the width of a border.

MARGINS: The margin property defines the space around an HTML element. (margin-top, margin-bottom, margin-right,
margin-left)

• The margin specifies a shorthand property for setting the margin properties in one declaration.
margin: 20px 15px 20px 15px;

IMAGES:

• The border property is used to set the width of an image border.


• The height property is used to set the height of an image.
• The width property is used to set the width of an image.

LINKS:

• The :visited signifies visited hyperlinks.


• The :hover signifies an element that currently has the user's mouse pointer hovering over it.

PADDINGS: The padding property allows you to specify how much space should appear between the content of an
element and its border. (padding-top, padding-bottom, padding-left, padding-right)

• The padding serves as shorthand for the preceding properties.


padding: 20px 15px 20px 15px;

DIMENSION:

• The height property is used to set the height of a box.


• The width property is used to set the width of a box.

CSS3 PROPERTIES:
BORDER-RADIUS: The border-radius property is a shorthand property for setting the four border-*-radius properties.

• border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

TRANSITION: Morphing effect from one style to another.

• transition: 3s;

OPACITY: Transparency of an element. (Values:0-1)

• opacity: 0.6;

TEXT-SHADOW & BOX-SHADOW: Creates shadow effects on elements.

• text-shadow: 2px 2px 2px blue;


• box-shadow: -5px -3px 8px red;

You might also like