CSS basic Flashcards
CSS (The cascade)
Determines which styles are applied when multiple rules target the same element.
The last rule written is the winner
Final applied color?
h1{
color: blue;
}
h1{
color: green;
}
Final applied color is green, because it was declared last
Calculating specifity
ID selector 1-0-0 highest
Class selector 0-1-0
Type selector 0-0-1
food {
HTML
<p> ....</p>
CSS
background: green;
} p{
background: orange;
}
So here the winnes is green because ID selector weight
CSS property values
COLORS there are 4 primary ways:
*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
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???
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
*Absolute lenght units
best for print styles
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
*Relative Lenght units
em –> Font size of the element
1 em= current font size
% –> Percentage of the parent element, so works based on the parent element size
Display
(Mostrar, pantalla)
Defines how an HTML element is rendered on the webpage
Display
¿What are the ways for displaying?
*None
*Block
*Inline
*Inline-Block
*Flex
*Grid
Block display
*Occupies the entire width of the container
*Always initiate a new line
Ex: <p>, <h1>, <section>, <article>
None
Inline Display
*Do not initiate a new line
*Only occpies the width of the content
Ex: <span>, <a>, <strong>, <em></em></strong></a></span>
Inline-Block Display
It behaves as inline (don´t initiate a new line) but allows width and heigth
Useful for bottons, images and menus ….
Flex Display
Converts the container to a flexbox, allowing an advanced distribution
The sons can get aligned, justifiyed and reordered easier
Grid (cuadrícula)
Useful for column design and filas
Box Model
How elements are structured and spaced on a web page
Box model elements
Content
Padding
Border
Margin
Box Model: Content
Espacio interno donde se muestra el texto o imagen
Box model: Padding
Espacio entre contenido y borde
Aumenta el tamaño interno del elemento
By default we have padding izq+padding derecho
Box model: Border
Línea alrededor del padding y contenido
Se puede personalizar con color, grosor y estilo
Se calcula izq y derecha
Box Model: margin
Espacio entre elemento y otros elementos
Cuando 2 elementos con margin se encuentran, no se suman, se toma el de mayor valor
Box model calculation size
It is calculated sum up all their parts
Example box sizing
In this case we hace total width: 200px
box{
box-sizing: border-box;
width: 200px;
padding: 20xp;
border: 5px solid black;
margin: 15px;
}
Positioning content with floats
Used for:
°Floating images with text wrapping
°Creatingcolumn-based layouts
°Positioning elements inside containers
°Making navigation menus or sidebras
Values of float property
Floats the element to the left or right of its container (left & right values)
Clearing floats
(Clearing property)
Ensures that the layout remains structured
Values: left, right and both
.clearfix technique
Difference between font and typeface
Font is the file that contains typeface, meaning that allows the computer to acces type face
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
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
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)
font-style values
°Normal: by default
°Italic:
°Oblique: Similiar to Italic
font-variant values
Controls small caps (uppercase letters that are slightly smaller than regular uppercase)
Inheritance properties
Font-family, font-size, font-style and font-variant are inheritable by default, meaning child elements will get these values
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
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
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;
}
Hover
(pseudo class)
Styles an element when a user hovers over that element (changing the color when user put the mouse on it)
Text properties
*Text align
*Text decoration
*Text indent property
*Text transform
*Letter spacing property
*Word spacing
Text align property values
p{
text-align: center;
}
left
right
center
justify
inherit
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
Text indent property
For indenting the first line of the text within an element
p{
text-indent: 20px;
}
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
Letter spacing property
Adjust the space between the letters on a page
Default: 0.5 cm closer
Word spacing
Spaced by default 0.25 em apart
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
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;
}
Background-color property
selector: HTML element I want to style
selector{
background-color: rojo;
}
Background-image
I can control position, size, repeat behavior and other aspects
selector{
background-image: url(“image.jpg”);
}
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;
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.
Shorthand background image values
1 Background-color
2 Background-image
3 Background-position
4 Background-repeat
1, 2, 3, 4
Gradient background
Synthax?
selector{
background: linear-gradient(direction, color1, color2, …);
}
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
Another background properties
For maintaining the ratio. Which value we use?
Auto%
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
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
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;
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;
