Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

CSS > CSS basic > Flashcards

CSS basic Flashcards

(66 cards)

Start Studying
1
Q

(The cascade)

A

Determines which styles are applied when multiple rules target the same element.
The last rule written is the winner

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Final applied color?

h1{
color: blue;
}
h1{
color: green;
}

A

Final applied color is green, because it was declared last

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Calculating specifity

ID selector 1-0-0 highest
Class selector 0-1-0
Type selector 0-0-1

A

food {

HTML

<p> ....</p>

CSS

     background: green;
        } p{
      background: orange;
 }

So here the winnes is green because ID selector weight

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

CSS property values

COLORS there are 4 primary ways:

A

*Keyboards: black, silver (name that map to a given color)

*Hexadecimal notation: #0000, Hc0c0c0

*RGB values: rgb (0,0,0), rgb (192,192,192,)

*HSL values: hsl (0,0%, 75%)

Note that for example Hexadecimal way have a more range in comparison to keyboard

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Lenght values

Fundamental unit of measurement used to define sizes, spacing, positioning and other layout properties. (width, height, padding, margin, space between elements ..)

Is divided in 2 types???

A

Absolute: Don´t provide flexibility

Relative: Is flexible and adapt based on context. Best for (responsive design) –>Allows a web to ajust to the size of a screen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

*Absolute lenght units
best for print styles

A

px –> pixeles –> 1px (1 dot on the screen)

cm –> centimiter –> 1cm=37.8 px

mm

in

pt –>point used in prints –> 1 pt = 1.33 px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

*Relative Lenght units

A

em –> Font size of the element
1 em= current font size

% –> Percentage of the parent element, so works based on the parent element size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Display
(Mostrar, pantalla)

A

Defines how an HTML element is rendered on the webpage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Display
¿What are the ways for displaying?

A

*None
*Block
*Inline
*Inline-Block
*Flex
*Grid

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Block display

A

*Occupies the entire width of the container
*Always initiate a new line
Ex: <p>, <h1>, <section>, <article>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

None

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Inline Display

A

*Do not initiate a new line
*Only occpies the width of the content
Ex: <span>, <a>, <strong>, <em></em></strong></a></span>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Inline-Block Display

A

It behaves as inline (don´t initiate a new line) but allows width and heigth
Useful for bottons, images and menus ….

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Flex Display

A

Converts the container to a flexbox, allowing an advanced distribution
The sons can get aligned, justifiyed and reordered easier

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Grid (cuadrícula)

A

Useful for column design and filas

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Box Model

A

How elements are structured and spaced on a web page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Box model elements

A

Content
Padding
Border
Margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Box Model: Content

A

Espacio interno donde se muestra el texto o imagen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Box model: Padding

A

Espacio entre contenido y borde

Aumenta el tamaño interno del elemento

By default we have padding izq+padding derecho

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Box model: Border

A

Línea alrededor del padding y contenido

Se puede personalizar con color, grosor y estilo

Se calcula izq y derecha

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Box Model: margin

A

Espacio entre elemento y otros elementos

Cuando 2 elementos con margin se encuentran, no se suman, se toma el de mayor valor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Box model calculation size

A

It is calculated sum up all their parts

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Example box sizing

In this case we hace total width: 200px

A

