Brainscape's Knowledge GenomeTM

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


See full index

WEB PROGRAMMING 12 - 1st Quarter > Cascading Style Sheet > Flashcards

Cascading Style Sheet Flashcards

1
Q

used to control the style of a web document in a simple and easy way.

A

CSS (Cascading Style Sheet)

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

CSS is the acronym for?

A

Cascading Style Sheet

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

Enumerate the key advantages of learning css:

A
  • Create stunning website
  • Become a web designer
  • Control Web
  • Learn Other Languages
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  • CSS handles the look and feel part of a web page.
  • Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used and others
A

Create Stunning Website

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

If you want to start a career as a professional web designer, HTML and CSS designing is a must skill

A

Become a web designer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q
  • CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document.
  • Most commonly, CSS is combined with the markup languages HTML or XHTML.
A

Control web

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

Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.

A

Learn other languages

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

What is the output of this?

<!DOCTYPE html>

<html>
<head>
<title>This is document title</title>
<style>

        h1 {
            color: red;
        }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
A

” Hello World! “ ( the text color is red)

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

Enumerate the application of css:

A
  • CSS saves time
  • Easy Maintenance
  • Pages load faster
  • Superior styles to HTML
  • Multiple Device Compatibility
  • Global web standards
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

You can write CSS once and then reuse same sheet in multiple HTML pages.

A

CSS saves time

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

To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

A

Easy maintenance

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

If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.

A

Pages load faster

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q
  • CSS has a much wider array of attributes than HTML,
  • Give a far better look to your HTML page in comparison to HTML attributes.
A

Superior styles to HTML

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

Style sheets allow content to be optimized for more than one type of device.

A

Multiple Device Compatibility

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q
  • HTML attributes are being deprecated and it is being recommended to use CSS.
  • start using CSS in all the HTML pages to make them compatible to future browsers.
A

Global web standards

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

an HTML tag at which a style will be applied.

A

selector

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

A type of attribute of HTML tag which cover all the HTML attributes are converted into CSS properties.

A

Property

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

assigned to properties. An example is color property can have value either red

A

Values

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

syntax of CSS rules:

A

selector { property: value }

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

syntax that selects all the elements in a document

A

*{ color:red;}

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

selects all the elements in a document

A

Universal Selector

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

syntax that selects all elements that match selector

A

ul {color:red; }

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

Selects all elements that match selector

A

Type selector

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

syntax selects elements whose id attribute’s value matches the selector

A

intro { color=red; }

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

Selects elements whose id attribute’s value matches the selector

A

ID selector

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

Selects elements whose class attribute’s value matches the selector.

A

Class selector

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

syntax that applies to all elements whose class attribute’s value is “side”

A

.side { color-red; }

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

syntax that applies to all <p> elements whose class attribute’s value is “side.”

A

p.side { }

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

selector Selects elements whose class attribute’s values match the selector.

A

Multiple class

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

syntax that applies to all elements whose class attribute values are “side front back.“

A

.side,.front,.back { }

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

Selects an element that is a descendant of another specified element.

A

Descendant selector

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

syntax that selects an element that is a descendant of another specified element.

A

div p { color-red; }

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

Selects an element that is a direct child of another specified element

A

Child Selector

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

Syntax that applies to only <p> elements that are direct children of a <div> element.

A

div> p{color-red}

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

Selects an element that is the next sibling of another element.

A

Adjacent sibling selector

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

syntax that applies to only the first <p> element after an <h3> element.

A

h3+p { color-red; }

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

Selects an element that is a sibling of another element.

A

General sibling selector

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

syntax that applies to all <p>elements that are siblings of an <h3> element.

A

h3~p { color-red; }

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

Selects an element that has a specified attribute or an attribute-value pair.

A

Attribute selector

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

syntax that applies to all <em> elements with a “lang” attribute.</em>

A

em(lang) { color-red; }

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

select elements based on name, id, class

A

Simple Selectors

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

select and style a part of an element

A

Pseudo-elements selectors

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

select elements based on a certain state

A

Pseudo-class selectors

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

select elements based on an attribute or attribute value

A

Attribute selectors

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

