Listed here are some CSS Properties that may be useful:-
align-content:
The align-content property modifies the behavior of the flex-wrap property.
It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
align-items:
Center the alignments for all the items of the flexible <div> element
align-self:
Center the alignments for one of the items inside a flexible element
all:
Change all the properties applied to the element or the element's parent to their initial value
animation:
Binding an animation to a <div> element, using the shorthand property:
This link also refers to animation-delay, animation-direction, etc etc
background:
Set different background properties in one declaration
refers to background-color, background-image, background-position, etc etc
border:
Set the style of the borders for different elements
This link also refers to border-width, border-style, border-color
There are numerous other properties like, border-bottom, border-left, border-radius etc
bottom:
Set the bottom edge of the <div> element to 10px above the bottom edge of
its nearest parent element with some positioning
box-shadow:
Add shadows to different [div] elements
box-sizing:
box-sizing property allows us to include the padding and border in an element's total width and
height (or not:default).
The default setting 'box-sizing:content-box;' makes the box bigger if you
add padding:npx
where the 'box-sizing:border-box;' includes the padding value within the width & height setting.
caption-side:
Specify the placement of captions used with tables
color:
Set the text-color for text used in different elements
column-count:
Divide the text in the [div] element into n columns, eg column:count: 3;
This link also refers to column-gap, column-rule, etc etc
cursor:
CSS can generate a bunch of different mouse cursors using cursor:
display:
The display property specifies the display behavior (the type of rendering box) of an element.
eg display: none, display:inline-block, display:inline, display:block
filter:
The filter property defines visual effects (like blur and saturation) to an element (often [img]).
float:
The float property specifies how an element should float.
Note: Absolutely positioned elements ignore the float property!
Note: Elements after a floating element will flow around it. To avoid this, use the clear
property or the clearfix hack.
font:
The font property is a shorthand property for font-style, font-variant,
font-weight, font-size, font-family
height:
The height property sets the height of an element.
The height of an element does not include padding, borders, or margins!
See also left:,
right:,
width:
justify-content:
The justify-content property aligns the flexible container's items when the items do
not use all available space on the main-axis (horizontally).
@keyFrames:
The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to",
which is the same as 0% and 100%. 0% is the beginning of the animation,
100% is when the animation is complete.
letter-spacing:
The letter-spacing property increases or decreases the space between characters in a text.
linear-gradient:
The linear-gradient property will set a start color and gradually change to your end color.
line-height:
The line-height property specifies the height of a line.
list-style:
The list-style property is a shorthand for the following properties:
list-style-type:, list-style-position & list-style-image
margin:
The margin property sets the margins for an element, and is a shorthand property for
the following properties:
margin-top:, margin-right:, margin-bottom:, margin-left
NOTE...Top and bottom margins of elements are sometimes collapsed into a single margin that
is equal to the largest of the two margins. This means that the vertical margin (top & bottom) between
<p style="margin:30px"> and <p style="margin:20px"> should be 50px (30px + 20px).
But due to margin collapse, the actual margin ends up being 30px!!
This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!
max-height:
The max-height property defines the maximum height of an element.
If the content is larger than the maximum height, it will overflow. How the container will
handle the overflowing content is defined by the overflow property.
See also max-width:,
min-height:,
min-width:,
overflow:
@media:
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:-
width and height of the viewport / width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet
(responsive web design) to desktops, laptops, tablets, and mobile phones.
mix-blend-mode:
The mix-blend-mode property specifies how an element's content should blend with its
direct parent background.
opacity:
The opacity property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all,
0.5 is 50% see-through, and 0 is completely transparent.
outline:
An outline is a line that is drawn around elements, outside the borders,
to make the element "stand out".
The outline property is a shorthand property for:-
outline-width:, outline-style:, outline-color
overflow:
The overflow property specifies what should happen if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an
element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
padding:
An element's padding is the space between its content and its border.
The padding property is a shorthand property for:-
padding-top:, padding-right:, padding-bottom:, padding-left:
Note: Padding creates extra space within an element, while margin creates extra space around an element.
perspective:
The perspective property is used to give a positioned element a 3D perspective.
The perspective property defines how far the object is away from the user. So, a lower value
will result in a more intensive 3D effect than a higher value.
When defining the perspective property for an element, it is the CHILD elements that
get the perspective view, NOT the element itself.
Note: Also look at the perspective-origin:
property, which defines at which position the user is looking at the 3D object.
position:
The position property specifies the type of positioning method used for an
element (static, relative, absolute, fixed, or sticky).
See also my webpages for
Static/Relative & Absolute positioning
and for
fixed & sticky positioning
resize:
The resize property defines if (and how) an element is resizable by the user.
Note: The resize property does not apply to inline elements or to block elements where
overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".
scroll-behavior:
The scroll-behavior property specifies whether to smoothly animate the
scroll position, instead of a straight jump, when the user clicks
on a link within a scrollable box.
table-layout:
The table-layout property defines the algorithm used to lay out table cells, rows, and columns.
Note: The main benefit of table-layout: fixed; is that the table renders much faster.
On large tables, users will not see any part of the table until the browser has rendered
the whole table. So, if you use table-layout: fixed, users will see the top of the table
while the browser loads and renders rest of the table. This gives the impression
that the page loads a lot quicker!
text-align:
The text-align property specifies the horizontal alignment of text in an element.
left|right|center|justify
Note... When I tried adding a [span] [/span] within a [p] [/p] and tried to center the [span]
it did not work until I set the span style to display: block.
see blockquote
comments on the Elements not used much
form
(oddElements.html)
text-decoration:
The text-decoration property specifies the decoration added to text,
and is a shorthand property for:
text-decoration-line:, text-decoration-color:, text-decoration-style:
text-indent:
The text-indent property specifies the indentation of the first line in a text-block.
text-shadow:
The text-shadow property adds shadow (and blur) to text.
This property accepts a comma-separated list of shadows to be applied to the text.
text-transform:
The text-transform property controls the capitalization of text.
It can make your text all UPPERCASE / lowercase or capitalizes Each Word.
transform: & transition:
The transform property allows you to rotate, scale, move, skew, etc., elements.
The transition property allows you to spin, move elements
See also my webpages for some examples...
Transform & Transition - or -
Animation
user-select:
The user-select property specifies whether the text of an element can be selected
or highlighted (stop cut & paste from working).
vertical-align:
The vertical-align property sets the vertical alignment of an element.
visibility:
The visibility property specifies whether or not an element is visible.
Note: Hidden elements take up space on the page BUT if you use the display:none property instead it
will remove an element from the document layout!
white-space:
The white-space property specifies how white-space inside an element is handled.
It can determine if spaces are collapsed in to a single space
or wrap to the next line or even stay exactly as it is laid out (spaces and all).
(I'm not sure I liked it when I played with it but I did not try for long)
word-break:
The word-break property specifies how words should break when reaching the end of a line.
See also
word-wrap: for more.
z-index:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position: absolute / relative / fixed or sticky).
(use when you want to postion an element over another element)