codebook
develop
mozilla
mdn ≈ w3d ≈ w3s
new... style notes ...emerging technology
mozilla
new... style notes ...emerging technology
explore
html/css/pseudo w
main root...
ᘛabcdefghijklmnoᘚ
m
:root
w
m
html
w
document metadata...
ᘛabcdefghijklmnoᘚ
m
base
w
m
head
w
m
link
w
m
meta
w
m
style
w
m
title
w
sectioning root...
ᘛabcdefghijklmnoᘚ
m
body
w
content sectioning...
ᘛabcdefghijklmnoᘚ
m
address
w
m
article
w
m
aside
w
m
footer
w
m
header
w
m
h1-h6
w
m
main
w
m
main
w
m
nav
w
m
section
w
text content...
ᘛabcdefghijklmnoᘚ
m
blockquote
w
m
dd
w
m
div
w
m
dl
w
m
small
w
m
dt
w
m
figcaption
w
m
figure
w
m
hr
w
m
li
w
m
menu
w
m
ol
w
m
p
w
m
pre
w
m
ul
w
inline text semantics...
ᘛabcdefghijklmnoᘚ
m
a
w
m
abbr
w
m
b
w
m
bdi
w
m
bdo
w
m
br
w
m
cite
w
m
code
w
m
data
w
m
dfn
w
m
em
w
m
i
w
m
kbd
w
m
mark
w
m
q
w
m
rp
w
m
rt
w
m
ruby
w
m
s
w
m
samp
w
m
small
w
m
span
w
m
strong
w
m
sub
w
m
sup
w
m
time
w
m
u
w
m
var
w
m
wbr
w
image and multimedia...
ᘛabcdefghijklmnoᘚ
m
area
w
m
audio
w
m
img
w
m
map
w
m
track
w
m
video
w
embedded content...
ᘛabcdefghijklmnoᘚ
m
embed
w
m
iframe
w
m
object
w
m
picture
w
m
source
w
scripting...
ᘛabcdefghijklmnoᘚ
m
canvas
w
m
noscript
w
m
script
w
demarcating edits...
ᘛabcdefghijklmnoᘚ
m
del
w
m
ins
w
table content...
ᘛabcdefghijklmnoᘚ
m
caption
w
m
col
w
m
colgroup
w
m
table
w
m
tbody
w
m
td
w
m
tfoot
w
m
th
w
m
thead
w
m
tr
w
forms...
ᘛabcdefghijklmnoᘚ
m
button
w
m
datalist
w
m
fieldset
w
m
form
w
m
input
w
m
label
w
m
w
m
meter
w
m
option
w
m
output
w
m
progress
w
m
select
w
m
textarea
w
interactive elements...
ᘛabcdefghijklmnoᘚ
m
details
w
m
dialog
w
m
summary
w
math...
ᘛabcdefghijklmnoᘚ
m
calc()
w
(math)
m
max()
w
m
min()
w
web components...
ᘛabcdefghijklmnoᘚ
m
slot
w
m
template
w
css elements - a...
ᘛabcdefghijklmopqrstuvwzᘚ
m
--*
w1
w2
m
accent-color
w
m
align-content
w
m
align-items
w
m
align-self
w
m
all
w
m
animation
w
m
animation-delay
w
m
animation-direction
w
m
animation-duration
w
m
animation-fill-mode
w
m
animation-iteration-count
w
m
animation-name
w
m
animation-play-state
w
m
animation-timing-function
w
m
aspect-ratio
w
css elements - b...
ᘛabcdefghijklmopqrstuvwzᘚ
m
backdrop-filter
w
m
backface-visibility
m
m
background
w
m
background-attachment
w
m
background-blend-mode
w
m
background-clip
w
m
background-color
w
m
background-image
w
m
background-origin
w
m
background-position
w
m
background-position-x
w
m
background-position-y
w
m
background-repeat
w
m
background-size
w
m
block-size
w
m
border
w
m
border-block
w
m
border-block-color
w
m
border-block-end-color
w
m
border-block-end-style
w
m
border-block-end-width
w
m
border-block-start-color
w
m
border-block-start-style
w
m
border-block-start-width
w
m
border-block-style
w
m
border-block-width
w
m
border-bottom
w
m
border-bottom-color
w
m
border-bottom-left-radius
w
m
border-bottom-right-radius
w
m
border-bottom-style
w
m
border-bottom-width
w
m
border-collapse
w
m
border-color
w
m
border-image
w
m
border-image-outset
w
m
border-image-repeat
w
m
border-image-slice
w
m
border-image-source
w
m
border-image-width
w
m
border-inline
w
m
border-inline-color
w
m
border-inline-end-color
w
m
border-inline-end-style
w
m
border-inline-end-width
w
m
border-inline-start-color
w
m
border-inline-start-style
w
m
border-inline-start-width
w
m
border-inline-style
w
m
border-inline-width
w
m
border-left
w
m
border-left-color
w
m
border-left-style
w
m
border-left-width
w
m
border-radius
w
m
border-right
w
m
border-right-color
w
m
border-right-style
w
m
border-right-width
w
m
border-spacing
w
m
border-style
w
m
border-top
w
m
border-top-color
w
m
border-top-left-radius
w
m
border-top-right-radius
w
m
border-top-style
w
m
border-top-width
w
m
border-width
w
m
bottom
w
m
box-decoration-break
w
m
box-reflect
w
m
box-shadow
w
m
box-sizing
w
m
break-after
w
m
break-before
w
m
break-inside
w
css elements - c...
ᘛabcdefghijklmopqrstuvwzᘚ
m
calc()
w
m
caption-side
w
m
caret-color
w
m
@charset
w
m
clamp()
w
m
clear
w
m
clip
w
m
clip-path
w
m
w
m
column-count
w
m
column-fill
w
m
column-gap
w
m
column-rule
w
m
column-rule-color
w
m
column-rule-style
w
m
column-rule-width
w
m
column-span
w
m
column-width
w
m
columns
w
m
content
w
m
counter-increment
w
m
counter-reset
w
m
cursor
w
css elements - d...
ᘛabcdefghijklmopqrstuvwzᘚ
m
direction
w
m
display
w
css elements - e...
ᘛabcdefghijklmopqrstuvwzᘚ
m
empty-cells
w
css elements - f...
ᘛabcdefghijklmopqrstuvwzᘚ
m
filter
w
m
flex
w
m
flex-basis
w
m
flex-direction
w
m
flex-flow
w
m
flex-grow
w
m
flex-shrink
w
m
flex-wrap
w
m
float
w
m
font
w
m
@font-face
w
m
font-family
w
m
font-feature-settings
w
m
@font-feature-values
w
m
font-kerning
w
m
font-size
w
m
font-size-adjust
w
m
font-stretch
w
m
font-style
w
m
font-variant
w
m
font-variant-caps
w
m
font-weight
w
css elements - g...
ᘛabcdefghijklmopqrstuvwzᘚ
m
gap
w
m
grid
w
m
grid-area
w
m
grid-auto-columns
w
m
grid-auto-flow
w
m
grid-auto-rows
w
m
grid-column
w
m
grid-column-end
w
m
grid-column-gap
w
m
grid-column-start
w
m
grid-gap
w
m
grid-row
w
m
grid-row-end
w
m
grid-row-gap
w
m
grid-row-start
w
m
grid-template
w
m
grid-template-areas
w
m
grid-template-columns
w
m
grid-template-rows
w
css elements - h...
ᘛabcdefghijklmopqrstuvwzᘚ
m
hanging-punctuation
w
m
height
w
m
hyphens
w
css elements - i...
ᘛabcdefghijklmopqrstuvwzᘚ
m
image-rendering
w
m
@import
w
m
inline-size
w
m
inset
w
m
inset-block
w
m
inset-block-end
w
m
inset-block-start
w
m
inset-inline
w
m
inset-inline-end
w
m
inset-inline-start
w
m
isolation
w
css elements - j...
ᘛabcdefghijklmopqrstuvwzᘚ
m
justify-content
w
m
justify-items
w
m
justify-self
w
css elements - k...
ᘛabcdefghijklmopqrstuvwzᘚ
m
@keyframes
w
css elements - l...
ᘛabcdefghijklmopqrstuvwzᘚ
m
left
w
m
letter-spacing
w
m
line-break
w
m
line-height
w
m
list-style
w
m
list-style-image
w
m
list-style-position
w
m
list-style-type
w
css elements - m...
ᘛabcdefghijklmopqrstuvwzᘚ
m
margin
w
m
margin-block
w
m
margin-block-end
w
m
margin-block-start
w
m
margin-bottom
w
m
margin-inline
w
m
margin-inline-end
w
m
margin-inline-start
w
m
margin-left
w
m
margin-right
w
m
margin-top
w
m
mask-image
w
m
mask-mode
w
m
mask-origin
w
m
mask-position
w
m
mask-repeat
w
m
mask-size
w
m
max-height
w
m
max-width
w
m
max-block-size
w
m
max-inline-size
w
m
max-block-size
w
m
@media
w
m
min-block-size
w
m
min-height
w
m
min-inline-size
w
m
min-width
w
m
mix-blend-mode
w
css elements - o...
ᘛabcdefghijklmopqrstuvwzᘚ
m
object-fit
w
m
object-position
w
m
opacity
w
m
order
w
m
orphans
w
m
outline
w
m
outline-color
w
m
outline-offset
w
m
outline-style
w
m
outline-width
w
m
overflow
w
m
overflow-anchor
w
m
overflow-wrap
w
m
overflow-x
w
m
overflow-y
w
m
overscroll-behavior
w
m
overscroll-behavior-block
w
m
overscroll-behavior-inline
w
m
overscroll-behavior-x
w
m
overscroll-behavior-y
w
css elements - p...
ᘛabcdefghijklmopqrstuvwzᘚ
m
padding
w
m
padding-block
w
m
padding-block-end
w
m
padding-block-start
w
m
padding-bottom
w
m
padding-inline
w
m
padding-inline-end
w
m
padding-inline-start
w
m
padding-left
w
m
padding-right
w
m
padding-top
w
m
paint-order
w
m
perspective
w
m
perspective-origin
w
m
place-content
w
m
place-items
w
m
place-self
w
m
pointer-events
w
m
position
w
css elements - q...
ᘛabcdefghijklmopqrstuvwzᘚ
m
quotes
w
m
w
css elements - r...
ᘛabcdefghijklmopqrstuvwzᘚ
m
resize
w
m
right
w
m
rotate
w
m
row-gap
w
css elements - s...
ᘛabcdefghijklmopqrstuvwzᘚ
m
scale
w
m
scroll-behavior
w
m
scroll-margin
w
m
scroll-margin-block
w
m
scroll-margin-block-end
w
m
scroll-margin-block-start
w
m
scroll-margin-bottom
w
m
scroll-margin-inline
w
m
scroll-margin-inline-end
w
m
scroll-margin-inline-start
w
m
scroll-margin-left
w
m
scroll-margin-right
w
m
scroll-margin-top
w
m
scroll-padding
w
m
scroll-padding-block
w
m
scroll-padding-block-end
w
m
scroll-padding-block-start
w
m
scroll-padding-bottom
w
m
scroll-padding-inline
w
m
scroll-padding-inline-end
w
m
scroll-padding-inline-start
w
m
scroll-padding-left
w
m
w
m
scroll-padding-top
w
m
scroll-snap-align
w
m
scroll-snap-stop
w
m
scroll-snap-type
w
m1
m2
m3
scrollbar
w
css elements - t...
ᘛabcdefghijklmopqrstuvwzᘚ
m
tab-size
w
m
table-layout
w
m
text-align
w
m
text-align-last
w
m
text-decoration
w
m
text-decoration-color
w
m
text-decoration-line
w
m
text-decoration-style
w
m
text-decoration-thickness
w
m
text-emphasis
w
m
text-indent
w
m
text-justify
w
m
text-orientation
w
m
text-overflow
w
m
text-shadow
w
m
text-transform
w
m
top
w
m
transform
w
m
transform-origin
w
m
transform-style
w
m
transition
w
m
transition-delay
w
m
transition-duration
w
m
transition-property
w
m
transition-timing-function
w
m
translate
w
css elements - u...
ᘛabcdefghijklmopqrstuvwzᘚ
m
unicode-bidi
w
m
user-select
w
css elements - v...
ᘛabcdefghijklmopqrstuvwzᘚ
m
w
m
visibility
w
css elements - w...
ᘛabcdefghijklmopqrstuvwzᘚ
m
white-space
w
m
widows
w
m
width
w
m
word-break
w
m
word-spacing
w
css elements - z...
ᘛabcdefghijklmopqrstuvwzᘚ
m
w
pseudo elements...
mdn
w3s
m
::after
w
m
::before
w
m
::first-letter
w
m
::first-line
w
m
::marker
w
m
::placeholder
w
m
::selection
w1
w2
pseudo classes...
<a href="https://example.com#:~:text=for%20use">example</a>
a:target-text { background-color: yellow; }
example.com#:~:text=for%20use
you use styles in cascading style sheet technology (css), in documents and in document extracts, to set the display properties of web page elements: such as individual characters, images, tables, layers, and the body of the page
by using styles, you can efficiently create a consistent look and feel across your pages · any style’s selector, based on a class, an ID, or an html element, determines the content that the style affects
when you create or modify a style, you ‘set’ or ‘reset’ that style’s selector in the associated css · you are defining the style technology on that web site, engaging a global process frequently referred to as web or network administration · style use signals the author (s) responsibility
style is a web or net script that we call code · there are 2 kinds of code that interact on every internet page: namely, html and css
in every text editor that is used for coding, both html and css elements are traditionally lower case, uppercase being reserved for displayed text
most public web pages display type like printed documents due to cultural standards embedded in html · style is mainly deployed by browser built-in html properties that rigidly conform to type standards · css tweaks display to increase or decrease reader interest and interaction, to distract or to focus interest subjectively · most style is a default html behavior
web sites may deploy only non-descriptive div tags, with div styling supporting browser built in html element styling, reducing and controlling seo and other intrinsic factors
html elements are the primary code, placing media objects such as text strings in relation to climate, geopolity, nationality, location, environment, technology, language, all of our physical resources.
css behaviors are the secondary code, adjusting how multimedia, such as these letters here, are displayed in any digital environment: position, perspective, size, weight, color, opacity, layer, container apearance, animation, all of our emotive resources
css is written with a very particular formatting of selectors, elements, values, punctuation, brackets and spaces · that format identifies and is referred to as the “property” of each css statement · the code apppearance that expresses each css element is called a property
the following three descriptions of css code are identical and increasingly detailed
the last line above is the format that we use to write style statements in cascading style sheets, or css
for example,
html { font family: 'Comic Neue', sans-serif; }
contains the css code we use to set set most of the type that appears on this page. code samples on this page use type set using this css,
code { font family: 'Comic Mono', monospace; }
there are countless ways that css can be applied. the three most popular methods are:
a stylesheet file like style.css simply is a collection of property statements like
selector { element: value; }
remember, style can only attribute behavior to html elements
now, that we have a better understanding of style property and format, let's look more closely at the css attributes that determine property and format
a class selector consists of a period ‘.’ followed by a name, such as .alert or p.alert - or by a series of class and id selectors, such as .alert.tip or .alert#footer
use styles with a class selector to apply the same set of properties to multiple items in one or more pages · for example, create a style with a class selector to bisually emphasize particular words on a page
create a style that uses a series of two or more class selectors, or class and id selectors, to apply properties to elements that use all of these styles
append a class selector to an element selector to create a style that affects a specified html element when that element uses the specified class · for example, p.alert affects praragraphs that use the alert class
use styles with an id selector to distinguish a single item from other items on the same page (or network) · for example, create a style with an id to tag that specific location of that style, or to add specific style to just that html element, or to define the appearance of any specific element or of all elements in a specific layer
create a style that uses both an id selector and a series of one or more classes to apply properties to elements that use all of those styles · also, append an id selector to an element when that element uses the specified id · for example, div#footer affects layers that use the footer id
an id selector consists of anumber sign ‘#’ followed by a name, such as, #footer · or an id selector followed by a class selector, such as #footer.alert · or an id selector and a series of class selectors, such as #footer.alert.tip
an element selector consists of an html element such as body, p, ul, img, or table.
use styles with an element selector to define properties that affect every instance of a particcular html element on a web page · for example, create a style that sets the properties or the p element, affecting all paragraphs on a page.
append a class selector or an id selector to an element selector so that a style affects html elements that use a particular class or id · for example, p.alert affects paragraphs that use the alert class, and div#footer affects layers that use the footer id
a group selector consists of two or more class, id, or element selectors separated by ‘,’ commas
group the selectors of styles together when two or more selectors share the same property (s) · for example, group a class selector .alert, an id selector #footer, and a level 1 heading, creating the group selector .alert, #footer, h1
a pseudo selector consists of a selector preceeded by one or two colons... pseudo :class (:hover :active :focus) or pseudo ::element (::first-child ::first-line ::first-letter ::nth-of-type(n))
pseudo class or pseudo element selectors append to an element selector to define properties for a particular state or aspect of that element · for example, set properties of a particular state of a hyperlink, or of the first letter in a paragraph
the descendant selector consists of .class, #id, or element selector followed by a space and a second selector, such as div p or .class div
descendant selectors define properties for an item contained by another item · for example, style that effects paragraphs contained by an article
a child selector consists of a .class, #id, or element followed by ‘>’ a right angle bracket and a second selector, such as div > p
use a child selector to define properties for items that are a direct child of other items · for example, create a style that affects paragraphs contained in a div · however, div p > em can only style em
the adjacent sibling selector consists of a .class, #id, or element selector followed by a spaced ‘ + ’ plus sign and a second selector, such as h1 + p
adjacent sibling selectors define properties for an item that immediately follows another item that shares the same parent item · for example, to creates a drop cap for the first letter of the first paragraph following heading level 1 h1 + p::first-letter
the attribute selector consists of an element selector followed by a ‘[’ left square bracket, an attribute, optionally by ‘=’ an equals sign and a value, then ‘]’ a right square bracket, such as table[border] or table[align=right]
attribute selector defines properties for an element with either a specified attribute or a specified attribute with a specified value · for example, style only tables that have a border
advanced selectors constrain a style so that it only affects elements that match specified criteria · for example, style that sets properties of paragraphs inside specified layers · to constrain a selector, use pseudo-class, pseudo-element, descendant selectors, child selectors,
sibling selectors, attribute selectors or a combination of these
note: some browsers, including windows ie, safari, firefox, display all advanced selectors described here
~
check web page support
caniuse.com
Legitimacy... Links to legitimate code information are complete. Link 'm' is for Mozilla Development Network. Link 'w' is for W3 Schools. Linked resources include information and test coding environments relevant to linked material.
Inclusion... MDN tooltips are typically more verbose. W3S "border-top" is an exception. MDN Try It pages provide only minimal content needed to demonstrate HTML/CSS code. However, W3Schools Try It pages are more comprehensive, adaptable. MDN style list is more comprehensive: e.g., border-inline-end. However, W3S style lists lack many more complex shorthand style pages (2023 January): e.g., border-inline-end. Where ommision exists at W3Schools, sound explanation may appear in Can I Use and similar analyses. Elements and selectors must exist on both MDN and on W3S public pages to appear here.
Links provide comprehensive study resource for web design technologies. However, some selectors are ignored as they are not entertained by both MDN and W3S: for example, abs(), math, portal, svg elements are found only at MDN. For basic howto, both mdn and w3s are helpful. Comprehensive mdn links will leave no stone unturned. Accessible w3s has something for everyone. While mdn tumbles Try Me and teaching into a single page, w3s provides one teaching page and a separate Try it Yourself page.
Style is a conscriptive web technology entirely dependent on specific varying contextual content
hierarchy rests in interactive grouping elements: namely, family elements and unique elements
coding prefers lowercase language except to reproduce print equivalent digittal capitalization
family elements are weighted: the heaviest element is body, followed by article, and so on
grouping elements are article and section ~ containing elements are p and q and blockquote
document complexity invites division of content into individual, often h1-h6 titled sections
a style element contains style information for a document, or part of a document
mac 230108 html data-title bug where data-title fails in same parent tag as img tag linked to display external graphic
mac 230101 css linear gradient bug as follows
content-width, relative topnav and content.
body {
background: linear-gradient(deepskyblue, palegreen, tan);
background-attachment: fixed;
background-size: cover;
I code the above linear gradient background on my own, display fails. Copy same from mdn.org, display works. WTF? I am not allowed to write? This happens with everything often! What is happening in the background?
Some hidden process intercepts my CSS code instructions. Something is hidden in the very same identical CSS code copied from MDN, that only then (when identical code from MDN is pasted into my local document from MDN, only then will any browser in macOS display the simple css style. The very same local style block is happening with TextEdit, Sublime Text, BBEdit, FireFox and with Chrome. Now, it must be macOS and Apple affecting standard linear gradient local style, but only allowing that same style when pasted in from MDN. Why?
Do we all say, “Goodbye press freedom!” Or are Apple and MDN working together to launch css liner gradient, and countless new features of modern web technology? Regardless, MDN must assist to style all web pages. Designers must deploy content respectively.
Apple is in town. How do we make a keyboard shortcut to display Finder‘s collection of “Recent Folders” - Keyboard preferences App Shortcuts, no help, so... Much to do.
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient