Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
19 Cards in this Set
- Front
- Back
|
CSS Syntax |
Rule set that consists of a selector and a declaration block. |
|
|
CSS Comments |
A CSS comment starts with /* and ends with */. Comments can also span multiple lines |
|
|
CSS Selectors |
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more |
|
|
Element Selector |
The element selector selects elements based on the element name. Ex. p { text-align: center; color: red; } |
|
|
Id Selector |
The id selector uses the id attribute of an HTML element to select a specific element. Ex. #para1 { text-align: center; color: red; } |
|
|
Class Selector |
The class selector selects elements with a specific class attribute.To select elements with a specific class, write a period character, followed by the name of the class Ex. .center { text-align: center; color: red; } |
|
|
Grouping Selectors |
If you have elements with the same style definitions, like this h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }
You can group the selectors, to minimize the code. To group selectors, separate each selector with a comma. Ex h1, h2, p { text-align: center; color: red; }
|
|
|
Three Ways to Insert CSS |
There are three ways of inserting a style sheet:
External style sheet Internal style sheet Inline style |
|
|
External Style Sheet |
Links your HTML doc to a CSS Style sheet Ex. ...links to mystyle.css
body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } |
|
|
Internal Style Sheet |
You define internal styles in the head section of an HTML page, inside the body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } |
|
|
Inline Styles |
Written inline with HTML code Ex. This is a heading. |
|
|
CSS Background |
CSS background properties are used to define the background effects of an element
CSS properties used for Background Effects:
background-color background-image background-repeat background-attachment background-position |
|
|
Background Color |
The background-color property specifies the background color of an element.
The background color of a page is set like this: body { background-color: #b0c4de; } With CSS, a color is most often specified by:
a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red" |
|
|
Background Image |
The background-image property specifies an image to use as the background of an element
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this: body { background-image: url("paper.gif"); } |
|
|
Background Image - Repeat Horizontally or Vertically |
By default, the background-image property repeats an image both horizontally and vertically.
For horizontal body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } For vertical input "repeat-y" |
|
|
Background Image - Set position and no-repeat |
Showing the image only once is specified by the background-repeat property: body { background-image: url("img_tree.png"); background-repeat: no-repeat; } In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } |
|
|
Background - Shorthand property |
When using the shorthand property the order of the property values is:
background-color background-image background-repeat background-attachment background-position It does not matter if one of the property values is missing, as long as the ones that are present are in this order |
|
|
Text Alignment |
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
h1 { text-align: center; }
p.date { text-align: right; }
p.main { text-align: justify; } |
|
|
Text Decoration |
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes: |
