Cascading Style Sheets
12 Sep 2018CSS
- Syntax
- selectors
- select by id
#id - select by element type
p {text-align: center; color: red;} - select by class:
.center - combined:
p.center - group:
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } - comments:
p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */
- select by id
- refer to style sheet:
- External style sheet
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> - Internal style sheet
<head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> - Inline style
<h1 style="color:blue;margin-left:30px;">This is a heading</h1> - Cascading Order: all the styles will “cascade” into a new “virtual” style sheet by the following rules:
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section)
- Browser default
- External style sheet
- Colors
- Background Color:
background-color:Tomato; - text color:
color:MediumSeaGreen; - border:
border:2px solid Violet; - Color values:
rgba(255, 99, 71, 0.5), or hex:#ee82eehsla(9, 100%, 64%, 0.5)- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
- Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
- Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
- Shades of gray are often defined using equal values for all the 3 light sources:
rgb(180, 180, 180)hsl(0, 0%, 0%)
- Background Color:
-
backgrounds
body { background-color: lightblue; background-image: url("paper.gif"); background-repeat: repeat-x|no-repeat; background-attachment: fixed; background-position: right top; background-size: 300px 100px; background-size: auto|length|cover|contain|initial|inherit; }short:
background: #ffffff url("img_tree.png") no-repeat right top; background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;When using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- Borders
p.one { border-style: solid; border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; border-width: 5px; border-color: red; border: 5px solid red; border-radius: 5px; border-collapse: separate|collapse|initial|inherit; } - Margins
- Paddings
- Height/Width
- Box Model
- Outline
- Text
h1 { color: blue; text-align: left|right|center|justify|initial|inherit; text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit; text-decoration-line: none|underline|overline|line-through|initial|inherit; text-transform: uppercase|lowercase|capitalize; text-indent: 50px; letter-spacing: 3px; line-height: 0.8; direction: rtl; word-spacing: 10px; text-shadow: 3px 2px red; } - Fonts
- Icons
- Links
- Lists
- Tables
- Display
- Block
- inline
display: none|inline|block;
- max-width
- postion
position: static|relative|fixed|absolute|sticky
