CSS Guide

Ways to Add CSS

• External CSS → HTML code includes reference to external style sheet in head section
• Internal CSS → HTML code includes style element directly in head section
• Inline CSS → Adds style attibute directly to relevant HTML element (inline style will override any external and internal styles)

---

CSS Syntax

Selector → Selects the HTML element to be styled
Declaration → Includes CSS property name and value, separated by a colon; multiple declarations separated by semicolons

---

CSS Selectors

Selector	Meaning
#id	Select a specific element based on id attribute
.class	Select any elements with specific class attribute
*	Universal selector (selects all elements on page)
h1, h2, p	Group selector separated with a comma
div > p	Selects direct children of a specified element
div p	Selects descendents of a specified element
div + p	Adjacent sibling selector: Selects the element directly after another specific element
div ~ p	General sibling selector: Selects all elements that are next siblings of specific element

---

Commonly Used Properties

Property	Meaning	Sub-Property (ex:background–color)	Sample Values
color	Specify text color		predefined color, RGB, HEX
text	Specify text formatting	align, decoration, transform, indent	center, none, uppercase
background	Specify background effects	color, image, repeat, attachment, position	url("image name"), no-repeat, scroll, top left
margin	Create space around elements, outside of any defined borders	top, right, bottom, left	px (pixels), % (relative to parent element), em (relative to font size)
border	Style an element's borders	width, style, color	1px solid black
padding	Create space around element's content, inside of any defined borders	top, right, bottom, left	px (pixels), % (relative to parent element), em (relative to font size)
display	Specify if/how an element is displayed		inline, block, flex, grid