CSS Syntax Flashcards
(25 cards)
Comments in CSS
/* comment goes here */
Display properties
none, inline, block, inline-block, flex, grid
properties to align text
left, center, right
width property values
auto, %, em, vh, …. others?
CSS class selector
.class { }
CSS id selector
id { } (only 1 per html page)
Select all elements with both class c1 and c2 in the class attribute
.c1.c2 { }
Select all elements with element ‘c2’ that is a descendant of ‘c1’
.c1 .c2 { }
Select ALL elements
*
Select ALL elements ‘e’ with class ‘c’
e.c
Select ALL elements ‘e1’ and elements ‘e2’
e1, e2
Select ALL elements ‘e2’ WITHIN ‘e1’ elements
e1 e2
Select every ‘e2’ PRECEDED by an ‘e1’
e1 ~ e2
Set font size
font-size: xx-small, x-small, small, medium, large, larger, x-large, xx-large or a %, em, px, etc.
Set the background color for an element
body { background: yellow; }
General padding attribute
padding: top, right, bottom, left
Options for ‘position’ property
static (default)
relative, fixed, absolute, sticky
Meaning of the ‘static’ position property
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
Meaning of the ‘relative’ position property
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Meaning of the ‘fixed’ position property
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Meaning of the ‘absolute’ position property
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A “positioned” element is one whose position is anything except static.
Meaning of the ‘sticky’ position property
An element with position: sticky; is positioned based on the user’s scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).
Syntax of a media query
@media only screen and (max-width=395px) { }
Ways to insert CSS into HTML documents
- Internal CSS : The internal style is defined inside the element, inside the head section.
- Inline CSS: within the ‘style’ attribute of the element
- External CSS: <link></link>