select elements based on a specific relationship between them

A

Combinator selectors

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

TRUE OR FALSE

  • The element selector selects HTML elements based on the element name.
    -Here, all <p> elements on the page will be center-aligned, with a red text color:
A

True

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

the id attribute of an HTML element to select a specific element.

A

CSS id selector

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

The id of an element is unique within a page, so the id selector is used to select one unique
element!

A

ID SELECTOR

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

To select an element with a specific id, write a _________ character, followed by the id of the
element.

A

hash (#)

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

selects HTML elements with a specific class attribute.

A

Class selector

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

select elements with a specific class, write a period (.) character, followed by the class name.

A

Class Selector

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

selects all the HTML elements with the same style definitions.

A

CSS grouping selector

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

what is the comment for CSS

A

/* and ends with */

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

True or False

  • You can add comments to your HTML source by
    using the <!--...-->
  • a combination of HTML and CSS comments:
A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q
  • are coded in the body of the web page as an attribute of an HTML tag.
  • The style applies only to the specific element that contains it as an attribute
A

Inline Styles

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q
  • Theses are coded in a separate text file.
  • This text file is associated with the web page by configuring a link element in the head section.
A

External Styles

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q
  • also referred to as internal styles) are defined within a style element in the head section of a web page.
  • These style instructions apply to the entire web page document.
A

Embedded styles

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

What kind of configuring cascading styles sheets is this?:

<!DOCTYPE html>

<html>
<body>
<p>CSNHS Web Programming</p>
<p>Senior High School</p>
</body>
</html>

A

Inline Styles

59
Q

Enumerate the configuring cascading styles sheets

A
  • Inline styles
  • External styles
  • Embedded styles
  • Imported
60
Q

second {

What kind of configuring css is this?

HTML :

«!DOCTYPE html>

<html>
<link></link>

<body>
<p>CSNHS Web Programming</p>
<p>Senior High School</p>
</body>
</html>

CSS:
#first {
font-size: 40px;
color: green;
text-align: center;
}

font-size: 30px;
color: red; }
A

External Styles

61
Q

CSS properties are saved in a separate text file with an extension of .css and is referenced from an HTML document using the <link></link> tag inside the head section.

A

External css

62
Q

syntax for external css link?

A

<link></link>

63
Q

the value of the rel attribute is?

A

stylesheet

64
Q

The value of the href attribute is the _______ of the style sheet file.

A

name

65
Q

The value of the type attribute is __________, which is the MIME type for CSS.

A

“text/css”

66
Q

What is the cascade (rules of precedence) ?

A

Browser defaults
|
external styles
|
embedded styles
|
inline styles
|
HTML attributes

67
Q

colors can also be specified using the _____________.

A

RGB values

68
Q
  • The formula is rgb(regreen, blue).
  • The parameter – red, green and blue has values from 0 to 255 which defines theintensity of the color.
A

RGB value

69
Q
  • this is an extension of the RGB color values.
  • A stands for alpha channel is used to specify the opacity for a color.
  • The value of A ranges from 0.0 (fully transparent) and 1.0 (not transparent at all)
A

RGBA value

70
Q
  • The color value can also be specified using a hexadecimal value with the form #RRGGBB. RR, GG and BB stands for red, green and blue respectively.
  • It is expressed in hexadecimal values from 00 to ff.
A

HEX value

71
Q
  • color can be specified using hue, saturation, and lightness (HSL). The formula for this is hsl(hue, saturation, lightness).
  • Hue value is from 0 to 360 which is the degree on the color wheel. Saturation and lightness are
A

HSL value

72
Q

TRUE OR FALSE

CSS RGB Color
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255)
and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255)

A

TRUE

73
Q
  • an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
  • color value is specified with: rgba(red, green, blue, alpha)
    -The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
A

RGBA value

74
Q
  • a color can be specified using a hexadecimal value in the form:
  • # rrggbb where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
  • For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and theothers are set to the lowest value (00).
A

HEX value

75
Q
  • a color can be specified using hue, saturation, and lightness (HSL) in the form:
    hsl(hue, saturation, lightness)
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
  • Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
A

HSL colors

