CSS Flashcards
Direction
Specifies the text direction/ writing direction
Color
Sets color of text
Letter-spacing
Increases or decreases the space between characters in a text
Line-height
Sets the line height
Text-align
Specifies the horizontal alignment of text
Text-decoration
Specifies the decoration added to text
Text-indent
Specifies the indentation of the first line in a text-block
Text-shadow
Specifies the shadow effect added to text
Text transform
Control the capitalization of text
Vertical-align
Sets the vertical alignment of an element
White-space
Specifies how white-space inside an element is handled
Words-spacing
Increases or decreases the space between words in a text
Blink value is not supported in…?
1.
2.
3.
Internet explorer
Chrome
Safari
Text decoration property
None Underline Overline Linethrough Blink Inherit
Direction Property
Direction of Text
Ltr=the writing direction is left to right
Rtl=the writing direction is right to left
Inherit=specifies that the value of the direction property should be inherited from the parent element
Serif
Times new roman
Georgia
San-serif
Arial
Verdana
Monospace
Courier New
Lucida Console
Set font size with pixels
Setting size with pixels
Font-size:40px
Links can be styled with any CSS property special for links are that they can be styled differently depending on what state they are in
4 Links
a: link
a: visited
a: hover
a: active
a:link
{color:#FF0000;}
Unvisited link
a:visited
{color:#00FF00;}
Visited link
a:hover
{color:#FF00FF;}
Mouse over link
a:active
{color:#0000FF;}
Selected link
unordered lists-the list items are marked with bullets
Ordered list-the list items are marked with numbers or letters
List-style-image: url(‘April.gif’)
An item as a list item number
To specify an image as the list item marker, use the list style-image property
IE, Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari
Costs browser is the solution
Crossbrowser Solution
Displays the image-marker equally in all browsers:
ul
{
list-style-type:none;
padding: 0px
margin: 0px
}
ul li
{
background-image: URL (dnhdkm.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}Table Borders
Specify table borders in CSS, use the border property
Table, th, td
{
Border: 1px solid black;
}
Table in the example above has double borders
To display a single border for the table, use the border-collapse property
Collapse Borders
table
{
border-collapse:collapse;
}
table, th, td
{
border:1px solid black;
}Table width and height
table
{
width:100%;
}
th
{
height: 50px;
}Table text alignment
td
{
text-align:right;
}
Sets vertical alignment top bot or middle
td
{
height:50px;
vertical-align:bottom;
}Table padding
td
{
padding:15px;
}
Table color
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}CSS Box Model
Margin
Border
Padding
Content
Margin
Clears an area around the border. The margin does not have a background color, it is completely transparent
Border
A border that goes around the padding and content. The border is affected by the background color of the box
Padding
Clears an area around the content. The padding is affected by the background color of the box
Content
The content of the box, where text and images appear
