First Post of Web Designing

                                               😄😄  CSS SHORT NOTES

Types of CSS:-

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

1)Inline CSS

2)Internal CSS

3)External CSS

CSS Priority:->

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

Priority:->Inline CSS>Internal CSS>External CSS

*CSS styles are applied in the order they are linked in your HTML code.

*The last CSS code is applied in an element above the previous CSS codes.

*The class selector has a higher priority than the element selector.

*The id selector has the highest priority than class and element selectors. It actually overrides them when used altogether in the codes.

*Inline CSS has a much higher priority than id selector.

*Use only a single class for each one of the specific elements.

*Avoid using inline styles at all costs. This is really bad coding CSS practice.

Anatomy of CSS Syntax:-

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

selector { property : value; }

Classes vs Ids:->

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

1)An element cannot have two or more ids but can have two or more classes in an element.

Display:->

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

i)Block

ii)Inline

iii)Inline-Block

iv)None

Common Inline Elements:-

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

1)Spans(<span>)

2)Images(<img>)

3)Anchors(<a>)

CSS Positioning:->

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

CSS Positioning is used for setting the position of an element on the webpage.

1)Static

2)Relative

3)Absolute

4)Fixed

5)Sticky

Coordinates:->

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

1)Top

2)Bottom

3)Left

4)Right

CSS Sizing:->

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

->16px=100%=1em

CSS float & clear:->

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

float and clear are used for wrapping text around the image or text.

CSS Selectors:-

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

1)Global Selector(*)

2)Selector by tag name

3)Class Selector(.)

4)Id Selector(#)

5)Relationship Selectors

->Direct child(>)

->Descendent()

6)Sibling Selectors

->General Siblings(~)

->Adjacent Siblings(+)

7)Group Selectors(p, div, .a, #b)

8)Pseudo Selectors

->Pseudo Element

->Pseudo Class

8)Attributes:-

i)has attribute(src)

ii)attr value equals to

iii)attr value starts with

iv)attr value ends with

v)attr value contains

9)Multiple Selectors:->

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

  selector1, selector2 {

  }

10)Hierarchical Selectors:->

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

    #title .container-fluid {

          padding-top: 3%;

          text-align: left;

    }

    selector1 selector2 {

    }

11)Combined Selectors:->

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

     selector1.selector2 {

     }

     selector1#selector2 {

     }

=>The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. 

     Its result is a <transform-function> data type.

CSS Properties:-

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

Box Model:-

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

1)border-top, right, bottom, left

i)bordre-style-

ii)border-radius

2)margin-top, right, bottom, left

3)padding-top, right, bottom, left

4)Dimensions:-

i)width

  ->min-width

  ->max-width

ii)height

  ->min-height

  ->max-height

4)Layout:-

  ->float

  ->clear

  ->flex-box

  ->grid

5)background:-

  ->background-color

  ->background-image

  ->

6)text properties:-

  ->color

  ->text-transform

  ->text-style

  ->text-align

  ->

7)Font:-

  ->font-size

  ->font-varient

  ->font-style

  ->font-family

8)media query():-

Color Theory:->

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

1)Red->love, energy, intensity

2)Yellow->joy, intellect, attention - for logos

3)Green->freshness, safety, growth

4)Blue->stability, trust, serenity

5)Purple->royalty, wealth, femininity

->Typography

->font-size

->

Effective UI Design:-

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

1)Hierarchy

2)Layout

3)Alignment

4)White Space

5)Audience

UX Design:-

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

1)Simplicity

2)Consistency

3)Reading Patterns:-Use the F-Layout or use the Z-Layout

4)All Platform Design

5)Should not use Dark Patterns:-e.g., Ryanair