COMP 2500 - Exam 3

Order of the Box model (inner to outer)

(Content, Padding, Border, Margin)

how to declare a varible

--my-variable: value;

Manipulate the border

Control: specifies the border's thickness, style and color (2px solid blue;)

Manipulate the padding

Control: specifies the padding thickness (5px;)

selectors

Element, class, ID, pseudo-class, descendant

Grid layout

a CSS layout mode that divides a web page into a rectangular grid in which to position page elements

flexbox

a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.

flex item

a child element of a flex container that is positioned and sized according to various CSS flexbox properties

grid item

a child element of a grid container that is by default placed into a single grid cell

Inheritance

a child will inherit a parent tags style

visited

a visited link

grid container

an element that has the CSS property display: grid to create a block-level grid container or inline-grid to create an inline grid container

inline style

attributes

Border rendered

can be either colored or transparent, if transparent, the border will be displayed with the same color as the padding.

clear

can stop elements from floating

font-family

changed the font family ("Time New Roman" or serif)

font-size

changed the font size (120%, small, or 12px)

font-style

changes the text style (normal, italic, or oblique)

font-weight

changes the text weight (normal, bold)

Margin

contains all three boxes and adds a transparent area around the border

Padding

contains the content box and adds a transparent area around the content

Border

contains the padded content and adds an optionally colored area around the padding

CSS variables

custom CSS property that defines a value

flex-direction

defines the direction of flex items within the containers (row - default, row-reverse, column, column-reverse)

Grid-template-columns

defines the grid container's number of columns and optionally the width of each column

box model

describes the size of each element as a series of nested boxes

flex-wrap

determining if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items (nowrap - default, wrap, wrap-reverse)

Content retendered

displayed with a background according to the element's background color

flex container

element that has a CSS property display to set flex to create a block-level flex container or inline-flex.

Grid-template-columns Example

grid-template-columns: 50px 90px auto auto; - first column is 50px, second column is 90px, third and fourth column are automatically sized to the remainder of the grid width

embedded stylesheet

in html, but in style tags

absolute size

independent of screen resolution

ways of applying CSS styles

inline, embedded stylesheet, external stylesheet

padding Rendered

is transparent and will be displayed using the same color as the element's background

justify-content (flex)

justifies the flex items within the container (flex-start - default, flex-end, center, space-between, space-around)

element

matches elements with the specified element names

hover

mouse is hovering over the element

text-decoration

property can add or remove text decorations (underling, line-through)

text-align

property changes the horizontal alignment of text for an element (left, right, center, justify)

text-transform

property converts letters (uppercase, lowercase, capitalize)

grid-template-rows

property defines the height of each row

justify-content (grid)

property horizontally aligns the grid items inside the grid container (start, end, center, stretch, space-around, space-between, space-evenly)

grid-area

property lists the grid item's started and ending row and column numbers

align-content

property vertically aligns the grid items inside the grid container (start, end, center, stretch, space-around, space-between, space-evenly)

active

selected link

external stylesheet

separate css file

flex-basis

sets size of flex item (percent)

relative size

size depends on screen resolution

Pseudo-class

specific with a colon character followed by a pseudo-class name (:pseudoClass)

ID

specified with a hash character followed by the ID name (#idname)

Class

specified with a period character followed by the class name (.className)

Descendant

specified with a selector followed by a space and another selector, Ex. h2 em {color: blue;} selects the em elements contained in h2.

Grid-template-area

specifies the grid layout using the named grid items

manipulate the margin

specifies the margin thickness (10px;) or 3-values: top, right, left, bottom or 4-values: top, right, bottom, left;

float

specifies whether the element will float to the right or left of the element's parent container

Content

the innermost box contains the content of the element, such as text and images;

Conflicting Styles

the most recent style tag will apply to the text

inline-block

the top and bottom margins/paddings are respected, sets the width and height of the element

Margin is rendered

transparent and will be displayed using the background color of the parent element.

link

unvisited link

url()

used with the background-image, where the URL indicates the location of the image

how to call a varible

var(--my-variable)

Pseudo-classes

visited, link, active, hover

:root selector

will define a variable in the global scope