Embedded Files
HTML /
1. BASICS
CSS stands for Cascading Style Sheets, stylesheets for short.
The basic HTML page appearance is handled by the actual browser (browser default). A CSS definition modifies these default definitions.
A CSS is a definition contains stylistics (appearance) of an HTML web page, including the design, layout and variations in display for different devices and screen sizes.
Ancestor of CSS technique was using specific property parameters in HTML e.g. width=, height=, border=. This technique is inline (local on tags) and need much effort to maintain the style throughout elements, page and website.
A CSS definition contains one or more style property definitions. A property can be width, color of an element, also weight of a border and so on. The final appearance of an element is controlled by values of many properties together.
A property can be defined by CSS definitions in the hierarchy:
external (website-level) style definitions (via external CSS file, marked in the header)
internal (page-level) style definitions (via style block in the header)
inline (tag-level) style definitions (via the style= parameter)
inline properties (tag-level) definitions (via property parameters)
The external and internal definitions are on the same level. As a result, as the code flow goes definition by definition, the last modification of a property will be alive for that property at the checked element.
The style block in the header can be divided and between the parts the external CSS import can take place. Also, several external CSS-s can be imported at different points of the header. Following the flow, the last modification will be alive for the same property.
An inline definition is on higher level since it has explicit effect on tag-level. So, for the same property, overwrites external and internal values.
A property not modified by any CSS, will keep its browser default value.
Never use inline definitions (style=) together with property parameters (width=, height= etc.), can confuse the code, hard to find them, and can easily lead to appearance errors.
General syntax of a CSS definition:
selector {property:value; property:value; ...}
There can be space before and-or after the : sign.
It is best practice to define external CSS stylesheet per website in order to make it sure the website has global style. When following this, optional style definitions for local (special) elements are needed only. It also becomes possible to define multiple global appearances for a website.
The external CSS is a .css file which is then referenced from the head block of an HTML page.
For referencing, the link tag is used within the head block. The optional type= property identifies the CSS file format, when left, default is text/css.
Commenting is possible in external or internal CSS by utilizing /* opening and */ closing markers. Can be line or multiline, also at the end of a line.
EXAMPLE FOR AN EXTERNAL CSS (CSS_name.css):
EXAMPLE FOR REFERENCING EXTERNAL CSS:
EXAMPLE FOR INTERNAL CSS 1:
EXAMPLE FOR INTERNAL CSS 2:
2. SELECTORS
General syntax of a CSS definition:
selector {property:value; property:value; ...}There can be space before and-or after the : sign.
The selector defines the HTML element. Types are:
simple (select elements by tag-name, id, class, tag-name and class; all elements, grouped selectors)
combinator (select elements based on a specific relationship between them)
pseudo-class (select elements based on a certain state)
pseudo-elements (select and style a part of an element)
attribute (select elements based on an attribute or attribute value)
A value can be:
numeric value (e.g. "3")
numeric value with unit (e.g. "3px", "50%")
text value ("'some_text'")
Please note, there must be no space between a numeric value and its unit.
The class-type definition creates a unique set of property values. Therefore, when referenced inline with the class= parameter, overwrites every matching external and internal property.
In case there is an inline style definition (via style= parameter) for a property defined by externally, internally and-or via the class parameter as well, the local style= values will overwrite the class values.
EXAMPLE FOR SIMPLE SELECTORS (CSS-SIDE):
EXAMPLE FOR SIMPLE SELECTORS (HTML-SIDE):
EXAMPLE FOR ARGUMENT SELECTORS (CSS-SIDE):
EXAMPLE FOR ARGUMENT SELECTORS (HTML-SIDE):
EXAMPLE FOR OVERWRITING CSS:
3. PROPERTIES
For default value, means that the value will be set when the specific property is not set.
For color values, can be verbal (e.g. green, Green), RGB (e.g. rgb(32, 99, 34)), hexadecimal (e.g. #23a5fd), HSL (e.g. hsl(9, 100%, 64%)), RGBA (e.g. rgba(32, 99, 34, 0.6)) or HSLA (hsl(9, 100%, 64%, 0.4)); alpha is decimal number and full transparency equals with 0; HTML/CSS and modern browsers support 140 color names.
For length numbers, possible units are: px, pt, cm, em, % (latter means percentage of related dimension of container element).
For shorthand property, means that many, related properties are set via setting only one property. The order of the values is unimportant; there is SPACE between values; in case a value is left out, the property value set previously will stay alive.
For differentiated sides in a property (e.g. background-position, border-style), the side names are, in order: top, right, bottom, left; can be extended with center.
For value combination for sides (e.g. border-style), the possible combinations are: one value (all sides), two values (top-bottom left-right), three values (top right-left bottom), 4 values (top right bottom left).
For marked side in the property name (e.g. border-left-width), there must be properties for the other sides as well. For short, these properties are summarized as ...x... where x is the name of the side (e.g. border-x-width).
Every HTML element follows the box model. From inside to outside, the content is wrapped around with the padding, which is wrapped around with the border, which is wrapped around with the margins. This system forms rectangles (boxes) around the most inner part (content). The total size of element is interpreted as added values of margin, border width, padding and content size horizontally and vertically. These data define how much space an element occupies.
Margin collapse: total vertical distance of two elements is theoretically the bottom margin of the first element and the top margin of the second element added, however in some cases only the higher margin value will be used by the browser.
EXAMPLE FOR BOX MODEL:
EXAMPLE FOR MARGIN COLLAPSE:
EXAMPLE FOR POSITIONING:
4. SPECIALS
The file-type input style is handled by the specific browser, and presently it is not possible to change that style.
The file input has the ability to receive focus (tabbing), activate for key press while on focus, opening selection dialog, storing file selection, receive files via drag&drop, showing names of selected files, also lets screen readers to detect it.
Workaround is to wrap the input into a label and give button-like style to it while hiding (visually or totally) the original input, visit the SPRING BOOT THYMELEAF EXAMPLES page for HTML code and Javascript examples.
Total hiding blocks all functionalities except opening the dialog and storing file selection.
Please note, every solution has pros and cons, choose one based upon the actual task.
EXAMPLE FOR FILE-TYPE INPUT:
Tables have cornered design by default. In order to give radius to corners, need to give style to border elements independently.
EXAMPLE FOR TABLE, RADIUS IN CORNERS:
The examples below present a random collection of useful tweaks which can be optionally used when the actual task needs it.
EXAMPLE FOR SMALL TWEAKS:
MORE HERE: https://www.w3schools.com/css/css_outline.asp
Google Sites
Report abuse