Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

RevaturePaidTraining > CSS > Flashcards

CSS Flashcards

1
Q

What are the three types of CSS

A

Inline CSS
Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute.

Internal or Embedded CSS
This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.

External CSS
External CSS contains separate CSS files which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS properties written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.

This can be achieved by using <link></link> tag. The <link></link> element has rel and href attributes. The rel specifices the relationship between the current document and the linked document.

<head>
<link></link>
</head>

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

If an inline style conflicts with a style from an external stylesheet, the style from the stylesheet will be used

A

False
The inline style trumps

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

Describe the CSS box model

A

The CSS box model used to determine how our web page is rendered by browser. It considers each element on the page as a box, CSS allows you to apply different properties that define where and how that element appears. Web pages are made up of rectangular boxes arranged and related to each other.

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

what are the 4 parts ?

A

very box has 4 parts - margin, border, padding and content. The margin is the outermost box, then the border, then padding, then finally content is innermost. All box sizes/formatting can be styled with CSS.

Margin - It is outermost. It is useful to separate the element from its neighbors. The dimensions are given by the margin-box width and the margin-box height.

Border - It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.

Padding - It is a space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.

Content - It consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.

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

CSS Border Property

A

The CSS border property allows to style the border area of a box. The properites and corresponding vlaues with examples covered under the CSS border are tabulated below

border-width medium, thin, thick, length

border-style none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid

border-color hex-value for colors

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

CSS Margin Property

A

The CSS margin property is similar to the CSS border property, but it sets the margins around the sides of an element’s box instead of the border. It also takes one, two, three, or four values separated by white spaces. The shorthand properties are margin-top, margin-right, margin-bottom, and margin-left to set a margin on respective sides.

p {
margin-left: 10px;
margin-right: 30px;
}
h1{
margin: 25px 50px;
}

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

CSS Position Property

A

The position property defines how an element will be arranged on a page. The Syntax for the position property is selector {position: value}. The property values are static, relative, absolute, fixed, or inherit.

static - The element’s box is arranged automatically consistent with the normal flow.

relative - The element’s box position is relative to its normal flow position. You can adjust the normal flow position by using the top, bottom, left and right properties.

absolute - The element’s box arranged to an absolute position with reference to its containing block. Its containing block is that the nearest ancestor element that has its position property set to relative, absolute, or fixed. The top, right, bottom, and left properties are used to set the offset of the element’s box with reference to its containing block.

fixed - The element’s box position is offset from its browser window by using the top, right, bottom, and left properties. The element’s box won’t move when the browser window is scrolled.

inherit - The inherit keyword is employed to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property is going to be used.

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

CSS Color property

A

The color property is used to specify the foreground color of text.The color properties are set using 5 different color notation types which is listed below:

a {color: red;}
div {color: #3c5;}
h1 {color: #ffa500;}
div {color: rgb(100,20,255);}
#id1 {color: rgb(30%,50%,70%);}

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

CSS text-align property

A

The text-align property is used to align the content inside the element. The text inside the element can be aligned in 4 ways - left, right, center and justify.

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

What is a responsive web design

A

Responsive Web design is the approach that allows websites and pages to render (or display) on all devices and screen sizes by automatically adapting to the screen, whether it’s a desktop, laptop, tablet, or smartphone. Responsive web design works through CSS, using various settings to serve different style properties depending on the screen size, orientation, resolution, color capability, and other characteristics of the user’s device. It is a combination of flexible grids, flex boxes, flexible images, and media queries.

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

Class Selector

A

In CSS, the class selector is a name preceded by a period (“.”). It uses the class attribute of an HTML element to match the specific HTML element. We can have a Class selector specific to an HTML element

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

ID Selector

A

The ID selector is a name preceded by a hash character (“#”). It uses the id attribute of an HTML element to match the specific HTML element. The id of an element should be unique within a page, so the id selector is used to select one unique element.

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

What is the adjacent sibling selector

A

An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.

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

What is the general sibling selector

A

The general sibling combinator selector is very similar to the adjacent sibling combinator. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.

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

Element Selector

A

The element selector selects HTML elements by their name / tag name like a, h1, div, p etc.
The element selector is a way to select all the elements with a given tag name in a document, and apply the same styles to each element with the tag name.
Note that you should only write the tag name, and not write brackets around the tag name — h1,

p {
text-align: center;
color: blue;
}

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

Universal Selector

A

The universal selector denoted by an asterisk (*), matches all the elements on the page. If any other specific selector exists on the element, then the universal selector will be omitted.

16
Q

The grouping selector

A

The CSS grouping selector is used to apply a common style for the number of elements on the page. You can group the selector using comma (,) separator. It allows you to specify the same properties and rules for more than one element at the same time. This reduces the code and extra effort to declare common styles for each element.

17
Q

Child selectors

A

Child Selector selects all the elements that are the children of a specified element. The Syntax of Child Selector is element > element { property: value;} which selects those elements which are the children of specific parent. The left side of > is a parent element and on the right is the children element.

div > p {
background-color: red;
font-family: Arial;
}

18
Q

Descendent selectors

A

The descendant selector selects all the elements which are a child of the element. It allows you to limit the targeted elements to the ones who are descendants of another element. The syntax is element element { property: value; } you simply write the parent(s), separate with space, and then the actual element you want to target.

19
Q

Pseudo Class Selector

A

Pseudo Class Selector is used to specify the state of an element. It let us to apply a style to an element which are related with external factors like the history of the navigator ( like :visited), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

20
Q

Pseudo Element Selector

A

Pseudo-elements allows to style the specified parts of an element that is not available under DOM tree. It let us to apply to style the first letter or first line of an element’s content, change the font of the first line of a paragraph, etc.

::first-letter - Selects the first letter of the text contents inside an element. ::first-line - Selects the first line of the text contents inside an element. ::before - Used to insert generated content immediately before an element. ::after - Used to insert generated content either before or after an element on the page generate content immediately after an element.

21
Q

CSS Variables topic

A

allow you to define reusable values within CSS stylesheets. They provide a way to store and reference values that can be used throughout your CSS code.

:root {
–primary-color: #007bff;
}
h1 {
color: var(–primary-color);
}

RevaturePaidTraining (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions