User:Michel W/Self-learning: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 1: Line 1:
<div style=" font-family: Times New Roman; font-size: 16px; ">
<div style=" font-family: Times New Roman; font-size: 16px; ">


==== '''⭑HTML⭑''' ====
== '''⭑HTML⭑''' ==
[https://github.com/Michelmsw My⭑Github⊹⊹⊹ ]
[https://github.com/Michelmsw My⭑Github⊹⊹⊹ ]


Line 31: Line 31:
⊹Option + Command + I --- Google Chrome
⊹Option + Command + I --- Google Chrome


==== '''⭑CSS⭑''' ====
== ⭑CSS⭑ ==


⊹Syntax simple CSS selectors:  
⊹Syntax simple CSS selectors:  

Revision as of 15:50, 30 December 2023

⭑HTML⭑

My⭑Github⊹⊹⊹

⊹Well chosen content of H1 element is crucial to SEO.

Html Entities:

  • Help avoid rendering issues
  • Safeguard against more limited character encoding
  • Provide characters not available on a keyboard
Instead of < > &
Use: &lt ; &gt ; &amp ;


Use nbsp; HTML document ALWAYS appear together on 1 line

After the 1st word and after the 2nd word (with no spaces in between words and entity references)

⊹Option + Command + I --- Google Chrome

⭑CSS⭑

⊹Syntax simple CSS selectors:

  • Element
  • class (define with .)
  • id (define with #)

⊹Combining Selectors:

  • Element with class selectors (selector.class)
  • Child (direct) selector (selector > selector)
  • Descendant selector (selector selector)

-Didn't cover:

  • Adjacent sibling selector (selector + selector)
  • General sibling selector (selector ~ selector)

⊹Pseudo-Class Selector

  • : link
  • : visited
  • : hover
  • : active
  • : nth-child

<link ref="stylesheet" href="style.css">

⊹Conflict Resolution:

  • Origin precedence: Last declaration wins
  • Inheritance: DOM Tree
  • Specificity: Most specific selector combination wins

(Score) 1. Style="..." 2. ID 3. Class, pseudo-class, attribute 4. # of Elements

⊹Styling Text:

.style {
  font-family: Arial, Helvetica, sans-serif;
  color: #0000ff;
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
}