CSS at LMU München

Flashcards and summaries for CSS at the LMU München

Arrow Arrow

It’s completely free

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

Study with flashcards and summaries for the course CSS at the LMU München

Exemplary flashcards for CSS at the LMU München on StudySmarter:

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What is the Visual Formatting Model?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What do block, inline and inline-block mean?

This was only a preview of our StudySmarter flashcards.
Flascard Icon Flascard Icon

Millions of flashcards created by students

Flascard Icon Flascard Icon

Create your own flashcards as quick as possible

Flascard Icon Flascard Icon

Learning-Assistant with spaced repetition algorithm

Sign up for free!

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What are the positioning schemes: normal flow, floats and absolute positioning?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

How are stacking contexts in CSS created?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What is a mixin?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What are some useful CSS functions?

This was only a preview of our StudySmarter flashcards.
Flascard Icon Flascard Icon

Millions of flashcards created by students

Flascard Icon Flascard Icon

Create your own flashcards as quick as possible

Flascard Icon Flascard Icon

Learning-Assistant with spaced repetition algorithm

Sign up for free!

Exemplary flashcards for CSS at the LMU München on StudySmarter:

What is the difference between @mixins and placeholders ?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

Some CSS properties:

Exemplary flashcards for CSS at the LMU München on StudySmarter:

1. What are responsive images? 

2. When to use responsive images? 

3. What is important to make images responsive? How do you make them responsive?

4. What is the difference between html images and css images?

Exemplary flashcards for CSS at the LMU München on StudySmarter:

When to use the 'inherit' keyword?

This was only a preview of our StudySmarter flashcards.
Flascard Icon Flascard Icon

Millions of flashcards created by students

Flascard Icon Flascard Icon

Create your own flashcards as quick as possible

Flascard Icon Flascard Icon

Learning-Assistant with spaced repetition algorithm

Sign up for free!

Exemplary flashcards for CSS at the LMU München on StudySmarter:

Some pseudo-classes:

Your peers in the course CSS at the LMU München create and share summaries, flashcards, study plans and other learning materials with the intelligent StudySmarter learning app.

Get started now!

Flashcard Flashcard

Exemplary flashcards for CSS at the LMU München on StudySmarter:

CSS

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

i)

1. Step: Resolve conflicting CSS declarations (Cascade)


2. Step: Process final CSS values (from e.g. % values to px)


ii) The cascade process combines different stylesheets and resolves conflicts between different CSS rules (selector+declaration) and declarations, when more than one rule applies to a certain element.


iii)

1. Author/Developer

2. User (through e.g. clicking on button)

3. Browser (user agent) (e.g. links are blue and underlined)


iv) 

Importance (weight) > Specificity > Source order


Importance: 

important! keyword > author >  user > browser


Specificity:

Inline > IDs > classes, pseudo-classes, attribute > elements, pseudo-elements


Order:

The last written rule gets applied.

CSS

What is the Visual Formatting Model?

Algorithm wich calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.


Factors that matter:


1. box model (content-box, border-box)

2. Box type: inline, block, inline-block

3. floats, position (absolute, relative)

4. stacking contexts

5. other elements in the render tree

6. viewport size, dimensions of images, etc.

CSS

What do block, inline and inline-block mean?

1. block

- take up 100% parent's width

- create new line

- block, flex, table, list-item all create blocks

- box model applies


2. inline

- only takes up what it needs

- no line breaks,

- no heights and widths

- only horizontal paddings & margins


3. inline-block

- only takes up what it needs

- no line breaks

- box model applies


CSS

What are the positioning schemes: normal flow, floats and absolute positioning?

1. normal flow

- default is position: static

- according to source order


2. floats

- element is removed from normal flow

- text & inline elements will wrap around the floated element

- container will not adjust its height to the element


3. relative positioning
- top, left, right, bottom can be applied


4. absolute positioning

- element is removed from normal flow

- no impact on surrounding elements

- position with top, left, bottom, right relatively to container

- position: absolute, fixed

CSS

How are stacking contexts in CSS created?

through z-index, transform, opacity, filter, ...

CSS

What is a mixin?

It is a bunch of code which can be reused throughout the code.


Mixins can have params to customise them. It is also possible to write not only mixing but whole functions to calculate stuff.

CSS

What are some useful CSS functions?

- darker(var, %)

- lighter(var, %)

CSS

What is the difference between @mixins and placeholders ?

the mixing code gets copied to the selector,  the selector of the extend gets copied to the placeholder.

CSS

Some CSS properties:

- backface-visibility (e.g. hidden)

- clear

- outline

- perspective

- background-blend-mode

- box-decoration-break

- shape-outside

- filter

- object-fit

- column-count

- hyphens

- display: table-cell

- backdrop-filter

- fill (to use for svg)

- mask-image

- mask-size

CSS

1. What are responsive images? 

2. When to use responsive images? 

3. What is important to make images responsive? How do you make them responsive?

4. What is the difference between html images and css images?

1. The goal of responsive images is to serve the right image for the right screen size and device, in order to avoid downloading unnecessary large images on smaller screens.


2.

1. Resolution switching (from big to small screen)

2. Density switching (from high to low resolution)

3. Art direction (different img depending on screen size)


3. They have to get a width

HTML-tag <picture>, attributes: 'srcset', 'media', 'sizes'

4. HTML images are defined with the <img> tag, CSS images are the ones defined with "background-image".

CSS

When to use the 'inherit' keyword?

When some styles are not inherited from parents and have to be manually inherited.


E.g. the ::before and ::after pseudo elements don't inherit the styles like "box-sizing" from their parent.

CSS

Some pseudo-classes:

:invalid

:placeholder-shown

:root

Sign up for free to see all flashcards and summaries for CSS at the LMU München

Singup Image Singup Image

Dutch class at

Universität zu Köln

Cde at

Universität Düsseldorf

CS1028 at

Technische Hochschule Mittelhessen

CSF at

University of Nottingham

CO at

Hochschule für Angewandte Wissenschaften Hamburg

Similar courses from other universities

Check out courses similar to CSS at other universities

Back to LMU München overview page

What is StudySmarter?

What is StudySmarter?

StudySmarter is an intelligent learning tool for students. With StudySmarter you can easily and efficiently create flashcards, summaries, mind maps, study plans and more. Create your own flashcards e.g. for CSS at the LMU München or access thousands of learning materials created by your fellow students. Whether at your own university or at other universities. Hundreds of thousands of students use StudySmarter to efficiently prepare for their exams. Available on the Web, Android & iOS. It’s completely free.

Awards

Best EdTech Startup in Europe

Awards
Awards

EUROPEAN YOUTH AWARD IN SMART LEARNING

Awards
Awards

BEST EDTECH STARTUP IN GERMANY

Awards
Awards

Best EdTech Startup in Europe

Awards
Awards

EUROPEAN YOUTH AWARD IN SMART LEARNING

Awards
Awards

BEST EDTECH STARTUP IN GERMANY

Awards
X

StudySmarter - The study app for students

StudySmarter

4.5 Stars 1100 Rating
Start now!
X

Good grades at university? No problem with StudySmarter!

89% of StudySmarter users achieve better grades at university.

50 Mio Flashcards & Summaries
Create your own content with Smart Tools
Individual Learning-Plan

Learn with over 1 million users on StudySmarter.

Already registered? Just go to Login