CSS Flashcards
What does CSS stand for?
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML
Cascading means that the last definition of a selector is taken into account.
E.g.
How do you comment out in CSS?
/* comment */
What are selectors, properties, and values in CSS?
Selectors are the objects one wants to specifiy with CSS with the properties and certain values for these properties.
How do you refer selectors in CSS?
- all elements
- a class e.g. named nav
- an id e.g. named nav1
- a group of elements, e.g. element A and element B
- an element A within another element B
- all elements A within an element B
- the first element A after an element B
- all elements A after an element B
- the hover state of an element B
- the first child A of an element B
- the last child A of an element B
Refer all elements
*{}
Refer a class named nav
.nav {}
Refer an id named nav1
#nav1 {}
Refer element A and B, e.g. h1 and h2
h1, h2 {}
Refer all Bs in As, e.g. <p>s in <div>
div p {}
Refer the first elements A that is placed after the B elements, e.g. first <p> after h1
h1 + p {}
References all elements A that are placed after the B elements, e.g. all <p>s after h1
h1~ p {}
Refer the hover state of an element B, e.g. a link
a:hover {}
Refer the first child A of an element B, e.g. the first <h1> in <body>
body h1:first-child
or: the first <p> in any element
p:first child {}
Refer the last child A of an element B, e.g. the last <h1> in <body>
body h1:last-child
What happens if you add !important after the property and the avlue in the declaration?
How it would look like
p {
color: blue !important;}
What it does:
The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity in the source code - and here the problem starts! This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet!
What is meant by the terms Specificity, Importance and Source Order?
What seletors win out in the cascade depends on these 3 terms.
Specificity:
The more specific you refer selectors the more likely it will win out. At the same time different selectors are given different weights in the following order: span > id > class > (pseudo) elements
Importance: Is an element marked with importance the declared value will always overrule all other declarations made for that element.
Source Order:
The style sheet which is referenced to last will always be considered for declaration
What is meant by the term pseudo class and pseudo element?
A CSS pseudo-class is used to style a special state of an element.
For example, it can be used to
a) Style an element when a user mouses over it
b) Style visited and unvisited links differently
c) Style an element when it gets focus
Example for links:
a:link {}
a:visited {},
:hover {}
:active {}
Note: hover needs to come after link and visited to be effective and active needs to come after hover.
Other pseudo-classes are :first-child (as it selects all first childs of another element)
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
a) Style the first letter, or line, of an element
b) Insert content before, or after, the content of an element
Pseudo-elements always have a ::; here some real world examples:
p::first-letter {}; p::first-line {}; h1::before {}; h1::after {}
What is meant by the property float? How should it be used and what needs to be thought of when using it?
The float property let’s the element float around the object it was defined for e.g. text around an image. The values can be left or right. It should be used on images with text only.
When using it the property it must be considered that the first element that should not use it anymore must be cleared with the declaration: clear: both;
However, a more recent approach can also be to add a <div> around the two objects that should float around and give it the declaration: display: flow-root;.
As IE11 does not support it, it can only be used if IE is not needed to be supported.
What is meant by the box model?
In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
The order how distances are applied to when coding is top > right > bottom > left.
If the top and the bottom value as well as the left and the right value repeat it can just be specified: top > right
If it should be the same for all it can be just specified by adding: top
If I want to adjust the content field within I need to use the values: width and height.
What is meant by the terms absolute units and relative units?
In CSS you can use absolute units like px etc. which means what you type in is what you get.
You can also use relative units like em/rem, which means the size of the object is depenedant of the size of another object.
For em it’s the parent object, for rem it’s the html definition (if nothing is defined it’s 16px).
Relative units are especially helpful for coding for different device screens as I don’t need to overwrite each pixel size inidividually.
What is the difference between em and rem?
The relative unit em inherits the size of the parent and changes it relatively to it
e.g. if html looks like
<div>
<p>This is the parent
<span> and this is child
<span> and this is child of a child </span>
</span>
</p>
</div>
and css looks like
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}
> > the p ‘this is a child of the child’ is even bigger than the p ‘this is a child’
Whereas the relative unit rem inherits the size of the root element and changes it relatively to it
Have a look here: https://medium.com/@dixita0607/css-units-for-font-size-px-em-rem-79f7e592bb97
What is meant by the critical rendering path?
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance
HTML > CSS > font file/ google fonts > Java Script
As long as the browser does not have the CSS or the google font it does not display anything on the page.
How to optimize:
- own font files
.- ensure small CSS files e.g. alsi through CSS minifying > all white space gets removed, reduces the its sent via the internet, makes it faster
How can you ensure, that a navigation bar extends to the very end of the browser window?
By defining the body element to margin 0px
body {
margin: 0px;
}
How can you create layouts in CSS?
Flexbox
CSS Grid
Bootstrap