76
Q
  • can be described as the intensity of a color.
  • 100% is pure color, no shades of gray
  • 50% is 50% gray, but you can still see the color.0% is completely gray, you can no longer see the color.
A

Saturation

77
Q

this property specifies the background color of the element

A

background-color

78
Q

syntax for background-color?

A

h1 {
background-color:green;
}

79
Q

this property specifies an image to use as background of an element. When used, the image is repeated by default to cover an entire element

A

background-image

80
Q

Syntax for background-image?

A

body {
background-image:url(“sample.jpg”);
}

81
Q

a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white)

A

Lightness

82
Q

By default, the background-image property will repeat a background image to fill up the space allotted to the element.

A

background-repeat

83
Q

To prevent or control how the image will be repeated, background-repeat property is used.

A

background-repeat

84
Q

Repeat the image horizontally only

A

repeat-x

85
Q

Repeat the image vertically only

A

repeat-y

86
Q

Disable repetition of image both horizontal and vertical.

A

no-repeat

87
Q

this property specifies the position of the background image. By default, an image s positioned at the top left corner of the page.

A

background-position

88
Q

syntax for background-position?

A

body {
background-image: url(“paper.jpg”);
background-repeat: no-repeat;
background-position: right top;
}

89
Q

Changing this position using the possible values such as left center, left bottom, right center, right top, right bottom, center center, center top and center bottom

A

background-position

90
Q

this property specifies the background image if it should be scrolled or fixed. The values for this property could either be scroll or fixed.

A

background-attachment

91
Q

True or False

CSS provides a shorthand notation in specifying the background. The shorthand property will follow an order of property values. The order would be color, image, repeat, attachment and lastly, position

A

True

92
Q

this property specifies the color of the text.

A

color

93
Q
  • this property specifies the horizontal alignment of a text. Its valid values are right, left, center and justify.
  • By default, the value of this property is left aligned when text direction is left-to-right, and right aligned when text direction is right-to-left. For a justified text, each line is stretched to have an equal width for each line.
A

text-align

94
Q

To change the vertical alignment of the element, this property is used. Its valid values could be top, middle or bottom.

A

vertical-align

95
Q

-this property specifies the text decoration of the text.

A

text-decoration

96
Q

A link, by default, has an underline in the text. To remove it, ________________________ is used

A

text-decoration:none;

97
Q

This property is used to set the indention of the first line of the text.

A

text-indent

98
Q

True or False

The value of text-indent can be negative. If it is negative, then the first line will be indented to the left.

A

True

99
Q

The space between the character of the text can be set using this property.

A

letter-spacing

100
Q

This property will set the space between the line of text.

A

line-height

101
Q

The space between the words in a text can be set by this property.

A

word-spacing

102
Q

This property adds shadow to text. It can be used by specifying the horizontal shadow and the vertical shadow. The color and blur effect can also be added. This values are specified in order: horizontal shadow, vertical shadow, blur effect and color.

A

text-shadow

103
Q

This property sets the font family.

A

font-style

104
Q

True or False

It is recommended to have several font names in the font-family property. This is in the case that the first declared font family is not supported by the user’s browser, the second font will be used.

A

True

105
Q

True or False

To have more than one font family, each font will be separated by a comma. You can start specifying the font you want, and end with a generic family, in case there are no other fonts available.

A

True

106
Q

To specify an italic text, this property is used.

A

font-style

107
Q

enumerate the 3 values of font-style

A
  • normal which is the default
  • italic for italicized text,
  • oblique which is very similar to italic, but less supported.
108
Q

This property sets the weight of a font. Some valid values are normal, bold, bolder and lighter.

A

font-weight

109
Q

This property sets the size of the text.

A

font-size

110
Q

What is the difference between the absolute length and relative length?

A

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size while the Relative length units specify a length relative to another length property.

111
Q

Common units of the font size include px, em, %, in, cm, mm and pt. The px, in, cm, mm and pt are ____________ _______units.

A

absolute length

112
Q

On the other hand, em and % are _______ _________ units which specify its length depending on another length property.

A

relative length

113
Q

a font that is identified by name, such as Times New Roman or Helvetica, and based on a font definition file that is stored on the user’s computer or accessible on the web.

