Cascading Style Sheet Flashcards
(143 cards)
1
Q
used to control the style of a web document in a simple and easy way.
A
CSS (Cascading Style Sheet)
2
Q
CSS is the acronym for?
A
Cascading Style Sheet
3
Q
Enumerate the key advantages of learning css:
A
- Create stunning website
- Become a web designer
- Control Web
- Learn Other Languages
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
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
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
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
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)
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
10
Q
You can write CSS once and then reuse same sheet in multiple HTML pages.
A
CSS saves time
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
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
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
14
Q
Style sheets allow content to be optimized for more than one type of device.
A
Multiple Device Compatibility
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
16
Q
an HTML tag at which a style will be applied.
A
selector
17
Q
A type of attribute of HTML tag which cover all the HTML attributes are converted into CSS properties.
A
Property
18
Q
assigned to properties. An example is color property can have value either red
A
Values
19
Q
syntax of CSS rules:
A
selector { property: value }
20
Q
syntax that selects all the elements in a document
A
*{ color:red;}
21
Q
selects all the elements in a document
A
Universal Selector
22
Q
syntax that selects all elements that match selector
A
ul {color:red; }
23
Q
Selects all elements that match selector
A
Type selector
24
Q
syntax selects elements whose id attribute’s value matches the selector
A
intro { color=red; }
25
Selects elements whose id attribute's value matches the selector
ID selector
26
Selects elements whose class attribute's value matches the selector.
Class selector
27
syntax that applies to all elements whose class attribute's value is "side"
.side { color-red; }
28
syntax that applies to all
elements whose class attribute's value is "side."
p.side { }
29
selector Selects elements whose class attribute's values match the selector.
Multiple class
30
syntax that applies to all elements whose class attribute values are "side front back.“
.side,.front,.back { }
31
Selects an element that is a descendant of another specified element.
Descendant selector
32
syntax that selects an element that is a descendant of another specified element.
div p { color-red; }
33
Selects an element that is a direct child of another specified element
Child Selector
34
Syntax that applies to only
elements that are direct children of a
element.
div> p{color-red}
35
Selects an element that is the next sibling of another element.
Adjacent sibling selector
36
syntax that applies to only the first
element after an
element.
h3+p { color-red; }
37
Selects an element that is a sibling of another element.
General sibling selector
38
syntax that applies to all
elements that are siblings of an
element.
h3~p { color-red; }
39
Selects an element that has a specified attribute or an attribute-value pair.
Attribute selector
40
syntax that applies to all elements with a "lang" attribute.
em(lang) { color-red; }
41
select elements based on name, id, class
Simple Selectors
42
select and style a part of an element
Pseudo-elements selectors
43
select elements based on a certain state
Pseudo-class selectors
44
select elements based on an attribute or attribute value
Attribute selectors
45
select elements based on a specific relationship between them
Combinator selectors
46
**TRUE OR FALSE**
- The element selector selects HTML elements based on the element name.
-Here, all
elements on the page will be center-aligned, with a red text color:
True
47
the id attribute of an HTML element to select a specific element.
CSS id selector
48
The id of an element is unique within a page, so the id selector is used to select one unique
element!
ID SELECTOR
49
To select an element with a specific id, write a _________ character, followed by the id of the
element.
hash (#)
50
selects HTML elements with a specific class attribute.
Class selector
51
select elements with a specific class, write a period (.) character, followed by the class name.
Class Selector
52
selects all the HTML elements with the same style definitions.
CSS grouping selector
53
what is the comment for CSS
/* and ends with */
54
**True or False**
- You can add comments to your HTML source by
using the
- a combination of HTML and CSS comments:
True
55
- 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
Inline Styles
56
- 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.
External Styles
57
- 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.
Embedded styles
58
What kind of configuring cascading styles sheets is this?:
CSNHS Web Programming
Senior High School
Inline Styles
59
Enumerate the configuring cascading styles sheets
- Inline styles
- External styles
- Embedded styles
- Imported
60
What kind of configuring css is this?
HTML :
<
CSNHS Web Programming
Senior High School
CSS: #first { font-size: 40px; color: green; text-align: center; } #second { font-size: 30px; color: red; }
External Styles
61
CSS properties are saved in a separate text file with an extension of .css and is referenced from an HTML document using the tag inside the head section.
External css
62
syntax for external css link?
63
the value of the rel attribute is?
stylesheet
64
The value of the href attribute is the _______ of the style sheet file.
name
65
The value of the type attribute is __________, which is the MIME type for CSS.
"text/css"
66
What is the cascade (rules of precedence) ?
Browser defaults
|
external styles
|
embedded styles
|
inline styles
|
HTML attributes
67
colors can also be specified using the _____________.
RGB values
68
- The formula is rgb(regreen, blue).
- The parameter – red, green and blue has values from 0 to 255 which defines theintensity of the color.
RGB value
69
- 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)
RGBA value
70
- 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.
HEX value
71
- 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
HSL value
72
**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)
TRUE
73
- 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):
RGBA value
74
- 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).
HEX value
75
- 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
HSL colors
76
- 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.
Saturation
77
this property specifies the background color of the element
background-color
78
syntax for background-color?
h1 {
background-color:green;
}
79
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
background-image
80
Syntax for background-image?
body {
background-image:url("sample.jpg");
}
81
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)
Lightness
82
By default, the background-image property will repeat a background image to fill up the space allotted to the element.
background-repeat
83
To prevent or control how the image will be repeated, background-repeat property is used.
background-repeat
84
Repeat the image horizontally only
repeat-x
85
Repeat the image vertically only
repeat-y
86
Disable repetition of image both horizontal and vertical.
no-repeat
87
this property specifies the position of the background image. By default, an image s positioned at the top left corner of the page.
background-position
88
syntax for background-position?
body {
background-image: url("paper.jpg");
background-repeat: no-repeat;
background-position: right top;
}
89
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
background-position
90
this property specifies the background image if it should be scrolled or fixed. The values for this property could either be scroll or fixed.
background-attachment
91
**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
True
92
this property specifies the color of the text.
color
93
- 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.
text-align
94
To change the vertical alignment of the element, this property is used. Its valid values could be top, middle or bottom.
vertical-align
95
-this property specifies the text decoration of the text.
text-decoration
96
A link, by default, has an underline in the text. To remove it, ________________________ is used
text-decoration:none;
97
This property is used to set the indention of the first line of the text.
text-indent
98
**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.
True
99
The space between the character of the text can be set using this property.
letter-spacing
100
This property will set the space between the line of text.
line-height
101
The space between the words in a text can be set by this property.
word-spacing
102
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.
text-shadow
103
This property sets the font family.
font-style
104
**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.
True
105
**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.
True
106
To specify an italic text, this property is used.
font-style
107
enumerate the 3 values of font-style
- normal which is the default
- italic for italicized text,
- oblique which is very similar to italic, but less supported.
108
This property sets the weight of a font. Some valid values are normal, bold, bolder and lighter.
font-weight
109
This property sets the size of the text.
font-size
110
What is the difference between the absolute length and relative length?
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
Common units of the font size include px, em, %, in, cm, mm and pt. The px, in, cm, mm and pt are ____________ _______units.
absolute length
112
On the other hand, em and % are _______ _________ units which specify its length depending on another length property.
relative length
113
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.
Specific font
114
describes the general appearance of
the characters in the text but does not specify any particular font definition file.
Generic font
115
a typeface in which a small ornamentation appears at the tail end of each character
Serif
116
- 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
Text Value
117
-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
Pixel Unit (px)
118
-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
Point Unit (pt)
119
-Numeric value with unit, such as .75 em
-Recommended by W3C; scales well when text is resized in browser; many options for text size
Em Unit (em)
120
-Numeric value with percentage, such as 75%
-Recommended by W3C; scales well when text is resized in browser; many options for text size
Percentage Value
121
-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
borfer-style
122
the style of border can also be changed. Normally, the value solid is used since it creates a single solid line border.
border-color
123
**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
True
124
- 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
border-width
125
Application of Value: Value is assigned to all four edges.
Number of Value: 1
126
Application of Value: First value is assigned to top and bottom, and second value is assigned to right and left.
Number of Value: 2
127
Application of Value: First value is assigned to top, second to right and left, and third to bottom.
Number of Value: 3
128
Application of Value: First value is assigned to top, second to right, third to bottom, and fourth to left.
Number of Value: 4
129
The space between the content of the element and its border is the ________
Padding
130
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.
Padding
131
**Values of the Shorthand border-six**
defines the top padding of an element.
padding-top
132
**Values of the Shorthand border-six**
defines the left padding of an element.
padding-left
133
**Values of the Shorthand border-six**
defines the top padding of an element.
padding-top
134
**Values of the Shorthand border-six**
defines the bottom padding of an element.
padding-bottom
135
sets the space around an HTML element. This property can have a negative value which will result in overlapping of content.
margin
136
**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.
True
137
**True or False**
The auto keyword leaves it to the browser to determine margin values as it sees fit.
True
138
defines the top padding of an element.
margin -top
139
defines the left padding of an element.
margin -left
140
defines the top padding of an element.
margin-top
141
a container that wraps around an HTML element. It contains the properties such as borders, margin, padding and the content of the element itself.
CSS box model
142
**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
true
143
