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