CSS Flashcards
When is internal css styling useful?
Internal css styling is useful when applying styles to one html document.
Example:
<style>
html {
background: red;
}</style>When is inline css useful?
Inline css is useful when adding css styling to a single element on your html page. Not good for adding styling to several elements.
What are the three ways to add css to an html website?
- Inline
<tag></tag>
- Internal
<style>
css</style>
- External
<link></link>
What does CSS stand for?
Cascading Styles Sheets
What are named colors?
The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen.</named-color>
Example:
color: rebeccapurple;
What are the two different methods or syntax for writing CSS code?
CSS ruleset and CSS inline style
What is a selector? (Ruleset)
A selector is the beginning of the ruleset used to target the element that will be styled.
Ex:
p {
color: blue;
}
p = the selector
What is a declaration block? (Ruleset)
The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).
p {
color: blue;
}
The declaration block = {color: blue:)}
What is a declaration? (Ruleset)
A declaration is what we call the property and value that we want to add to an element. The property is what we want to change and the value is how we want to change it.
p {
color: blue;
}
The declaration = color: blue;
What is a property? (Ruleset)
A property specifies the aspects of the element you want to change. For example, color, font, width, height and border.
p {
color: blue;
}
property = color
What is a value? (Ruleset)
The second part of the declaration. Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color you want the text in these elements to be.
p {
color: blue;
}
value = blue
Style attribute
The style attribute is used to add CSS inline styles to an HTML element. It is an attribute available to all elements (global attribute).
What do we often call the CSS code inside the <style> element in a html file?</style>
internal stylesheet
How do we link html and css files?
use the link element to link HTML and CSS files together. The link element must be placed within the head of the HTML file. It is a self-closing tag and requires the following attributes:
- href
- rel -this attribute describes the relationship between the HTML file and the CSS file. Because we are linking to a stylesheet, the value should be set to stylesheet.
What does the type selector do?
A selector is used to target the specific HTML element(s) to be styled by the declaration. The type selector matches the type of the element in the HTML document.
What is the type selector also referred to as?
The type selector is sometimes referred to as the tag name or element selector.
What are four ways we can represent font size in css?
Pixels, points, em (pronounced “m”), rem.
How is 1em defined?
1 em is defined as the full width of the letter M. In practical terms, 1 em is going to be 100 percent of the parent size.
If the parent element is 20px than 1em would be 20px. If the parent element is 20px, a child element set to 2 em would be 40 px (twice as much).
How is rem different from em?
rem is a relative size just like em but instead of being relative to the parent it is relative to the root of your html file (which is usually an html element).
When we are setting the font size should we use rem or em and why?
It’s recommended to use rem because when you have different elements embedded in others it can become difficult to identify the parent elements.
What does the universal selector do?
The universal selector selects all elements of any type. The universal selector uses the * character
* {
font-family: Verdana;
}
What is a common way for selecting an element when working with html and css?
Using the class attribute.
Ex:
p class=’brand’ Sole Shoe Company /p
Important note: Greater than/less than have been removed in code above.
.brand {
}
How can we add multiply classes to an html element?
We can add multiple classes to an HTML element’s class attribute by separating them with a space.
Ex:
.green {
color: green;
}
.bold {
font-weight: bold;
}
h1 class=’green bold’
What do we use to when we want to give an html element its own unique style?
large-title {
We use the id attribute.
h1 id=’large-title’ …./h1
Important note: Greater than/less than have been removed in code above.
}
How is the class attribute different than the id attribute?
The class attribute accepts multiple values and can be used broadly throughout an HTML document. The element’s id can only have a single value and can only be used once per page.
What is the attribute selector?
Attribute selectors are CSS selectors that match elements based on their attributes. This can be an attribute alone, such as [type], or it can be an attribute and value combination, such as [type=checkbox] or [for=”email”].
Example:
p[draggable] {
color: red
}
<p>Drag Me</p>
What is one advantage of using the attribute selector compared to class or id?
When we use the attribute selector we do not need to write any new code (new html markup- id or class)
What are pseudo-class selectors?
Pseudo-class selectors allow you to change the appearance of elements when a user is interacting with them.
For example: When you’re filling out a form and the submit button is grayed out and disabled. But when all of the fields have been filled out, the button has color showing that it’s active.
:hover
This is applied when a user hovers over an element with a pointing device such as a mouse. Commonly used to change the appearance of links and buttons when a user places their cursor over them.
:active
Active is applied when an element is being activated by a user (a button being pressed or link being clicked). Makes the user “feel” like it is being pressed.
:focus
This is applied when an element has focus. Any element that you can interact with (link, form) can have focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s tab key.
:visited
Visited represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
Why should ID’s be used sparingly?
ID’s should be used sparingly because IDs override the styles of types and classes. We should only use them on elements that need to always appear the same.
What is specificity?
Specificity is the order by which the browser decides which CSS styles will be displayed.
What are the four broad categories when we are determining the level of importance for a css rule?
Position, specificity, type, and importance.
position- is the rule in a higher or lower position in the css relative to other rules.
Example: li {
color: red;
color: blue:
} (blue will be shown - the lower/the more important)
specificity - how specific a selector is ( type, class, attribute, id).
type - external, internal, inline styling. (inline is most important)
importance - using the important keyword. Ex:
h1 {
color: red;
color: green !important; (must have space in between green and important.)
What is a best practice in regards to specificity?
A best practice in CSS is to style elements while using the lowest degree of specificity so that if an element needs a new style, it is easy to override.
It’s best to style with a type selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.
What is chaining?
Chaining is when we combine multiply selectors in the CSS stylesheet.
For example:
h1.special {
}
This code will only affect the h1 element that has the class special. If we had a p element with the class special it would not be styled.
What is the descendant combinator?
The descendant combinator is a selector that allows us to select elements that are nested within other elements.
Example:
.main-list li {
}
This will select the element with the class main-list (ul) and then the descendant element (li). Must include a space between the class name and descendant element.
How can we increase the specificity of a CSS selector?
We can add more specificity by adding more than one tag, class, or ID to a CSS selector.
How do you add CSS styles to multiple selectors all at once?
We can separate the selectors by a comma to apply the same style to many selectors at once.
font-family property
The font-family property is used to change the typeface on your webpage.
What should you keep in mind when setting the font on your web page?
- The font must be installed on the users computer or downloaded with the site.
- Use web safe fonts -a group of fonts supported across most browsers and operating systems.
3.Unless you are using web safe fonts, the font you choose may not appear the same on all browsers and operating systems.
4.When the name of a typeface consists of more than one word, it’s a best practice to enclose the typeface’s name in quotes
Example: “Times New Roman”
What must we make sure we do when we are setting an elements position to absolute?
If you want a specific element positioned relative to another element, you must make sure to set the ancestor’s (what we are positioning it to) position to relative. If we do not do this then the element will be positioned relative to the document (top left corner).
font-size property
We use the font-size property to change the size of text on the web page.
font-weight property
The font-weight property controls how bold or thin text appears.
Why does the font-weight value “normal” exist?
If we were to make all of the text bold, we could use the normal value to make a specific part of the text not bold.
text-align property
To align text we can use the text-align property. The text-align property will align text to the element that holds it, otherwise known as its parent.
color property
The color property styles an element’s foreground color.
background-color property
The background-color property styles an element’s background color.
opacity
Opacity is the measure of how transparent an element is. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible.
The opacity property can be used to make elements fade into others for a nice overlay effect.
background-image
The background-image property will set the element’s background to display an image. The value provided is a url.
Ex:
.main-banner {
background-image: url(‘images/mountains.jpg’);
}
!important
!important can be applied to specific declarations, instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used.
One justification for using !important is when working with multiple stylesheets.
Ex:
p {
color: blue !important;
}
What is the box model?
All elements on a web page are interpreted by the browser as “living” inside of a box.
What does the box model include?
The model includes:
1.The content area’s size (width and height)
2.The element’s padding, border, and margin.
width and height (box model)
The width and height of the content area.
Padding (box model)
The amount of space between the content area and the border. Padding is like the space between a picture and the frame surrounding it.
Border (box model)
The thickness and style of the border surrounding the content area and padding. Like a frame around a painting.
Borders can be set with a specific width, style, and color
Ex:
p {
border: 3px solid coral;
}
How can we further modify a border once we define it?
We can add more specific rules in the next line of code.
Ex:
Border: 30px solid black;
Border-top: 0px;
Margin (box model)
The amount of space between the border and the outside edge of the element.
What happens when the width and height of an element are set in pixels?
It will be the same size on all devices — an element that fills a laptop screen will overflow a mobile screen.
What are the different parameters for a border’s width?
A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
What are the different parameters for a border’s style?
Web browsers can render any of 10 different styles. These styles include: none, hidden, dotted, dashed, double, groove, ridge, inset, outset, and solid.
What are the different parameters for a border’s color?
The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
What is the default border in CSS?
medium, none, color Where color is the current color of the element.
How can you modify the corners of an element’s border box?
You can modify the corners of an element’s border box with the border-radius property.
How can you create a border that is a perfect circle?
You can create a border that is a perfect circle by first creating an element with the same width and height, and then setting the radius equal to half the width of the box, which is 50%.
Ex:
div.container {
height: 60px;
width: 60px;
border: 3px solid blue;
border-radius: 50%;
}
How can you be more specific about the amount of padding on each side of a box’s content?
You can use the following properties:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
What is a shorthand property?
A shorthand property is a declaration that uses multiple properties as values.
What is padding shorthand?
Padding shorthand allows you to specify all of the padding properties as values on a single line.
You can specify these properties using 4, 3, or 2 values.
Padding shorthand with four values
The amount of padding for each section is specified in a clockwise rotation: top, right, bottom, left.
Example:
p.content-header {
padding: 6px 11px 4px 9px;
}
Padding shorthand with three values
This is used when the amount of padding is equal for the left and right sides. The first value sets the padding-top value (5px), the second value sets the padding-left and padding-right values (10px), and the third value sets the padding-bottom value (20px).
Example:
p.content-header {
padding: 5px 10px 20px;
}
Padding shorthand with two values
This shorthand is used when the top and bottom sides are equal and the left and right sides are equal. The first value sets the padding-top and padding-bottom values (5px), and the second value sets the padding-left and padding-right values (10px).
Example:
p.content-header {
padding: 5px 10px;
}
What is div short for and why do we use it?
Div is short for content division element and we use when we want to group different bits of content together (style it or lay it out together).
We can put as many elements as we want in between or div elements.
How does margin shorthand work?
Margin shorthand uses all of the same syntax as padding shorthand (4 values, 3 values, 2 values)
How can you center content using the margin property?
You can center content using the margin property by making sure you set a width and using the syntax 0 auto for the margin property.
What does the 0 auto syntax do when using the margin property?
The 0 sets the top and bottom margins to 0 pixels. The auto value tells the browser to adjust the left and right margins until the element is centered within its containing element.
What are the top and bottom margins also called?
vertical margins
What are the left and right margins also called?
horizontal margins
What is one big difference between vertical and horizontal margins?
Vertical margins collapse and horizontal margins do not. If we have two elements with the top margin of one set to 20px and the bottom margin of the other set to 30px, the margin will only be dependent on the larger margin (the margin will be 30px).
Horizontal margins will combine. Element 1 margin-right is 30 px and Element 2 margin-left is 30 px, total space between them will be 60px.
Why do we use min-width and max-width properties?
Content, like text, can become difficult to read when a browser window is narrowed or expanded. These two properties ensure that content is legible by limiting the minimum and maximum widths of an element.
How can you limit the minimum and maximum height of an element?
Using the min-height and max-height properties.
overflow property
The overflow property controls what happens to content that spills, or overflows, outside its box.
What are the most common values for the overflow property?
- hidden
- scroll
- visible
What is the hidden value for the overflow property?
The overflow value will allow any content that overflows will be hidden from view.
What is the scroll value for the overflow property?
The scroll value will add a scrollbar to the element’s box so that the rest of the content can be viewed by scrolling.
What is the visible value for the overflow property?
The visible value will allow the overflow content will be displayed outside of the containing element.
What are user agent stylesheets?
Default stylesheets the major browser have.
How can developers reset the default stylesheet values?
What does the box sizing property control?
It controls the type of box model the browser should use when interpreting a web page.
What is the default value for the box -sizing property?
content-box
How can we reset the entire box model and specify a new one?
By setting the box sizing property to border-box.
Why is the border-box value important?
The border-box value ensures that the the height and width of the box will remain fixed. (padding and the boarder will not add to the width or height of the box).
What are block- level elements?
Block-level elements are elements that create a block the full width of their parent elements, and they prevent other elements from appearing in the same horizontal space.
How can we change the default position of an element?
We can change the default position of an element by using the position property.
What are the five values for the position property?
static, relative, absolute, fixed, sticky
What is the default value for the position property?
static
What does the relative value for the position property allow you to do?
The relative value allows you to position an element relative to its default static position on the web page.
What must you add to the position declaration?
You must add an offset property (top, bottom, left, right) to indicate where the element should be positioned on the page.
Ex:
postion: relative:
top: 50px;
left: 50px;
What type of values can you use for the offset property (related to size)?
Pixels, rem, percentages
Ex:
postion: relative:
top: 50px;
left: 50px;
Does relative positioning affect the positioning of other elements?
no
What does the absolute value for the position property allow you to do?
The absolute value allows you to position the element relative to it’s closest parent element using the offset properties.
What does the fixed value for the position property allow you to do?
fix an element to a specific position on the page (regardless of user scrolling)
Example:
header {
position: fixed;
top: 0px;
left: 0px;
}
What’s a website feature that commonly uses the fixed value for position?
Navigation bars
What does the sticky value for the position property allow you to do?
The sticky value allows an element to behave like a relatively-positioned element until it reaches a certain point and then starts behaving like a statically-positioned element (“stick at that point)
What does the z-index property control?
The z-index property controls how far back or how far forward an element should appear on the web page when elements overlap.
Note: The larger z-index with overlap the smaller index (1 vs 0 or 10 vs unidentified)
What type of values does the z-index property accept?
integers
What does the display property do?
The display property controls if an element is treated as a block or inline element and the layout used for its children (flow layout, grid or flex)
What are three values for the display property?
inline, block, inline-block
What are inline elements?
Inline elements have a box that wraps tightly around their content and only take up the amount of space necessary to display their content. They also do not require a new line after each element.
What can we not alter with inline elements?
We can not alter the size of inline elements (height and width). The default to the height and width of there content.
