Use CSS3 in applications (25%) Flashcards
Why do HTML elements usually appear differently in different browsers?
The browsers are applying different default styles
Which CSS property is used to specify the text color?
color
What three ways can you specify a color for the CSS color property?
hex, color name, and rgb values
h1 {
color:#00FF00;
}
h2 {
color: green;
}
h3 {
color: rgb(0,255,0);
}
How do you make text appear in bold?
Set the CSS font-weight property to bold.
p {
font-weight: bold;
}
What values can be specified for the CSS font-weight property?
lighter, normal, bold and bolder
or
100 (lighter), 200, 300, 400, 500, 600, 700, 800, 900 (darker)
How do you make text appear in italics?
Set the CSS font-weight property to italic.
p {
font-style:italic;
}
How do you specify the font to use for text?
Set the CSS font-family property.
p {
font-family:Arial,’Times New Roman’,Webdings;
}
How do you use a font that may not be installed on the client?
Add a @font-face rule and provide a WOFF (Web Open Font Format) for download.
@font-face {
font-family: "My Nicer Font";
src: url('fonts/my_woff_font.eot');
src: url('fonts/my_woff_font.woff');
}
p {
font-family: ‘My Nicer Font’;
}
How do you change the size of text relative to the default text size of the browser?
Set the CSS font-size property to one of these values: xx-small, x-small, smaller, small, medium, large, larger, x-large, and xx-large.
p {
font-size: x-large;
}
How do you change the horizontal alignment for text?
Set the CSS text-align property.
p {
text-align: center;
}
What are the possible values for the CSS text-align property (other than initial and inherit)?
left, center, right, justify
What does the value initial for a CSS property signify?
That the property use its default value.
What does the value inherit for a CSS property signify?
That the property get its value from the parent element.
What CSS property is used to indent text?
text-indent
p {
text-indent: 50px;
}
What CSS property is used to change the amount of spacing between letters?
letter-spacing
p {
letter-spacing: 8px;
}
What CSS property is used to change the amount of spacing between words?
word-spacing
p {
word-spacing: 8px;
}
What CSS property is used to change how a sentence or word wraps or breaks at the end of the line?
hyphens
div {
hyphens: none;
}
What are the possible values for the CSS hyphens property?
none, auto, manual
What CSS properties are used to change an element’s size?
height and width
table {
height: 50%;
width: 50%;
}
div {
width: 200px;
height: 100px;
}
What CSS properties are used to change an element’s border?
border, border-style, border-color, border-spacing, border-width
p{
border-style: solid ;
border-color: black;
border-spacing: 250px;
border-width: 5px;
}
div {
border: 5px solid black;
}
What is the order that values must be specified for the CSS border property?
size style color
div {
border: 5px solid black;
}
What is the space surrounding an element outside its border called?
margin
What is the space inside an element’s border surrounding its content called?
padding
From inside to outside, what are the CSS properties that affect the spacing of elements?
padding, border, margin
What CSS property is used to change the transparency of an element?
opacity
p {
opacity: 0.4;
}
What CSS property is used to change the opacity of an element?
opacity
p {
opacity: 0.4;
}
What is the range of values for the CSS opacity property?
0.0 to 1.0
In a CSS file, how are partial URL’s interpreted?
They are interpreted relative to the location of the style sheet (.css file), not relative to the document.
p {
background-image: url(‘orange.jpg’); /* assumes orange.jpg is in the same directory as the file containing this CSS definition */
color: white;
}
What CSS property is used to specify a background image for an element?
background-image
p {
background-image: url(‘orange.jpg’); /* assumes orange.jpg is in the same directory as the file containing this CSS definition */
color: white;
}
What configuration options are available for the CSS background-image property?
size, repeat, clip, position-x/position-y
What two types of gradients are supported in CSS?
linear and radial
What CSS function is used with the CSS background property to apply a linear gradient?
linear-gradient
background: linear-gradient(black, gray);
What are the parameters of the CSS linear-gradient function?
direction (optional) and a list of color stops
What are the possible values for the direction parameter of the CSS linear-gradient function?
to left, to right, to bottom left, to bottom right, to top left, to top right, to top, to bottom
-or-
degrees specified by 0deg to 360deg
Which CSS properties apply shadow effects to elements?
box-shadow and text-shadow
Which CSS property applies controls the shadow effect around the box of an HTML element?
box-shadow
Which CSS property applies controls the shadow effect around text?
text-shadow
What are the parameters of the CSS box-shadow property?
h-shadow, v-shadow, blur, spread, color, inset
Which parameters of the CSS box-shadow property are required?
h-shadow and v-shadow
div
{
box-shadow: 10px 10px;
}
What are the parameters of the CSS text-shadow property?
h-shadow , v-shadow, blur, color
Which parameters of the CSS text-shadow property are required?
h-shadow and v-shadow
p
{
text-shadow: -10px -10px;
}
Which CSS property allows you to apply clipping to HTML elements?
clip
clip: rect(25px, 50px, 50px, 25px);
What value does the CSS clip property take?
The shape and size of the element to make visible specified by the CSS rect function.
clip: rect(25px, 50px, 50px, 25px);
What are the parameters of the CSS rect function?
top, right, bottom, left
What must be specified for the CSS position property in order to use the CSS clip property?
fixed or absolute
What is the default value for the CSS position property?
relative
For the exam, be sure you understand that each HTML element is a box and each box be- gins its own new coordinate system. If you place a div element on the page at (50px,50px), any elements placed inside it are not placed at a coordinate starting at (50px, 50px) just because that is where the div element is. The child elements inside the div start at coordinate (0,0), which is the top left corner of the div itself. All child elements are positioned relative to the container in which they are placed.
What values may be specified for the CSS position property?
fixed, relative, absolute, float
What is fixed positioning?
Elements are placed relative to the browser window.????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
What is relative positioning?
Elements are placed relative to their position in normal flow.
What is absolute positioning?
Elements are placed relative to its first parent element.
Where do the left and right properties start their measurements?
From the outermost edge of the box.
What CSS property is used to specify layers for overlapping elements?
z-index
What is float positioning?
Elements automatically move to the left or right of surrounding content. This is most commonly used to place images in line with text to force the text to wrap around the image.
What are the possible values for the CSS float property?
left and right
What is a flexbox?
A CSS construct that provides a way to lay out elements that flow either from horizontally or vertically.
Which types of HTML elements can be made into flexboxes?
Container elements, such as the div element
How is an HTML element made into a flexbox in CSS?
Set the CSS display property of the element to flexbox.
<div>
</div>
#flexbox1 {
display: flex;
border: 1px solid black;
margin-top: 100px;
min-height: 15px;
}
What are the elements within a flexbox called?
Flexbox items
What CSS properties are available for the flexbox?
flex-direction and flex-pack
What are the available options for the CSS flex-direction property?
row, row-reverse, column, and column-reverse
What are the available options for the CSS flex-pack property?
start, end, center, and distribute
What value do you specify for the CSS flex-direction property to layout elements vertically?
column
What value do you specify for the CSS flex-direction property to layout elements horizontally?
row
What CSS property is used on the child elements of a flexbox to ????????????????????????????????????designate the space each should occupy?
flex
How does the values for the CSS flex property determine how much space each element takes up in a flexbox?
The sizes are determined as a percentage to the total of the values for the CSS flex property. Setting all the values to the same number makes every element equal in size. Setting one value to 1 and two other values to 2 will make the first element take 20% of the space and the rest of the elements take 40% each.
What CSS property can be used to specify the order in which flexbox items appear in a flexbox?
order
What CSS property is used to specify the wrapping behavior of the flexbox when its elements are larger than the flexbox?
flex-wrap
What CSS property combines the flex-direction and flex-wrap in one single property?
flex-flow
In what order are the values specified for the CSS flex-flow property?
flex-direction flex-wrap
ex:
flex-flow: row wrap
What two CSS properties can be used to layout an element’s content in multiple columns?
column-count and columns
#c_lo {
width: 80%;
height: 400px;
border: 1px solid black;
column-count: 5;
column-rule-color: black;
column-rule-style: dashed;
column-rule-width: 2px;
column-gap: 5px;
}
#c_lo {
columns: 3 50px;
}
What CSS properties are used to configure how multi-column elements are laid out?
column-count, column-gap, ?????????????????column-rule-color, column-rule-style, column-rule-width, column-rule, column-width, and columns
What CSS property can be used to change the behavior of the CSS float property?
wrap-flow
What are the available values for configuring the CSS wrap-flow property?
auto, both, start, end, maximum, and clear
Which CSS property and value can be used to layout elements in a grid without using a table element?
display: grid
Which CSS properties are used to define the number and sizes of columns and rows in a grid layout?
grid-columns and grid-rows
#mainGrid {
display: grid;
grid-columns: 150px 150px 150px 150px;
grid-rows: 75px 75px;
}
<div id="mainGrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
What are layout regions?
A CSS3 constructs that allows you to have content flow through various regions in a web page.
What two things are required to use layout regions?
a content source and the regions that will display the content
Example HTML with regions:
<div class="regionLayout">
<div></div>c
<div></div>
<div></div>
...
<div></div>
</div>
Where can the content for layout regions come from?
an iframe or another element on the page (the latter is not supported by browsers yet)
What two CSS properties are required to control the flow of content from the source to the destination regions?
flow-into and flow-from
.content_source{
flow-into: myflow;
}
.content_regions{
flow-from: myflow;
}
What is a responsive user interface?
A user interface that can adapt itself automatically based on the size of the screen that is available.
What is a CSS transition?
A technique for changing a CSS property in a visible gradual fashion (over time).
In the following code, the div will move to the right and slowly fade from gray to white when the mouse hovers over it. See this link for a live example: https://jsfiddle.net/hzpmt2eb/
div {
width: 100px;
height: 100px;
background-color: gray;
margin-left: 250px;
margin-top:250px;
transition: background-color 1s, margin-left 1s ;
}
div:hover {
margin-left: 350px;
background-color: white;
}
Which CSS property can be used to specify multiple properties for transition?
transition
transition: background-color 1s, margin-left 1s ;
How should the value for the CSS transition property be specified?
A comma-delimited list of properties and lengths of time.
transition: background-color 1s, margin-left 1s ;
Which CSS property is used to specify the property that will be transitioned?
transition-property
Which CSS property is used to specify the total length of time for a transition?
transition-duration
Which CSS property is used to specify the length of time before starting a transition?
transition-delay
How many CSS properties can be transitioned using the individual CSS transition-* properties?
Only one
Use the CSS transition property if you need to transition more than one property at a time.
Which CSS property can be used to control the speed of a transition?
transition-timing-function
What are the available values for the CSS transition-timing-function property?
ease, linear, ease-in, ease-out, ease-in-out, cubic bezier
Which CSS property is used to apply 2D and 3D transformations?
transform
div {
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
https://jsfiddle.net/7q0kecp8/
Which CSS transformation is used to move an element from its current location to a new location?
translate - translateX, translateY, translateZ, translate3d
Which CSS transformation is used to change the size of an element?
scale - scaleX, scaleY, scaleZ, scale3d
Which CSS transformation is used to spin an element on the x-axis, y-axis, and/or the z-axis?
rotate - rotateX, rotateY, rotateZ, rotate3d
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
transform: rotate3d(1, 1, 1, 30deg);
Which CSS transformation is used to combine all other 3D transformations in a single value?
matrix - matrixX, matrixY, matrixZ, matrix3d
Which 3D transformations are available in CSS?
translate, scale, rotate, matrix
What are CSS media queries?
CSS definitions that apply CSS properties based on the size of the screen
@media screen and (min-width: 1200px) {
#blogPage {
display: -ms-grid;
grid-columns: 15% 1fr 25%;
grid-rows: (20%)[5];
width: 90%;
height: 95%;
border: 1px dotted black;
margin: auto;
}
}
Which attribute of the link element can be used to apply a CSS file based on a CSS media query?
media
<link></link>
<link></link>
<link></link>
Other than using a smart-phone or tablet, how can use test the affects of your CSS media queries?
Resize the browser window to different sizes.
Media queries are based on the size of the browser view point and not on the browser type or operating system.
Which CSS selector affects all elements of the specified element type?
Element selector
div {
}
body {
}
Which CSS selector affects all elements whose class attribute contains the specified value?
Class selector
.myClass {
}
<div></div>
Which CSS selector affects all elements with the specified attribute?
Attribute selector
div[required] {
}
<div>CSS is applied</div>
<div>CSS is NOT applied</div>
What operators are available for use in CSS attribute selectors?
=, ~=, ^=, $=, *=
Which operator is used to create a CSS attribute selector that targets attributes with a specific value?
=
Which operator is used to create a CSS attribute selector that targets attributes with any one of a list of specific values?
~=
Which operator is used to create a CSS attribute selector that targets attributes whose value begins with the specified text?
^=
Which operator is used to create a CSS attribute selector that targets attributes whose value ends with the specified text?
$=
Which operator is used to create a CSS attribute selector that targets attributes whose value contains with the specified text?
*=
What are CSS pseudo-classes?
A way to apply styles to an element based on its state, interaction with the user, or its position in the document.
What are CSS pseudo-elements?
A way to insert content into the page in locations relative to the elements that the CSS is being applied to.
Which three CSS pseudo-classes are used to style anchor tags?
:link, :visited, :hover
a:link {
color: green;
}
a:hover {
color: red;
}
a:visited {
color: black;
}
Which CSS pseudo-class is used to apply styles to elements that are checked?
:checked
input[type=”checkbox”]:checked {
display: none;
}
Which CSS pseudo-class is used to apply styles to elements that have the required attribute?
:required
input:required {
border: 2px solid red;
}
Which CSS pseudo-classes are used to apply styles to elements based on their enabled/disabled state?
:enabled and :disabled
input:enabled {
background-color: white;
}
input:disabled {
background-color: blue;
}
Which CSS pseudo-class is used to apply styles to the first element in a list?
:first-child
https://jsfiddle.net/dedzhfgm/
<div>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
</div>
p:first-child {
background-color:green;
}
Which CSS pseudo-class is used to apply styles to the first letter in the specified element?
:first-letter
p:first-letter {
font-size: xx-large;
}
Which CSS pseudo-classes are used to insert content before or after the specified element?
:before and :after
p:before {
content: ‘’;
}
p:after {
content: ‘’;
}
Which CSS pseudo-class is used to apply styles to the first line in the specified element?
:first-line
p:first-line {
color:green;
font-size: x-large;
}
Which can be added to a CSS rule to force it to be applied regardless of other conflicting CSS rules?
!important
p{
font-family: serif;
color: blue;
}
p{
color: purple !important;
}
p{
color: yellow;
}
