CSS Flashcards
What is the basic syntax of CSS made up of?
A selector, property and value
What does a basic css syntax look like?
An example.
div.bold-text {
font-weight: 700;
}
Label the parts of a syntax. Selector.
div.bold-text {
font-weight: 700;
}
(div.bold-text)
Label the parts of a syntax. Property.
div.bold-text {
font-weight: 700;
}
(font-weight:)
Label the parts of a syntax. Value.
div.bold-text {
font-weight: 700;
}
(700;)
What are selectors?
HTML elements to which CSS rules apply.
What are universal selectors? What’s their syntax?
The universal selectors will select elements of any type and the syntax for it is a simple asterisk
- {
color: purple;
}
What are type (element) selectors? syntax?
A type or element selectors will select all element of the given element type, and the syntax is just the name of he element.
div {
color: white;
}
What are class selectors?
Class selectors will select all elements with a given class
What does a class attribute look like and what are their functions?
[<div (class=“name”)> …]
Just an attribute, like a tag you put on an HTML element.
Rules and features of a class attribute?
You can add as many class as you want to an element using spaces.
They aren’t required to be unique.
What does a class selector syntax look like?
.alert-text {
color: red;
}
What are ID selectors?
They select an element with a given ID
What is an ID attribute? What does it look like?
An attribute you place on an HTML element.
[ <div id=“title”> … ] I
What do ID selectors look like?
title {
background-color: red; }
Rules for ID attributes and selectors
Case sensitive
Only use when necessary
ID’s are unique and cannot be repeated
Should not contain whitespaces
How to group selectors?
Group them in a comma separated list, if they share declarations.
.read,
.unread {
color: white;
background-color: black;
}
How to chain selectors?
If you want to add a style separately to an element that contains both classes or ids.
.subsection.header {
color: red;
}
.subsection#preview {
color: blue;
}
chain selectors rules
You can’t chain more than one type selector.
What are descendant combinator?
Allows us to combine multiple selectors with parent child relationships
How does a descendant combinator look like?
A single space between selectors.
.ancestor .contents {
/* declarations */
}
Rules for descendant combinator
You can add as many as you want .
Avoid elements that need a large amount of nesting, can get complicated.
Function of the color property?
Sets an element’s text color
Function of background-color property?
Sets the background color of an element.
What do color properties accept?
A keyword like red
The transparent keyword
HEX, RGB, and HSL
Function of the font-family property?
Determines what font an element uses.
What does the value of the font-family property look like?
Single value or comma separated list of values that determine what font an element use.
Why do some values of the font-family property have double quotes?
A font family name like “DejaVu Sans” which uses double quotes because of space brown the word
A generic family name like sans-serif
which never used quotes cus no space,
Why add a list of fonts?
For when a browser doesn’t support one it keeps on going down till it finds the one it supports.
Function of the font-size property?
Set the size of the font
How does the font-size property value look like? Rules?
font-size: 22px
No spaces in the values
Function of the font-weight property?
Affects the boldness of the text
font-weight property values. Rules.
The value can be a keyword.
font-weight: bold
Or a number between 1-1000
font-weight: 700 (=bold)
Usually the increment is of 100 up to 900. Depends on the font.
How to change an img size without adjusting its proportions
img {
height: auto;
width: 500px;
}
Why you should always style your img size?
If the img loads slower than the rest of the page it won’t suddenly shift the page.
What is the cascade?
It’s what determines what rules gets added to html
What are the 3 factors used to determine the cascade?
Specificity, Inheritance, and Rule Order.
What is specificity in the context of cascade?
A declaration that is more specific will take precedence over less specific ones.
In-line or selectors which is more specific?
In-line
Rank of the top 3 specific selectors
- ID selectors
- Class selectors
- Type selectors
When the specificity of selectors equals what happens
A large amount of a selectors will beat a smaller amount
Or the one which comes first
ID + 2Class will beat an ID + 1Class
Class1 will beat Class 2 if it comes first.
Which selector has no specificity value?
The universal selector and hence always the lowest priority
What is inheritance in the context of cascade?
Refers to certain CSS properties when applied to an element are inherited by that elements defendants.
Which properties are usually inherited in a cascade
Typography (color, font etc)
When does inheritance bested in a cascade?
When targeting an element specifically
An example of specificity beating inheritance
Child with a class attribute isn’t overcomes by a Parent with an ID attribute because the cascade on the child would inherited if the style wasn’t specified.
What is rule order in cascade
When there are still conflicting rules targeting an element. It does the one that comes last
Ways to add CSS to HTML
External CSS (most common) and Internal CSS
What is External CSS?
Involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing <head> tags with a self-closing <link></link> element.
How does External CSS look like?
<head>
<link rel=“stylesheet” href=“styles.css”>
</head>
Name of ur external css file name
Anything following the file naming rules as long as it ends with (.css)
Pros of external css
Keeps our code clean and small
Useful for multiple pages in a website with the same style.
What is internal (embedded) css?
Adding CSS within the HTML file itself instead of creating a completely separate file
What do you do in Internal css?
You place all the rules within a <style> element placed inside the <head> element. This method does not require link.</style>
What is in-line css?
Makes it possible to add styles directly to HTML elements. Not recommended
What happens in in-line css
You don’t add selectors
Use the style attribute to add style directly to the elements
What’s does in-line css look like?
[<div style=“”>…]
Cons of in-line css?
Can bloat your html file
Can cause repetition and bloat when involving many element with the same style
Will override external and internal css
What does the text-align property do?
Will align text horizontally within an element.
What shape is everything? I
A box
What happens if you do nothing to a box?
The content of the box fills the space inside the box
One of the ways to make your box bigger.
padding: #px;
Where does padding occur? Seen commonly in…?
Inside the border. The background of the element. Seen commonly in
What does the border do?
It surrounds your padding.
What does margin do?
Wraps the border. Used to space elements. Invisible
How to change the dimensions of your box?
Height and width.
Margin rules
Collapse under each other and the bigger one is chosen. Always added
What determines the entere box dimension?
Padding + width + height + border + margin
What does the box-sizing: border-box; do?
Makes the height and width the count for everything else.
Purpose of the box model?
Complex layouts align items
Types of boxes in CSS
Block boxes and in-line boxes.
Features of the Outer display type.
Break into newline
Width, height, padding etc will push away other elements.
Some HTML elements that uses outer display automatically?
<h1> , <p>, and block.
</p></h1>
Types of of displays?
Outer and inner.
In-line box outer display features.
Doesn’t break into a new line.
Width and height does not apply.
Padding etc will apply but will not cause space
Horizontal padding etc will move other apply to other in-lines.
Some Elements that use in-line boxes outer display by default?
<a>, <span>, <em>, and <strong></strong></em></span></a>
What is normal flow?
Elements inside a box, act as block or in-line boxes
What is the inner display type? Ex.
Dictates how elements inside the box are laid out.
Ex. Flex
What does the value of display determine?
Whether the type of box is block or in-line.
Parts of a block box in html?
Border
Margin
Padding
Content
What is the standard box?
A block box with an in-line-size and block-size that defined the in-line-size and block-size of the content box
How to turn on alternative css box model?
box-sizing: border-box;
How to use the box-sizing property properly?
Set it on the html element and all other element to inherit that value
Negative margin?
Causes overlap brown other things on the page
