CSS Notes from MDN

The following are all from MDN and are used only as a note reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals Nested Statementsis a specific subset of At-rule, the syntax of which was a nested block of CSS rules that would only be applied to the docu ment if a specific condition is matched:

• The @media at-rule content is applied only if the device which runs the browser matches the expressed condition;
• The @supports at-rule content is applied only if the browser actually supports the tested feature;
• The @document at-rule content is applied only if the current page matches some conditions.

 Dot used to is followed by a class nameHash (#) used to being followed by an IDThe universal selector ( * ) is the ultimate Joker. It allows selecting all elements in a page.
 

presence and value attribute selectors

These attribute selectors try to match an exact attribute value:

• [attr] &NBSP: This selector would select all elements with the attribute  attr , whatever its value.
• [Attr=val]  : This selector would select all elements with the attribute  attr , and only if it value is& nbsp Val .
• [Attr~=val] : This selector would select all elements with the attribute  attr , but only if the Value  val  is One of a space-separated list of values contained in  attr ' s value, for example a Si Ngle class in a space-separated list of classes.

 Substring value Attribute selectors

• [attr|=val]: This selector would select all elements with the attribute for attr which the value was exactly val or starts with (careful, the dash here isn ' t a mistake, this is to handle language codes.)
• [attr^=val]: This selector would select all elements with the attribute for attr which the value starts with val .
• [attr$=val]: This selector would select all elements with the attribute for attr which the value ends with val .
• [attr*=val]: This selector would select all elements with the attribute for attr which the value contains the string val (unlike , this selector doesn ' t treat spaces as value separators but as part of the attribute value.)

 need to understand any element Matching both A and B at the same time.

combinators	Select
AB
A b	any element matching b Yes a  descendant  of an element Matching A (that is:a child, or A child of A child,  etc .)
A > B	any element matching B that's a  Direct child  of an element m Atching A.
A + b	any element matching B that's the next  sibling  of an element ma Tching A (That's is:the next child of the same parent.)
A ~ b	any element matching B that's among the next  sibling  of an Elem ENT matching A (that is:one of the next children of the same parent.)

Element selectors has a low specificity. Class selectors has a higher specificity, so would win against element selectors. ID selectors has an even higher specificity and so would win against class selectors. The only-to-win against an ID selector are to use !important. In CSS, there are a special piece of syntax you can use and make sure that a certain rule would win over all others: !important. Adding the end of a property value would give it superpowers.

But really, and don ' t use it if you can avoid it. Because !important Changes the cascade normally works, it can make debugging CSS problems really hard-to-work out, Espe Cially in a large stylesheet.

Px:pixel size

EM:? em =? *parent element size, i.e. Font-size of <p> is 10px, then the <span> with the font-size of 1.4em WI ll be 14px.

REM: REM =? *root element size, i.e. Font-size of

• font-style: Used to turn italic text on and off. Possible values is as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
• • normal: Sets text to normal font (turns existing italics off.)
  • italic: Sets text to use the italic version of the font if available; If not available, it'll simulate italics with oblique instead.
  • oblique: Sets text to use a simulated version of a italic font, created by slanting the normal version.
• font-weight: Sets how bold the text is. This had many available values available in case you had many font variants available (such as -light, -norm Al, -bold, -extrabold, -black, etc), but realistically you'll rarely use any of them ex Cept for normal and bold :
• • normal, bold : Normal and bold font weight
  • lighter,: Sets the current element's boldness to being one bolder step lighter or heavier than its parent element ' s boldness.
  • 100– 900 : Numeric boldness values that provide finer grained control than the above keywords, if needed.
• text-transform: Allows the set your font to be transformed. Values include:
• • none: Prevents any transformation.
  • uppercase: Transforms all TEXT to capitals.
  • lowercase: Transforms all text to lower case.
  • capitalize: Transforms all words to has the first letter capitalized.
  • full-width: Transforms all glyphs to is written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean.)
• text-decoration: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them. ) Available values are:
• • none: Unsets any text decorations already present.
  • underline: underlines the text.
  • overline: Gives the text an overline.
  • line-through: Puts a strikethroughover the text.

