Scribd
Upload
29 views21 pages

Lab 03

Uploaded by

gqygpn4srt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views21 pages

Lab 03

Uploaded by

gqygpn4srt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

인터넷과 웹기초

CSS 실습 3
External CSS
• External CSS
• An external CSS style sheet must be saved with a .css extension
• The external .css file should not contain any HTML tags

3
Internal CSS
• Internal CSS
• The internal style is defined inside the <style> element, inside the head sec-
tion

4
Inline CSS
• Inline CSS

5
Multiple Style Sheets Example
• When they are same priority

6
Simple selectors
• 1. id selector

7
Simple selectors
• 2. class selector

8
Simple selectors
• 3. element selector

9
Simple selectors
• 4. universal selector

10
Simple selectors
• 5. grouping selector

11
Combinator
• 1. Descendant selector
• It matches all elements that are descendants of a specified element

12
Combinator
• 2. Child selector
• It selects all elements that are the children of a specified element

13
Combinator
• 3. Adjacent sibling selector

14
Combinator
• 4. General Sibling Selector

15
Specificity hierarchy
• Specificity
• CSS selector has its place in the specificity hierarchy
• Specificity level
• Inline styles : 1000
• IDs : 100
• Classes/Pseudo-classes/attributes : 10
• Elements/Pseudo-elements : 1
• Universal selector : 0

16
Specificity hierarchy

17
Specificity hierarchy

18
Colors
• Colors
• It is specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.
• CSS/HTML support 140 standard color names.
• Tip. Using html/css extension in vscode can help you

19
Colors
• RGB colors
• Using RGB value
• rgb(red, green, blue)

• HEX colors
• Using hexadecimal value
• #rrggbb

• HSL colors
• Using hue, saturation, lightness
• hsl(hue, saturation, lightness)

20
CSS Color

21

You might also like