Scribd
Upload
2 views10 pages

Css Only Format Notes

The document provides an overview of CSS rules, including selectors, properties, and values, along with the cascading order of styles. It highlights important CSS properties, responsive design techniques using media queries, and various layout and styling options. Additional resources for learning CSS concepts such as Flexbox, Box Model, and animations are also included.

Uploaded by

mathis6606
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views10 pages

Css Only Format Notes

The document provides an overview of CSS rules, including selectors, properties, and values, along with the cascading order of styles. It highlights important CSS properties, responsive design techniques using media queries, and various layout and styling options. Additional resources for learning CSS concepts such as Flexbox, Box Model, and animations are also included.

Uploaded by

mathis6606
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

{ CSS }:

==================================================

CSS Rules (Selector, Property, Value)

----------------------------------------------

.body

text-align: center;

----------------------------------------------

1. Selector: targets the HTML element

Examples : body, button, * (Everything), .YourName, #ID

2. Property: what you change

Examples: color, font-size, margin, text-align

3. Value: how you change it

Examples: red, 16px, 20px, #000, center

==================================================

CASCADING ORDER :

==================================================

1. Inline style (inside a HTML TAG)


2. External and internal style sheets (in the head section)

3. Browser default

==================================================

ALL IMPORTANT PROPERTIES :

==================================================

color

filter (To Add Filters To IMG)

background

font-family

object-fit: cover;

(Preserves the aspect ratio, and the image fills the container.)

object-fit: fill;

(The image is resized to fill the container, will be stretched or squeezed to fit)

-----------------------

.image-container {

width: 200px;

height: 300px;

border: 1px solid black;


margin-bottom: 25px;

.image-container img {

width: 100%;

height: 100%;

object-fit: fill;

<div class="image-container">

<img src="[Link]" alt="Pineapple" width="300" height="300">

</div>

-----------------------

font-size:10vw

(Viewport is the browser window size. 1vw = 1% of viewport width.

If the viewport is 50cm wide, 1vw is 0.5cm.)

-----------------------

IS RESPONSIVE TO ANY DEVICE

-----------------------

z-index

(The z-index property specifies the stack order of positioned elements.)

Example: z-index: -1;

Note:

z-index only works on positioned elements


(position: absolute, relative, fixed, sticky)

and flex items (children of display:flex)

width

(auto or px)

max-width

(The biggest width an element can be)

Example: max-width: 500px;

min-width

(The smallest width an element can be)

Example: min-width: 200px;

outline-style

outline-color

outline-width

outline-offset

outline

height

(auto or px)

color

(text color)
MEDIA QUERIES

max-width (phones)

@media (max-width: 768px)

h1

font-size: 24px;

min-width (large screens)

@media (min-width: 1024px)

.container

width: 1000px;

@media (min-width: 768px) and (max-width: 1024px)

body

background: blue;

}
}

background

(color or image)

font-family

(font type, backups supported)

vertical-align

(vertical text alignment)

text-align

(horizontal text alignment)

font-size

(responsive with vw)

-----------------------

1vw = 1% viewport width

font-size: 5vw;

-----------------------

font-style

normal

italic

oblique
font-weight

normal

bold

bolder

lighter

100–900

border

margin

(Outside spacing)

1=UP 2=RIGHT 3=DOWN 4=LEFT

padding

(Inside spacing)

1=UP 2=RIGHT 3=DOWN 4=LEFT

display

(flex, inline-block)

flex-direction

list-style-type

text-decoration
(a:hover { text-decoration: none; })

letter-spacing

text-decoration-offset

text-decoration-color

hover

cursor

background-image

background-size

background-repeat

background-position

top, center, bottom, left, right

position

static

relative

absolute

fixed
sticky

top

(vertical offset)

text-transform

box-shadow

border-color

border-style

border-left

border-right

border-top

border-bottom

border-radius

opacity

background-attachment: fixed;

==================================================

EXTRA LEARNING :
==================================================

FONT AWESOME ICONS

[Link]

[Link]

CSS FLEXBOX LAYOUT

BOX MODEL

[Link]

SERIF VS SANS-SERIF

[Link]

DROPDOWN MENU

[Link]

COUNTERS (SHOPPING CART NOTIF)

[Link]

CSS ANIMATIONS

[Link]

You might also like