3. Controlling HTML with CSS Flashcards

1
Q

Allow you to separate your content from its presentation

A

Cascading Style sheets

CSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Handles the content of web browsers

A

HTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

One way to incorporate CSS code is to save all of your markup to file using the

A

.css extension that accessible to your .html files

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Another way to use CSS is to add it between <style> tags within this section of your HTML</style>

A

<head>
</head>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Tag uses the stylesheet attribute and points to a CSS file called main.css thats in the web root directory on this server

A

rel

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

paragraph

A

p

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

element will be applied through the id=attribute

A

special

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

targets elements with a class

A

.highlight

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

targets elements based on relationship

A

list-style-type: square;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

target elements based on attribute values

A

input[type=”text’] {
border: 1px solid gray;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

classes are not traditional classes but class controls

A

pseudo class.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

normal at-rest appearance of a button my have

A

blue background
white text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

hovering will cause the background to

A

turn light blue

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

mechanism that allows properties defined on parent elements to be inherited by their chiled elements

when property is set on a parent element its value is automatically inherited by its descendents unless overridden.

A

CSS Inheritance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

HTML exists within this that uses the id=attribute to adopt the parent style

A

<div>
</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

html style attribute overrides css rules in style tag and css file

A

Inline css

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

takes precedence over a less specific one

A

more specific selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Rules that appear later in the code override earlier rules if both have the same

A

specificity

19
Q

CSS rule that always takes precedence

A

!important

20
Q

root element

A

rem

21
Q

viewport height

A

vh

22
Q

Exist to enable flexible and responsive web design and provid efficient ways to structure and align elements within containers - allowing developers to create complex and dynamic layouts

A

CSS Flexbox

CSS Grid

23
Q

Designed for one-dimensional layouts typically used for arranging items along a single row or column

flexible box model that distributes space among elements, adjusting their sized and positions based on available space and alignment rules

A

CSS Flexbox (Flexible Box Layout)

24
Q

Parent element that holds a collection of flex items and is defined by applying

display:
flex or display:
inline-flex:

To the container

A

Flex Container

25
Q

Child elements of a flex container that automatically flex and adjust their sizes to fill the available space within the container.

flex-grow
flex-shrink
flex-basis

A

Flex Items

26
Q

Determine the direction of the main axis of the flex container and can be set as
row (L to R)
column (top to bottom)
row-reverse
column-reverse

A

Flex Direction

27
Q

Defines how flex items are aligned along the main axis of the flex container

flex-start
flex-end
center
space-between
space-around

A

Justify Content

28
Q

Controls the alignment of flex items along the cross axis of the flex container

A

Align Items

29
Q

Used to override the Align Items value for individual flex items.

A

Align Self

30
Q

Two dimensional layout system that allows the creation of complex grid based layouts with rows and columns that provide precise controle over the positioning and sizing elements within a grid

A

CSS Grid

31
Q

Parent element that establishes a grid context by applying display: grid to the container.

A

Grid Container

32
Q

Child elements of a grid container tht are positioned within the grid and are automatically placed, based on the defined grid lines and cells.

A

Grid Items

33
Q

Properties for defining the columns and rows of the grid by specifying their sizes and tracks.

You can use values like fixed lengths, percentages or flexible united like fr (fractional unit)

A

Grid Template Columns

Grid Template Rows

34
Q

Specifies the spacing between grid cells thus allowing control over the gaps between rows and columns

A

Grid Gap

35
Q

Shorthand property that defines a named grid area, allowing elements to span across multiple rows and columns in the grid

A

Grid Area

36
Q

CSS offers various accessibility features to enhance the usability features to enhance the usability and inclusivity of websites for people with

A

Disabilities

37
Q

CSS lets you specify alternative text for images using the

beneficial for screen readers that rely on alt text to convey meaning of images to visually impaired users.

A

Content Property

38
Q

You can create high contrast style sheets that increase content visibility for users with

modifying colors, backgrounds and text properties can help ensure that the content remains distinguishable and readable in different contrast settings.

A

low vision or color blindness

39
Q

Useful for users who navigate websites using the keyboard or assistive technologies

by highlighting the focused element - CSS helps improve the visibility and navigation for individuals with motor or visual impairments.

A

focus styles

40
Q

Can hide / skip navigation links until they receive focus thus allowing users to bypass repetitive navigation menus and directly access the main content of a webpage

essential feature for users who rely on screen readers or keyboard navigation to quickly navigate through the website.

A

links

41
Q

CSS can be used in conjunction with this to provide additional information about structure and behavior elements in relation to assistive technologies

A

Accessible Rich Internet Applications - ARIA

42
Q

By applying appropriate ARIA roles and states - CSS helps make complex components more understandable and navigable for users with

A

Disabilities

43
Q

CSS offers techniques to hide non-essential content such as off-screen elements or elements made visible only when triggered by specific user interactions and this approach is useful for screen readers, ensuring that the relevant content is presented in a

A

logical order while reducing unnecessary noise.