CSS Flashcards
Selectors
indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
Declarations
Declarations indicate how
the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value), and are separated by a colon.
Link
link href=”css/example.css” type=”text/css”
rel=”stylesheet” />
unIverSaL SeLector
Applies to all elements in the document
* {}
Targets all elements on the page
type SeLector
h1, h2, h3 {}
Targets the <h1>, </h1><h2> and </h2><h3> elements</h3>
Class Selector
.note {}
Targets any element whose class attribute has a value of note p.note {}
Targets only <p> elements whose class attribute has a value of note</p>Class Selector
.note {}
Targets any element whose class attribute has a value of note p.note {}
Targets only <p> elements whose class attribute has a value of note</p>ID selector
#introduction {}
Targets the element whose id attribute has a value of introductionchild selector
li>a {}
Targets any <a> elements that are children of an </a><li><a> element (but not other </a><a> elements in the page)</a></li>
deScendant SeLector
p a {}
Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them</p></a>
adjacent SIBLIng SeLector
h1+p {}
Targets the first <p> element after any </p><h1> element (but not other </h1><p> elements)
</p>
generaL SIBLIng SeLector
h1~p {}
If you had two <p> elements that are siblings of an </p><h1> element, this rule would apply to both</h1>
• What are the names of the individual pieces of a CSS rule?
group of selectors -> declaration block
• In CSS, how do you select elements by their class attribute?
.notation
• In CSS, how do you select elements by their type?
Type Selectors correspond with HTML elements. ID Selectors are used by adding # in front of an elements ID. Class Selectors are used by adding a period in front of an elements class.
• In CSS, how do you select an element by its id attribute?
intro
Property: Value;
The property which is an identifier, that is a human-readable name, that defines which feature is considered.
The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
CSS rule (rule set)
CSS Summary
block Box model
If a box has an outer display type of block, it will behave in the following ways:
The box will break onto a new line.
The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
The width and height properties are respected.
Padding, margin and border will cause other elements to be pushed away from the box.
Some HTML elements, such as <h1> and </h1><p>, use block as their outer display type by default.</p>
Inline box
If a box has an outer display type of inline, then:
The box will not break onto a new line.
The width and height properties will not apply.
Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer display type by default.</strong></em></span></a>
What is the default flex-direction of a flex container?
The default flex-direction of a flex container is row,
• What is the default flex-wrap of a flex container?
nowrap (default): all flex items will be on one line
• How does setting position: relative on an element affect document flow?
Normal document flow, if you just put the position relative without any box offset properties
• How does setting position: relative on an element affect where it appears on the page?
It moves from the place where it is normal in document flow
• How does setting position: absolute on an element affect document flow?
Can block out other boxes? Sibling elements will side into place and it doesn’t exist anymore in document flow, its ripped out and you can move it wherever
x, y, z index
x axis, y axis, z-index makes things three dimensional aka what element will be over something else. or like a gray background
• Name three different types of values you can use to specify colors in CSS.
• RGB values, hex codes, color names, HSL, Alpha channel
What are the four components of “the Cascade”.
source order, inheritance, specificity and !important
• What does the term “source order” mean with respect to CSS?
However, it is common in CSS development to declare styling for an element on the same property multiple times throughout your stylesheet. For instance, given the following HTML:
<h1>Some News Headline</h1>
And the following CSS:
.news-headline {
font-size: 60px;
}
.medium-text {
font-size: 25px;
}
Both the news-headline and medium-text classes include a font-size property. So which style ultimately gets applied?
The last element
Use a media query to change a variable
CSS Variables can simplify the way you use media queries.
For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
@media (max-width: 350px) {
:root {
/* Only change code below this line */
/* Only change code above this line */
}
}
<hr></hr>
Create a Horizontal Line Using the hr Element
You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
Add an hr tag underneath the h4 which contains the card title.
Note: In HTML, hr is a self-closing tag, and therefore doesn’t need a separate closing tag.
Add an hr tag underneath the h4 which contains the card title.
Note: In HTML, hr is a self-closing tag, and therefore doesn’t need a separate closing tag.
ajust tone of color with hsl()
The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the ‘s’ and ‘l’ of hsl() stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
All elements have a default background-color of transparent. Our nav element currently appears to have a cyan background, because the element behind it has a background-color set to cyan. Add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.
ajust tone of color with hsl()
The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the ‘s’ and ‘l’ of hsl() stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
All elements have a default background-color of transparent. Our nav element currently appears to have a cyan background, because the element behind it has a background-color set to cyan. Add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.
REPEATING LINERAR gradient
The repeating-linear-gradient() function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient() accepts a variety of values, but for simplicity, you’ll work with an angle value and color stop values in this challenge.
The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
REPEATING LINERAR gradient
The repeating-linear-gradient() function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient() accepts a variety of values, but for simplicity, you’ll work with an angle value and color stop values in this challenge.
The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
Use the CSS Transform scale Property to Change the Size of an Element
p {
transform: scale(2);
}
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.
The following code skews the paragraph element by -32 degrees along the X-axis.
p {
transform: skewX(-32deg);
}
Create a Graphic Using CSS
You may recall from an earlier challenge that the box-shadow property takes values for offset-x, offset-y, blur-radius, spread-radius and a color value in that order. The blur-radius and spread-radius values are optional.
Manipulate the square element in the editor to create the moon shape. First, change the background-color to transparent, then set the border-radius property to 50% to make the circular shape. Finally, change the box-shadow property to set the offset-x to 25px, the offset-y to 10px, blur-radius to 0, spread-radius to 0, and color to blue.
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0 0 blue;
}
Background position: bottom
same with top right and left
If this is on an image, it will show the bottom part of the picture
AKA example
