| CSS : Cascading Style Sheet |
- Inline user interface rules
- <style></style> tags
- Separate file styling
- <link rel="stylesheet" href="myStyle.css"/> tag and .css file
- Specific localized styling overwrites general styling
- Multiple elements can be styled together by mentioning those elements seperated by comma and space. This will still allow specific styling separately.
- header, footer {}
- Specific DOM element can be identified by its ID attribute and can be styled by identifying it with hash symbol followed by its ID value
- #divMain {}
- Multiple DOM elements can also be commonly referred by attributing all of them with class. Such elements can be styled by using period symbol followed by the class name.
- .mainElements{}
- Positional reference based on HTML nested in a particular document
- #divMain > Form > Label {}
- Positional reference for elements at any level
- #divMain Label {}
- Attributes based element references
- input [type=text]
Style Attributes
- color
- Named
- lightgray
- Short Hex
- #ccc
- Long Hex
- #FFCCAA
- border : Line surrounding the element
- 1px solid black
- padding : Space between the border and contents inside the element
- margin : Space between other element and border
- Four : Top Left Bottom Right
- 20px 10px 20px 10px
- Two : Top and Bottom Left and Right
- 20px 0
- 0 auto (float div at center)
- One : All equal spacing
- 5px
- individual property
- margin-left
- position
- static : takes space
- fixed : do not take up space, elements overlap
- absolute : exact position, needs additional attributes
- top
- left
- right
- bottom
- display
- block : arrange elements in a rectangular block in a new line
- inline : arrange elements in same line
- inline-block: arrange elements in a rectangular block in the same line
- vertical-align
- float : floats in the current position, doe not take up space, other elements overlaps
- Actual size = Margin + Border + Padding + Contents
- <html> and <body> maargin and padding are not 0 by default
- set html, body{ padding 0; margin: 0}
0 comments:
Post a Comment