a:first-child
vs. a:first-of-type
: background
, unlike background-color
, allows more options than just designating color Grouping components together by function for implementation
Layout design (screen composition, element allocation)
Applying typographic design
✨ Developed sensibility for color/layout/alignment a plus
✨ Experience analyzing websites & apps with great UX, thinking deeply about UX
CSS is incredibly difficult to master and implement meaningfully especially when projects grow in size. 한 페이지에서 특정 HTML 요소를 CSS로 스타일링 하기 위해서 CSS 파일 중 한 부분을 변경했더니, 다른 페이지의 HTML 요소가 변경되는 의도치 않은 상황이 연출되곤 함.
Best practices exist to handle the unique quirks and complexity of CSS. Model examples, industry recommendations will be covered in the following weeks
id | class |
---|---|
select with # | select with . |
applicable to only element in one document | many elements share the same property |
used for identifying a unique, specific element | used for style classification |
px
, pt
etc.%
, em
, rem
, ch
, vw
, vh
etc.'rem'
for general use: vw
, vh
. *examplecolor
, background-color
, border-color
background
vs. background-color
: font-family
(define fallback fonts in "").emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; }
font-size
, font-weight
, text-decoration
(underline, strikethrough), letter-spacing
, line-height
text-align
(left, right, center, justify) - what about vertical alignment? TBC
border
margin (top, right, bottom, left)
use negative values to have elements overlap
if content size exceeds containing box size, use: overflow: auto
; overflow: hidden
content-box vs. border-box: common beginner's mistake is equating the content area with box size, and neglecting the added margins and paddings which determines the overall box size. To avoid accidentally designating a bigger size to a nested box, use border-box
property.
* {
box-sizing: border-box
}
/* enabling border-box includes border + padding + margin width to the content width size.
this would apply it to the whole document. */
specificity generally determines priority of conflicting css properties
application priority given to the most specific element
Global selector : * { margin: 0 }
Tag selector : h1 { }
, div { }
, section, h1 { }
ID selector : #only { }
class selector : .widget { }
, .center { ]
tag + id/class selector: p.p-tag {color: gray;}
, p#id1 { text-decoration:dotted }
, p#id1.class1 {background-color: purple; }
attribute selector : selects all elements with the specified attribute
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section [id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
child combinator : a > b { }
- all direct 'b'-type children of 'a'
descendent combinator : a b { }
- all 'b'-type descendents of 'a' (incl. all nested 'b' elements)
general sibling combinator : a ~ b { }
- all iterations of 'b'-type that have a common parent with 'a'
adjacent sibling combinator : a + b { }
- 'b'-type sibling immediately following an 'a' sibling (1st one sharing a parent with 'a' vs. being nested inside 'a')
a:link { } /*selects unvisited links*/
a:visited { } /*selects visited links*/
a:hover { } /*selects links that mouse hovers over */
a:active { } /*links being activated (clicked on) - that instant*/
a:focus { } /*links that were just activated, or elements just targetted by the keyboard*/
input:checked + span { } /*span element that appears right after checked input*/
input:enabled + span { }
input:disabled + span { }
p:first-child { } /*first child of a tag structure that is p type
if other siblings of different types are listed before it, not selected */
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { } /*includes ones within a structure with just 1 child*/
div > div:nth-child(4) { }
div:nth-last-child(2) { } /* includes second to last div's amongst non-div siblings */
section > p:nth-last-child(2n+1) { }
p:first-of-type { }
div: last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
input:not([type="password]) { }
, div:not(:nth-of-type(2)) { }
input[type="text"]:valid { }
, input[type="text"]:invalid { }