CSS Flashcards
What does CSS stand for?
Cascading Styles Sheets
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)
The group name for a property and value pair that applies a style to the selected element.
p {
color: blue;
}
The declaration = color: blue;
What is a property? (Ruleset)
The first part of the declaration that indicates 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.
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 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 allow you to create rules that apply to elements that have an attribute with a specific value.
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 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
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;
}
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;
}
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 (margin: 0 auto) 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?
- display
- scroll
- hidden
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. In this case, the term user agent is a technical term for the browser.
How can developers reset the default stylesheet values?
By using the code below, which resets the default margin and padding values of all HTML elements. It is often the first CSS rule in an external stylesheet.
Note that both properties are set to 0. When these properties are set to 0, they do not require a unit of measurement
- {
margin: 0;
padding: 0;
}
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