box{
box-sizing: border-box;
width: 200px;
padding: 20xp;
border: 5px solid black;
margin: 15px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Positioning content with floats

A

Used for:

°Floating images with text wrapping

°Creatingcolumn-based layouts

°Positioning elements inside containers

°Making navigation menus or sidebras

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Values of float property
Floats the element to the left or right of its container (left & right values)
26
Clearing floats (Clearing property)
Ensures that the layout remains structured Values: left, right and both
27
.clearfix technique
28
Difference between font and typeface
Font is the file that contains typeface, meaning that allows the computer to acces type face
29
Font-family
Defines the typeface (font) used for the text It accepts multiple font names as a fallback system in case the first isn´t available in the browser
30
font-family synthax
p { font-family: "Times New Roman", serif; } If the font name has 2 or more words needs to be wrapped in quotiation marks
31
font-size values
°Pixels °Em: Relative to the parent element °Rem: Relative to the root element °Percentage: Relative to the parent font size °Viewport units: vw (vp width) vh(vp height)
32
font-style values
°Normal: by default °Italic: °Oblique: Similiar to Italic
33
font-variant values
Controls small caps (uppercase letters that are slightly smaller than regular uppercase)
34
Inheritance properties
Font-family, font-size, font-style and font-variant are inheritable by default, meaning child elements will get these values
35
font-weight values
It accepts keyboard values and numeric values °Keyboard values: Normal, bolder, lighter, and inherit. °Numeric values: 100-thin 200 extra-light 300 light 400 normal ......... 700 bold
36
line-height property Synthax: { line-height: normal; }
Controls the vertical space between lines of text Values: Normal: by default Number: 1.5 Lenght: px, em, rem Percentage: % Inherit
37
38
Shorthand Font *Note: every property value is optional excet font-size and font-family
font-style font-variant font-weight font-size/line-height font-family; Examle: p{ font: italic small-caps bold 16px/1.5 arial; }
39
Hover (pseudo class)
Styles an element when a user hovers over that element (changing the color when user put the mouse on it)
40
Text properties
*Text align *Text decoration *Text indent property *Text transform *Letter spacing property *Word spacing
41
Text align property values p{ text-align: center; }
left right center justify inherit
42
Text decoration property (Spruce it up text) h2{ text-decoration-line: underline overline; }
*None: removes any default text decoration (useful for links) *Underline: Adds a line below text *Overline: Adds a line above text *Line-throughs: Adds a line through text
43
Text indent property
For indenting the first line of the text within an element p{ text-indent: 20px; }
44
Text transform property
*None: Will return any of these inherited values back to original *Capitalize: Capitalize the 1st letter of each word *Uppercase: Capitalize every letter *Lowercase: Every letter lowe case *Inherit
45
Letter spacing property
Adjust the space between the letters on a page Default: 0.5 cm closer
46
Word spacing
Spaced by default 0.25 em apart
47
Embedding web fonts (I can use web fonts from: Google fonst website, typekit, self-hosted, system fonts, etc.)
Using google fonts (easy method), steps: Go to google fonts Select a font Copy the link tag for embedding Add it inside the head (HTML) Using self-hosted fonts (best control, better performance) *woff2 *woff files
48
For self-hosted fonts How we define the font?
Using: @font-face @font-face{ font-family: 'Poppins'; src: url('/fonts/Poppins- Regular.woff2') formal('woff2'); url('/fonts/'.....Regular.woff') format('woff'); font-weight: 400 font-style: normal; } Then apply body{ font-family: 'Poppins', sans-serif; }
49
Background-color property
selector: HTML element I want to style selector{ background-color: rojo; }
50
Background-image I can control position, size, repeat behavior and other aspects
selector{ background-image: url("image.jpg"); }
51
Background-repeat (repeating the image) Values??
By default, background images repeat in both directions Values: background-repeat: no repeat; background-repeat: repeat-x; background-repeat: repeat-y;
52
Background-position
Requires 2 values: Horizontal offset (1°) and vertical offset (2°) If only 1 value is specified, that value it will used 50%-50%, horizontal and vertical. *We can use the "top, right, bottom, left & center keywords, pixels, percentages or any length measurement.
53
Shorthand background image values
1 Background-color 2 Background-image 3 Background-position 4 Background-repeat 1, 2, 3, 4
54
Gradient background Synthax?
selector{ background: linear-gradient(direction, color1, color2, ...); }
55
Setting background direction
Keywords: to right, to bottom, etc Angles: degress, like 45 deg, etch I can control where each color starts red starts at 10%, yellos starts at 50% and so on
56
Another background properties For maintaining the ratio. Which value we use?
Auto% Also we use 2 separated values (width and height)
57
Another background properties The "cover" keyword value What it is for?
Specifies that the background image will be resized to completely cover element´s width and height. Often the image is cut off to occupy the full available space
58
Another background properties The "contain" keyword What it is for?
Specifies the background image will be resized to reside entirely contained within an element width and height (aspect ratio will be preserved) *It could happen that it will not occupy the full available space of the element
59
Background-clip property What determines?
Determines how far the background extends inside an element Synthax: values ( border-box *default*, padding-box, content-box) background-clip: value;
60
Back-ground origin property What does control?
Controls where the background image starts withing an element Synthax: values (boder-box *default*, padding-box, content-box) background-origin: value;
61
Border-collpase property which are the 3 values for this property?
Border-collapse values: *Collapse: The table cells share a single border between them. *Separate: Borders are separated (A default value) *Inherit: Inherits the value from the parent element
62
Synthax of Border-collpase property:
table { border-collpase: collapse; }
63
Border-spacing property
*Determine how much space, if any, appears between the borders of adjacent cells (horizontal & vertical) *Only applies when value of border-collapse: separate; is used.
64
Border-spacing synthax
Its value can be px, cm, em and so on. table{ border-collpase: separate; border-spacing: 10px }
65
Table striping
Help readability by adding alternating background colors to table rows. Synthax: using nth-child pseudo class tr: nth-child(odd) like 2,4,6,....rows tr: nth-child(even) like 1,3,5,.....rows
66
Difference between (table striping) nth-child(n) and nth-of-type(n)
:nth-child(n) Depends on position in parent :nth-of-type(n) De´pends on element type (

,

  • , etc). Safe for selecting specific tag types.

    • CSS (1 decks)

    Brainscape helps you reach your goals faster, through stronger study habits.
    © 2025 Bold Learning Solutions. Terms and Conditions