• text-shadow: 4px 4px 5px red;

  1. The horizontal offset of the shadow from the original text-this can take most available CSS length and size units, but Y Ou ' ll most comonly use PX. This value is included.
  2. The vertical offset of the shadow from the original text; Behaves basically just like the horizontal offset, except that it moves the shadow Up/down, not left/right. This value is included.
  3. The blur radius-a higher value means the shadow is dispersed more widely. If This value isn't included, it defaults to 0, which means no blur. This can take the most available CSS length and size units.
  4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to black .
   The property was text-align used to control how text was aligned within its containing content box. The available values are as-follows, and work in pretty much the same-as-they do in a regular word processor Applicati On
  
  • left: Left justifies the text.
  • right: Right justifies the text.
  • center: Centers the text.
   line-heightThe property sets the height of all line of text-this can take most length and size units, but can also take a UN Itless value, which acts as a multiplier and is generally considered the best option-the are font-size multiplied to get the line-height.
   The and properties allow you to letter-spacing word-spacing set the spacing between letters and words in your text. You won ' t use these very often, but might find with for them to get a certain look, or to improve the legibility of a parti cularly dense font. They can take the most length and size units.
  Many font properties can also is set through the shorthand propertyfont. These is written in the following order:font-style,font-variant,font-weight,font-stretch,font-size,line-height, andfont-family.
  list-style-type: Sets the type of bullets to use for the list, for example Square or circle bullets for an unordered list, or numbers, le Tters or Roman numerals for an ordered list.
  list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.

  ol {  list-style-type: upper-roman;  list-style-position: inside;//outside }

  list-style-image: Allows use a custom image for the bullet, rather than a simple square or circle.

  ul {  list-style-image: url(star.svg);}

  Thestartattribute allows you-to-start the list counting from a number other than 1.ThereversedAttribute'll start the list counting down instead's up.

  <ol start=“4" reversed>  <li>Toast pitta, leave to cool, then slice down the edge.</li>  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>  <li>Wash and chop the salad.</li>  <li>Fill pitta with salad, humous, and fried halloumi.</li></ol>

  Thevalueattribute allows set your list items to specific numerical values.

  <ol>  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>  <li value="6">Wash and chop the salad.</li>  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li></ol>

   
  • Link (unvisited) : The default state, which a Link resides in, when it is ' t ' in any other state. t His can is specifically styled using the  : Link  pseudo class.
  • visited : A link when it had already been visited (exists in the browser's history), styled using the& nbsp : Visited  pseudo class.
  • Hover : A Link when it was being hovered over by A user ' s mouse pointer, styled using THE&NBSP; : H Over  pseudo class.
  • Focus : A link when it had been focused (for example moved to by A keyboard user using the  T AB  key or similar, or programmatically focused using  Htmlelement.focus () )-this is styled U Sing the  : Focus  pseudo class.
  • Active : A Link when it was being activated (e.g. clicked on), styled using the  : activepseudo class.

  a {}a:link {}a:visited {}a:focus {}a:hover {}a:active {}

  Order is important: LVFHA

  <div class="one"></div><div class="two"></div>

  html {  font-family: sans-serif;  background: #ccc;}.one, .two {  background: red;  width: 300px;  height: 150px;  padding: 20px;  border: 10px solid black;  margin: 20px auto;}.two {  box-sizing: border-box;}

  var one = document.querySelector(‘.one‘);var two = document.querySelector(‘.two‘);function outputWH(box) {  var width = box.offsetWidth;  var height = box.offsetHeight;  box.textContent = ‘Width: ‘ + width + ‘px, Height: ‘ + height + ‘px.‘}outputWH(one);outputWH(two);

  When you want to generate a border-box (in other words, you want to create a box with border as the outer border of the box instead of the content)-the padding and border that are set for him are included inside the box https:// Developer.mozilla.org/en-us/docs/learn/css/styling_boxes/box_model_recap

CSS Note from MDN