Sara's Notes - CSS Intro

SIMPLE SELECTORS

Element selectors: has no symbol, just the element name (p, a, ul, li, h3, etc), targets all elements of a given type

 

Class selectors: has a dot . followed by a class name, the class name can be anything but cannot have spaces, elements can have more than one class

ID selectors: has a pound # followed by an ID name of a given element, the ID name can be anything but cannot have spaces, each ID name must be unique within the document - unpredictable behavior occurs if multiple elements have the same ID

Universal selector: is the class name of a single star * that allows the selection of all elements in a page. Think twice before using this selector because its use in large web pages will make your page load slowly.

ATTRIBUTE SELECTORS

[attr] selects all elements with the attribute [attr] whatever its value, name of the attr can be anything but cannot have spaces

[attr=val] selects all elements with the attribute [attr] but only if its value is val

[attr~=val] selects all elements with the attribute [attr] but only if val is one of a space-separated list of words contained in attr’s value

PSEUDO-CLASSES & PSEUDO-ELEMENTS

Pseudo-classes: how to edit how an element acts in a certain state, a colon ‘:’ and keyword following a selector (selector:keyword). Don’t try to memorize all of the possible iterations, here are the ones you'll use the most:

a {how the link will act while active]

a:visited {how the link will act after being clicked on}

a:hover {how the link will act while being hovered over with the cursor}

a:active {how the link will act while being clicked on}

a:focus {how the link will act when clicked on or while using tab to navigate page elements}

 

Pseudo-elements: how to select a certain part of an element, two colons ‘::’ and keyword following a selector ([element^=text::keyword) so selecting a specific type of element that’s followed by specific text

::first-letter controls the first letter of a paragraph

::first-line controls the first line of a paragraph

::selection controls the part of a document that has been highlighted by the

user

COMBINATORS AND GROUPS OF SELECTORS

Group of selectors (A, B) any element matching A and/or B, separated with a comma because it’s a list

Descendant combinatory (A B) any element matching B that is a child of an element matching A, nothing separating the elements because they’re being combined

Child combinator (A > B) any element matching B that’s a direct child of an element matching A

Adjacent sibling combinatory (A + B) any element matching B that is the next sibling (next child of the same element) of an element matching A

General sibling combinatory (A ~ B) any element matching B that is one of the next siblings (next children *plural* of the same parent) of an element matching A

CSS VALUES AND UNITS

Numeric values: specify an element’s length, width, border thickness, or font size. The two numeric value units that are used:

  1. pixels (px)- absolute units, will always be the same size regardless of other settings. Used for margin, padding, etc border-width.
  2. (em) relative unit, 1em is the same as the font size of the current element. Example: could be used when creating a custom bullet to size to be scaled to fit the font size of the list

Unit-less values: Used to completely remove the margin or padding of an element just use zero. Used to edit line height with the value acting as a multiplying factor. Also used to control the number of times an animation will play (animation-iteration-count).

Percentages: specify an element’s size relative to a parent container, percentage of their parent container’s width, visual size will change as the window is resized

Liquid layout- shifts as the browser viewport size changes, used to ensure that it will always fit the screen across various device screen sizes

Fixed width layout- stays the same regardless

COLORS

Keywords- list of 165 different words that represent a color, pure colors such as red, blue, black, white, etc

Hexadecimal- can represent ANY color you want to use, consist of a pound symbol (#) followed by 6 hexadecimal numbers (values between 0 and f: 0123456789abcdef), pairs of values represent one of the color channels (red/green/blue) and the specific value out of all 256 available for each

RGB- rgb(_,_,_) function where each channel is represented by a decimal number 0-255

Opacity- the transparency of the selected element and its children

 

CASCADE AND INHERITANCE

CSS (Cascading Style Sheets): cascade/order of rules is key, what determines

  1. Importance !important this declaration will always win over all others, use sparingly
  2. Specify- how specific a selector is, or how many elements it could match
    1. High specificity= ID selector
    2. Mid specificity= class selector
    3. Low Specificity= element selectors
    4. Universal selector (*), combinator (+, >, ~) have no effect on specificity
    5. Specificity goes up with the more elements it controls/effects
  3. Source Order- if competing selectors have the same importance and specificity then source order decides which rule wins; source factor determines that a later rule wins over earlier rules

Inheritance- some property values applied to an element will be inherited by that element’s children and some wont, mainly common sense but here’s the link to the list of which CSS rules get inherited and which ones don’t here

 

THE BOX MODEL

Every element is structures within a rectangular box inside the document layout

The box model
A diagram of the box model and its components.

BOX PROPERTIES

Content box- the actual content of the element (text, image, widget, etc)

Width/Height- set the width and height of the content box

Padding- the “inner margin”, space between the content box and the border

  • Give one value to padding to effect all 4 sides of the box
  • padding-top, padding-right, padding-bottom, padding-left control each side separately

Border between the padding and the margin

  • default= zero (invisible)
  • give a width, style, and color value to border to be applied to all 4 sides of the box
  • border-top, border-right, border-bottom, border-left control each side of the border separately
  • border-width controls the thickness of the border line
  • border-style controls the style, options: solid, dashed, dotted, double
  • border-color controls the color

Margin- surrounds the CSS box, space between the border and the next element’s box

  • Give one value to margin to effect all 4 sides of the box
  • margin-top, margin-right, margin-bottom, and margin-left control the different side margins separately

TYPES OF CSS BOXES

display: block / inline / inline-block

Block: defined as a box that’s stacked upon other boxes

Inline: flows with the document text, will appear on the same line as surrounding text and will move text but cannot move block boxes, has line breaks

Inline-block: combination of inline & block boxes, flows with surrounding text and inline elements but maintains the integrity of a block, it can be styled like block boxes, and does not break over lines

 

BACKGROUND CLIP

background-clip: sets whether an element’s background color or image extends underneath its border

padding-box: background extends to the outer edge of the padding (but not underneath the border)

border-box: background extends to the outer edge of the border

content-box: background extends only within the content box

text: background paints the text itself