Flashcards
CSS
Cards in this deck (22)
- 1SelectorThe selector points to the HTML element you want to style.
- 2Selector Examplesdiv, p, header, h1, article, body, #id, .class
- 3The Color propertySets the color of text
- 4Background PropertyA shorthand property for setting ALL background properties in ONE declaration
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
} - 5background-attachmentSets whether a background image is fixed or scrolls with the rest of the page.
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
} - 6background-blend-modeSpecifies the blending mode of each background layer(image/color)
div {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} - 7background-colorspecifies the background color of an element.
body {
background-color: yellow;
} - 8background-postionSets the position of a background image.
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
} - 9background-imagespecifies background image of an element
body {
background-image: url("paper.gif");
background-color: #cccccc;
} - 10background-repeatSpecifies if and how the background image will be repeated.
- 11background-clipSpecifies the painting area of a background.
background-clip: content-box; - 12background-originSpecifies where background images are positioned.
background-origin: content-box; - 13background-sizeSpecifies the size of the background images.
background-size: 80px 60px; - 14borderSets All border properties in ONE declaration.
p {
border: 5px solid red;
} - 15border-bottomSets ALL bottom border properties in ONE declaration.
p {
border-style: solid;
border-bottom: thick dotted #ff0000;
} - 16border-bottom-left -radiausDefines the shape of the border in the bottom left corner.
div {
border: 2px solid;
border-bottom-left-radius: 2em;
} - 17border-bottom-right -radiusDefines the shape of the border in the bottom right corner.
div {
border: 2px solid;
border-bottom-left-radius: 2em;
} - 18border-bottom-styleSets the style for the border bottom.
p {
border-style: solid;
border-bottom-style: dotted;
} - 19border-bottom-widthSets the width of the border bottom.
p {
border-style: solid;
border-bottom-width: 15px;
} - 20border-colorSets the color for all four borders.
- 21Border Shorthand p { border: 5px solid red; } Try it Yourself »To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color - 22—
Information
- Description
- MCSD CSS3 Flashcards on CSS, created by Faith Kinchen on 06/03/2016.
- Created by
- Faith Kinchen
- Views
- 0
- Tags
- Rating