A

Specific font

114
Q

describes the general appearance of
the characters in the text but does not specify any particular font definition file.

A

Generic font

115
Q

a typeface in which a small ornamentation appears at the tail end of each character

A

Serif

116
Q
  • xx-small, x-small, small, medium (default), large, x-large, xx-large
    -Scales well when text is resized in browser; limited options for text size
A

Text Value

117
Q

-Numeric value with unit, such as 10 px
- Pixel-perfect display depends on screen resolution; may not scale in every brow-ser when text is resized

A

Pixel Unit (px)

118
Q

-Numeric value with unit, such as 10 pt
-Use to configure print version of web page; may not scale in every browser when text is resized

A

Point Unit (pt)

119
Q

-Numeric value with unit, such as .75 em
-Recommended by W3C; scales well when text is resized in browser; many options for text size

A

Em Unit (em)

120
Q

-Numeric value with percentage, such as 75%
-Recommended by W3C; scales well when text is resized in browser; many options for text size

A

Percentage Value

121
Q

-it is used to specify the color of the border.
-It is also possible to change the individual color of the border (top, bottom, left and right).
- To do this, the property border-bottom-color, border-top-color, border-leftcolor and border-right-color are used.
-Like other border properties, it has longhand versions for specifying colors of individual edges, which are border-top-color, border- right-color, border-bottom-color, and border-leftcolor

A

borfer-style

122
Q

the style of border can also be changed. Normally, the value solid is used since it creates a single solid line border.

A

border-color

123
Q

True or False

But there are a lot of values that can be used for border-style. It could be none (no border), dotted (series of dots), dashed (series of short lines), double (two solid lines) and many more. Just like border-color, it is also possible to change the style of each side of the border

A

True

124
Q
  • it specifies the width of an element border. The value of this property can be set in using length (px, pt or cm) or set to thin, medium or thick.
  • The longhand properties are border-top-width, border-right-width, border-bottom-width, and border-left-width
A

border-width

125
Q

Application of Value: Value is assigned to all four edges.

A

Number of Value: 1

126
Q

Application of Value: First value is assigned to top and bottom, and second value is assigned to right and left.

A

Number of Value: 2

127
Q

Application of Value: First value is assigned to top, second to right and left, and third to bottom.

A

Number of Value: 3

128
Q

Application of Value: First value is assigned to top, second to right, third to bottom, and fourth to left.

A

Number of Value: 4

129
Q

The space between the content of the element and its border is the ________

A

Padding

130
Q

set how much this space should appear in the page. The shorthand property works the same as the shorthand property of margin. It is also possible to change the padding individually.

A

Padding

131
Q

Values of the Shorthand border-six

defines the top padding of an element.

A

padding-top

132
Q

Values of the Shorthand border-six

defines the left padding of an element.

A

padding-left

133
Q

Values of the Shorthand border-six

defines the top padding of an element.

A

padding-top

134
Q

Values of the Shorthand border-six

defines the bottom padding of an element.

A

padding-bottom

135
Q

sets the space around an HTML element. This property can have a negative value which will result in overlapping of content.

A

margin

136
Q

True or False

Margin will not be inherited by the child element. A shorthand property of margin can be used to set in one declaration the top, right, bottom and left margin, in this particular order. The auto value of this property will automatically set the margin left and right of the element equally.

A

True

137
Q

True or False

The auto keyword leaves it to the browser to determine margin values as it sees fit.

A

True

138
Q

defines the top padding of an element.

A

margin -top

139
Q

defines the left padding of an element.

A

margin -left

140
Q

defines the top padding of an element.

A

margin-top

141
Q

a container that wraps around an HTML element. It contains the properties such as borders, margin, padding and the content of the element itself.

A

CSS box model

142
Q

True or False

Every element in an HTML document is rendered by a web browser as a rectangular box based on the CSS box model. The CSS box model is a container that wraps around an HTML element. It contains the properties such as borders, margin, padding and the content of the element itself. This model is used to customize the layout of each element

A

true

143
Q
A

WEB PROGRAMMING 12 - 1st Quarter (3 decks)

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