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

From XPUB & Lens-Based wiki
No edit summary
Line 33: Line 33:
==⭑CSS⭑==
==⭑CSS⭑==


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


* Element
* Element
Line 60: Line 60:
'''<link ref="stylesheet" href="style.css">'''
'''<link ref="stylesheet" href="style.css">'''


⊹Conflict Resolution:
===⊹Conflict Resolution===


* Origin precedence: '''Last declaration wins'''
* Origin precedence: '''Last declaration wins'''
Line 68: Line 68:
(Score) 1. '''Style'''="..." 2. '''ID''' 3. '''Class''', pseudo-class, attribute 4. # of '''Elements'''
(Score) 1. '''Style'''="..." 2. '''ID''' 3. '''Class''', pseudo-class, attribute 4. # of '''Elements'''


⊹Styling Text:
===⊹Styling Text===


  .style {
  .style {

Revision as of 15:53, 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;
}