This is only based on what I know so this'll be updated from time-to-time and you might see new properties and values sooner or later~ :3
syntax - property: value;
Background
- this sets the background of a class, it is applicable to any type of class even in text classes
background-color - this sets the background color - it's behind the image
values:
rgb( 0, 0, 0, 1)
↳ rgb(red, green, blue, opacity)
#000000/#ffffff
↳ hex code
⌦difference between rgb and hex is that rgb allows you to lower the opacity of your color
background-image - this sets the background image
values:
url(www.insertdirectimagelinkhere.com)
background-repeat - this sets whether you want it to repeat horizontally.
values:
repeat-y
↳ vertical repetition of image
repeat-x
↳ horizontal repetition of image
background-attachment - this sets how your image will be placed, will it remain in one spot when you scroll or be the same background until the end of time
values:
fixed
↳ image is positioned relative to browser window
scroll
↳ background remains in original position
background-position - this sets the original placement/location of your background image it is relative to the browser window of the viewer
values:
value flow:
x-placement/horizontal y-placement/vertical
center bottom - center top - center center - left top
left bottom - left center - right top - right bottom - right center
x% y%
↳ 0% 0% is for left top and 100% 100% is for right bottom
xpos ypos
↳ 0 0 or 0px 0px
xpos ypos
↳ 0 0 or 0px 0px
shortcut: background: #00ff00 url('smiley.gif') no-repeat fixed center;
Border and Border-Radius
- Border sets the border of a class, it is applicable to any type of class even in text classes
- Border-radius sets the roundness of a class, it is applicable to any type of class even in text classes
border
values:
size-in-px border-style color
border styles:
dotted - dashed - solid - double - groove - inset - outset - ridge - hidden
color:
rgb( 0, 0, 0, 1) - #000000/#ffffff
border-radius
values:
size-in-px
Color
- sets the text color. - applicable to any class
color
values:
rgb( 0, 0, 0, 1) - #000000/#ffffff
Display
- sets how a class is displayed - applicable to any class
display
values:
inline
↳ module 1 module being edited module 3
block
↳ module 1
module being edited
module 3
list-tem
↳ module 1
* module being edited
module 3
none - module is not shown/hidden
↳ module 1 module 3
Font
- sets the font of the text of class - applicable to any class
font-style
values:
italic - oblique
font-variant - sets how text may appear( this is not included in shortcut)
values:
small-caps - normal - inherit
↳ follows the default preset of the server
font-weight
values:
normal - bold - bolder - lighter - 100/200/300/400/500.....
↳ 100 being the lightest, 400 equal to
normal 700 equal to bold, 900 being
the boldest
font-size
values:
sizein-px
line-height
values:
sizein-px
letter-spacing - sets the space between letters (this property is not included in shortcut)
values:
sizein-px
font-family
values:
font1, font2, font 3
↳ if font1 isn't available, then it checks if the next one is and uses it
if it is available and so on and so forth.
ADVICE: use common fonts like arial or serif since newer fonts availability would depend on the server and it may not be available
SHORTCUT:
font
value:
italic bold 15px/20px "Times New Roman", Serif
↳ respectively> font-style font-variant font-weight font-size/line-height font-family
Height and Width
- sets the height and width of a class, this does not include borders, paddings and margins
- add 'max-' to set the maximum height or width and 'min-' for the minimum
- applicable to any class
height or width
values:
sizein-px - 100% - auto - inherit
↳ height is relative to browser window so 50% would mean only half
the size of the browser window
Left, Right, Top and Bottom
- sets the height and width of a class
- works hand-in-hand with position property
- position property is a prerequisite
- applicable to any class
left/right/top/bottom
values:
sizein-px - 100%
Margin
- sets the height and width of a class
- applicable to any class
- add '-left', '-right', '-top', '-bottom' to set margin on left, right, top and bottom side differently
margin
values:
sizein-px - 100%
Opacity
- sets opacity of a class
- applicable to any class
opacity
values:
1 with full opacity - 0 with zero opacity - 0.1 for 10%, 0.2 for 20%, etc.
Overflow
- sets overflow of content
- applicable to any class
- add '-x' or '-y' for overflow direction customization
overflow
values:
hidden
↳shows only what fits in the container
auto
↳puts scrolls depending on overflow
visible
↳shows everything disregarding container size
scroll
↳puts scroll on both the x and y axis disregarding the overflow direction
Padding
- sets 'space' between the content and edge of a class
- applicable to any class
- add '-left', '-right', '-top', '-bottom' to set padding on left, right, top and bottom side differently
padding
values:
sizein-px - 100%
shortcut: padding: topvalue rightvalue bottomvalue leftvalue ;
Position
- sets position of the class
- applicable to any class
position
values:
relative
↳ original position is it's default position
fixed
↳ relative to browser window
absolute
↳original position is it's default position but it's default z-index
is lower than the other modules
scroll
↳puts scroll on both the x and y axis disregarding the overflow direction
Text
- sets how the text is displayed
- applicable to any class
text-align
values:
right - left - center - inherit
text-decoration
values:
overline - line-through - underline - blink
text-shadow
values:
2px 2px 3px #fff
↳horizontal-displacement vertical-displacement blur-radius shadow-color
text-transform
values:
uppercase - lowercase - capitalize
Visibility
- sets how the class is displayed
- applicable to any class
visibility
values:
visible - hidden
Z-index
- I don't really know how to describe this but...it's like layers in photoshop
- applicable to any class
z-index
values:
numbers
WITHOUT POSITION PROPERTY
the lowest value(eg,1) is on the very top while the highest value(eg.999)
will be in the very back
WITH POSITION PROPERTY
the highest value will be on the very top while the lowest will be on the
very back
