title: "Complete CSS Guide for beginners and not so beginners"
published: true
description: "A complete guide of CSS workflow, selectors, pseudo-selectors and CSS operation"
tags: beginners, career, css, tutorial
cover_image: https://binima.com/wp-content/uploads/2018/05/css.jpg
---not
Understanding CSS
What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed using rules.
CSS Syntax
A CSS rule consists of a selector and one or more declaration blocks:
How to add CSS styles to your project?
There's three ways CSS can be inserted into an HTML document:
- As external source (another file on your project or a CDN link, for example):
<link rel="stylesheet" href="myStyles.css"> - Internal Stylesheet (On the header or top body of your HTML file using style html tag):
<style> // my css code </style>
- Inline. I.E. on the same html tag using style attribute:
<p style="font-weight: bold;">
Recommendation:
Add CSS files as external stylesheets but stored locally on your project. This reduces calls to external servers while performing well, specially on HTTP/2 environment. If you have a bad server/hosting provider, on a remote country (from your target users scope) and/or using HTTP/1 some benchmarking tools may suggest you to use a CDN, in which case could be better to keep the CSS files on your project and use a cache service such as cloudflare.
Basic selectors
the dot . selects a class name and hashtag # selects an id. For example, on the following html:
<div id="main-content" class="container>
The selector #main-content will point to the html id attribute, .container will search html tags with container as the value of their class attribute and #container or .main-content will not match anything as there's no main-content class or container id on the document.
This will be expanded below. I'll add the full list and explanation of each selector below, after all basics.
Cascading Order
If different styles are specified for HTML elements, the styles will cascade into new styles with the following priority:
- Priority 1: Inline styles using style attribute.
- Priority 2: Internal and external style sheets.
- Priority 3: Browser default
- If different styles are defined on the same priority level, the last one has the highest priority.*
This does not mean that the last you type with same priority will be applied, if it's chunked into different stylesheets, then the order you link them to your html also is not the loading order.
"The last one with highest priority" means specifically the last one rendered by the browser.
OK this is the basis, but there's much more to know about CSS priorities:
The most important thing, that is strong enough to override base priorities listed above is the SPECIFICITY. You can create a selector more specific or less specific, let's see some examples:
On a given html like this:
<div id="main-content" class="container">
<div class="header">
<p> TITLE </p>
</div>
<div class="section1">
<p> TEXT CONTENT </p>
</div>
</div>
The following CSS rules will apply to the same element:
#main-content.container { background: green; }
#main-content { background: red; }
.container { background: blue; }
So which background color will our <div id="main-content class="container"> take?
It will be blue because is the last one? NO, it will be green because it's more specific.
We are selecting elements with id="main-content" which have class="container" too, not only each separately.
OK and... what if I want it yellow but can't edit this CSS rules because I'm on a big project and this could break something else?
Be more specific!
div#main-content.container { background: yellow; }
Now we are selecting specifically a <div> HTML tag which has an id attribute with main-content as value, and which also has a class html attribute with container as value.
Ok but there's no more to take for being more specific. What about if I'm in this situation and I need it to be white?
div#main-content.container { background: white !important; }
!important
this is a big double edged Katana from a big japanese war robot, take care with !importants, please.
Using important statement will make your rule hard or impossible to override. This means that if you are on a company with the hands on a project and you use it, you may be blocking a mate for overriding your styles on a design change. Moreover you may be blocking yourself from the future for being able to override it, so please, take care for not having to hate the "me" from the past.
You can add priority selecting items that are inside other items from html tag to the tag you need.
Child Selectors
Or Nesting Selectors are a whitespace, that matches with all childs (described) of a (described) element ( div#main p.bold will match all <p class="bold"> that are directly or indirectly inside the <div id="main">) and > which matches direct childs ( div#main>p.bold will match any <p class="bold"> that is a direct child of the <div id="main">).
For example:
html>body>div#main-content p { font-weight: bold; }
This will select all <p> tags that are inside (no matter the level) a <div id="main-content"> which is directly inside the body html tag, which are directly inside the html tag (in fact, body will be always a direct child of html).
So ALL <p> tags in this following snippet will be selected (and it's font will be bolded):
<html>
<head>
<title> My Example </title>
</head>
<body>
<div id="main-content">
<p> lorem ipsum </p>
<div class="content-block">
<p> dolor sit amet </p>
</div>
</div>
</body>
</html>
CSS Combinators List:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
- wildcard selector (*)
Tag selectors
Tags selectors are easy to understand, simply type the same tag you want to match. For example, for matching all p tags (no matter their location inside the structure):
p { font-family: 'Ubuntu', sans-serif; }
Attribute selectors:
You can match attribute and attribute-value pair too.
This CSS:
[data-action="expand"] { background: goldenrod; }
[href="https://google.es"] { font-weight: bold; color: white; }
will match the following html:
<div data-action="expand">
<a href="https://google.es"> Go to google </a>
</div>
Pseudo-selectors
pseudo is a prefix that means "pretended and not real", so why they're called pseudo-selectors?
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree (DOM).
-
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the
:beforeand:afterpseudo-elements give access to generated content). - Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are
:first-child(and another child and type pseudo selectors), which can be deduced from the document tree, and:lang(), which can be deduced from the document tree in some cases.
So basically, a pseudo-class is something you can attach a style to, but you never print it out in the HTML by your own. Also, a pseudo-class can be acquired and lost depending on user interaction with the UI.
Pseudo Classes List:
| Selector | Example | Example description |
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Selects all visited links |
Pseudo Elements List
| Selector | Example | Example description | ::after | p::after | Insert content after every <p> element |
| ::before | p::before | Insert content before every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
CSS3 Properties List
- Categorized. Alphabetically ordered -
Animation Properties
| Property | Description |
| animation | Specifies the keyframe-based animations. |
| animation-delay | Specifies when the animation will start. |
| animation-direction | Specifies whether the animation should play in reverse on alternate cycles or not. |
| animation-duration | Specifies the number of seconds or milliseconds an animation should take to complete one cycle. |
| animation-fill-mode | Specifies how a CSS animation should apply styles to its target before and after it is executing. |
| animation-iteration-count | Specifies the number of times an animation cycle should be played before stopping. |
| animation-name | Specifies the name of @keyframes defined animations that should be applied to the selected element. |
| animation-play-state | Specifies whether the animation is running or paused. |
| animation-timing-function | Specifies how a CSS animation should progress over the duration of each cycle. |
Background Properties
| Property | Description |
| background | Defines a variety of background properties within one declaration. |
| background-attachment | Specify whether the background image is fixed in the viewport or scrolls. |
| background-blend-mode | Specifies the blending mode of each background layer (color/image) |
| background-clip | Specifies the painting area of the background. |
| background-color | Defines an element's background color. |
| background-image | Defines an element's background image. |
| background-origin | Specifies the positioning area of the background images. |
| background-position | Defines the origin of a background image. |
| background-repeat | Specify whether/how the background image is tiled. |
| background-size | Specifies the size of the background images. |
Border Properties
| Property | Description |
| border | Sets the width, style, and color for all four sides of an element's border. |
| border-bottom | Sets the width, style, and color of the bottom border of an element. |
| border-bottom-color | Sets the color of the bottom border of an element. |
| border-bottom-left-radius | Defines the shape of the bottom-left border corner of an element. |
| border-bottom-right-radius | Defines the shape of the bottom-right border corner of an element. |
| border-bottom-style | Sets the style of the bottom border of an element. |
| border-bottom-width | Sets the width of the bottom border of an element. |
| border-color | Sets the color of the border on all the four sides of an element. |
| border-image | Specifies how an image is to be used in place of the border styles. |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box. |
| border-image-repeat | Specifies whether the image-border should be repeated, rounded or stretched. |
| border-image-slice | Specifies the inward offsets of the image-border. |
| border-image-source | Specifies the location of the image to be used as a border. |
| border-image-width | Specifies the width of the image-border. |
| border-left | Sets the width, style, and color of the left border of an element. |
| border-left-color | Sets the color of the left border of an element. |
| border-left-style | Sets the style of the left border of an element. |
| border-left-width | Sets the width of the left border of an element. |
| border-radius | Defines the shape of the border corners of an element. |
| border-right | Sets the width, style, and color of the right border of an element. |
| border-right-color | Sets the color of the right border of an element. |
| border-right-style | Sets the style of the right border of an element. |
| border-right-width | Sets the width of the right border of an element. |
| border-style | Sets the style of the border on all the four sides of an element. |
| border-top | Sets the width, style, and color of the top border of an element. |
| border-top-color | Sets the color of the top border of an element. |
| border-top-left-radius | Defines the shape of the top-left border corner of an element. |
| border-top-right-radius | Defines the shape of the top-right border corner of an element. |
| border-top-style | Sets the style of the top border of an element. |
| border-top-width | Sets the width of the top border of an element. |
| border-width | Sets the width of the border on all the four sides of an element. |
| box-decoration-break | Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. |
Color properties:
| Property | Description |
| color | Specify the color of the text of an element; different formats available. |
| opacity | Specifies the transparency of an element. |
Dimension properties:
| Property | Description |
| height | Specify the height of an element. |
| max-height | Specify the maximum height of an element. |
| max-width | Specify the maximum width of an element. |
| min-height | Specify the minimum height of an element. |
| min-width | Specify the minimum width of an element. |
| width | Specify the width of an element. |
Generated Content properties:
| Property | Description |
| content | Inserts generated content. |
| quotes | Specifies quotation marks for embedded quotations. |
| counter-reset | Creates or resets one or more counters. |
| counter-increment | Increments one or more counter values. |
Flexible Box Layout:
| Property | Description |
| align-content | Specifies the alignment of flexible container's items within the flex container. |
| align-items | Specifies the default alignment for items within the flex container. |
| align-self | Specifies the alignment for selected items within the flex container. |
| flex | Specifies the components of a flexible length. |
| flex-basis | Specifies the initial main size of the flex item. |
| flex-direction | Specifies the direction of the flexible items. |
| flex-flow | A shorthand property for the flex-direction and the flex-wrap properties. |
| flex-grow | Specifies how the flex item will grow relative to the other items inside the flex container. |
| flex-shrink | Specifies how the flex item will shrink relative to the other items inside the flex container. |
| flex-wrap | Specifies whether the flexible items should wrap or not. |
| justify-content | Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved. |
| order | Specifies the order in which a flex items are displayed and laid out within a flex container. |
Font Properties:
| Property | Description |
| font | Defines a variety of font properties within one declaration. |
| font-family | Defines a list of fonts for element. |
| font-feature-settings | Allows control over advanced typographic features in OpenType fonts |
| font-kerning | Controls the usage of the kerning information (how letters are spaced) |
| font-language-override | Controls the usage of language-specific glyphs in a typeface |
| font-size | Defines the font size for the text. |
| font-size-adjust | Preserves the readability of text when font fallback occurs. |
| font-stretch | Selects a normal, condensed, or expanded face from a font. |
| font-style | Defines the font style for the text. |
| font-synthesis | Controls which missing typefaces (bold or italic) may be synthesized by the browser. |
| font-variant | Specify the font variant. |
| font-variant-alternates | Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values. |
| font-variant-caps | Controls the usage of alternate glyphs for capital letters |
| font-variant-east-asian | Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese). |
| font-variant-ligatures | Controls which ligatures and contextual forms are used in textual content of the elements it applies to. |
| font-variant-numeric | Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. |
| font-variant-position | Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font. |
| font-weight | Specify the font weight of the text. |
Grid Layout Properties:
| Property | Description |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties. |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid. |
| grid-auto-rows | Specifies a default row size. |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties. |
| grid-column-end | Specifies where to end the grid item. |
| grid-column-gap | Specifies the size of the gap between columns. |
| grid-column-start | Specifies where to start the grid item. |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties. |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties. |
| grid-row-end | Specifies where to end the grid item. |
| grid-row-gap | Specifies the size of the gap between rows. |
| grid-row-start | Specifies where to start the grid item. |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties. |
| grid-template-areas | Specifies how to display columns and rows, using named grid items. |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout. |
| grid-template-rows | Specifies the size of the rows in a grid layout. |
List Properties:
| Property | Description |
| list-style | Defines the display style for a list and list elements. |
| list-style-image | Specifies the image to be used as a list-item marker. |
| list-style-position | Specifies the position of the list-item marker. |
| list-style-type | Specifies the marker style for a list-item. |
Margin Properties:
| Property | Description |
| margin | Sets the margin on all four sides of the element. |
| margin-bottom | Sets the bottom margin of the element. |
| margin-left | Sets the left margin of the element. |
| margin-right | Sets the right margin of the element. |
| margin-top | Sets the top margin of the element. |
Multi-column Layout Properties:
| Property | Description |
| column-count | Specifies the number of columns in a multi-column element. |
| column-fill | Specifies how columns will be filled. |
| column-gap | Specifies the gap between the columns in a multi-column element. |
| column-rule | Specifies a straight line, or "rule", to be drawn between each column in a multi-column element. |
| column-rule-color | Specifies the color of the rules drawn between columns in a multi-column layout. |
| column-rule-style | Specifies the style of the rule drawn between the columns in a multi-column layout. |
| column-rule-width | Specifies the width of the rule drawn between the columns in a multi-column layout. |
| column-span | Specifies how many columns an element spans across in a multi-column layout. |
| column-width | Specifies the optimal width of the columns in a multi-column element. |
| columns | A shorthand property for setting column-width and column-count properties. |
Outline Properties:
| Property | Description |
| outline | Sets the width, style, and color for all four sides of an element's outline. |
| outline-color | Sets the color of the outline. |
| outline-offset | Set the space between an outline and the border edge of an element. |
| outline-style | Sets a style for an outline. |
| outline-width | Sets the width of the outline. |
Padding Properties:
| Property | Description |
| padding | Sets the padding on all four sides of the element. |
| padding-bottom | Sets the padding to the bottom side of an element. |
| padding-left | Sets the padding to the left side of an element. |
| padding-right | Sets the padding to the right side of an element. |
| padding-top | Sets the padding to the top side of an element. |
Print Properties:
| Property | Description |
| page-break-after | Insert a page breaks after an element. |
| page-break-before | Insert a page breaks before an element. |
| page-break-inside | Insert a page breaks inside an element. |
Table Properties:
| Property | Description |
| border-collapse | Specifies whether table cell borders are connected or separated. |
| border-spacing | Sets the spacing between the borders of adjacent table cells. |
| caption-side | Specify the position of table's caption. |
| empty-cells | Show or hide borders and backgrounds of empty table cells. |
| table-layout | Specifies a table layout algorithm. |
Text Properties:
| Property | Description |
| direction | Define the text direction/writing direction. |
| tab-size | Specifies the length of the tab character. |
| text-align | Sets the horizontal alignment of inline content. |
| text-align-last | Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify. |
| text-decoration | Specifies the decoration added to text. |
| text-decoration-color | Specifies the color of the text-decoration-line. |
| text-decoration-line | Specifies what kind of line decorations are added to the element. |
| text-decoration-style | Specifies the style of the lines specified by the text-decoration-line property. |
| text-indent | Indent the first line of text. |
| text-justify | Specifies the justification method to use when the text-align property is set to justify. |
| text-overflow | Specifies how the text content will be displayed, when it overflows the block containers. |
| text-shadow | Applies one or more shadows to the text content of an element. |
| text-transform | Transforms the case of the text. |
| line-height | Sets the height between lines of text. |
| vertical-align | Sets the vertical positioning of an element relative to the current text baseline. |
| letter-spacing | Sets the extra spacing between letters. |
| word-spacing | Sets the spacing between words. |
| white-space | Specifies how white space inside the element is handled. |
| word-break | Specifies how to break lines within words. |
| word-wrap | Specifies whether to break words when the content overflows the boundaries of its container. |
Transform Properties:
| Property | Description |
| backface-visibility | Specifies whether or not the "back" side of a transformed element is visible when facing the user. |
| perspective | Defines the perspective from which all child elements of the object are viewed. |
| perspective-origin | Defines the origin (the vanishing point for the 3D space) for the perspective property. |
| transform | Applies a 2D or 3D transformation to an element. |
| transform-origin | Defines the origin of transformation for an element. |
| transform-style | Specifies how nested elements are rendered in 3D space. |
Transtition Properties:
| Property | Description |
| transition | Defines the transition between two states of an element. |
| transition-delay | Specifies when the transition effect will start. |
| transition-duration | Specifies the number of seconds or milliseconds a transition effect should take to complete. |
| transition-property | Specifies the names of the CSS properties to which a transition effect should be applied. |
| transition-timing-function | Specifies the speed curve of the transition effect. |
Visual Formatting Properties:
| Property | Description |
| caret-color | Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable |
| display | Specifies how an element is displayed onscreen. |
| position | Specifies how an element is positioned. |
| filter | Specifies a filter to apply over an element or multimedia file (images, videos..) |
| top | Specify the location of the top edge of the positioned element. |
| right | Specify the location of the right edge of the positioned element. |
| bottom | Specify the location of the bottom edge of the positioned element. |
| left | Specify the location of the left edge of the positioned element. |
| float | Specifies whether or not a box should float. |
| clear | Specifies the placement of an element in relation to floating elements. |
| z-index | Specifies a layering or stacking order for positioned elements. |
| overflow | Specifies the treatment of content that overflows the element's box. |
| overflow-x | Specifies how to manage the content when it overflows the width of the element's content area. |
| overflow-y | Specifies how to manage the content when it overflows the height of the element's content area. |
| overflow-wrap | Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box). |
| resize | Specifies whether or not an element is resizable by the user. |
| clip | Defines the clipping region. |
| visibility | Specifies whether or not an element is visible. |
| cursor | Specify the type of cursor. |
| box-shadow | Applies one or more drop-shadows to the element's box. |
| box-sizing | Alter the default CSS box model. |
Other Properties:
| Property | Description |
| all | Resets all properties (except unicode-bidi and direction) |
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box. |
| Sets how to split words to improve the layout of paragraphs. | |
| image-rendering | Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled. |
| isolation | Defines whether an element must create a new stacking content. |
| mix-blend-mode | Specifies how an element's content should blend with its direct parent background |
| object-fit | Specifies how the contents of a replaced element should be fitted to the box established by its used height and width. |
| object-position | Specifies the alignment of the replaced element inside its box. |
| pointer-events | Defines whether or not an element reacts to pointer events. |
| scroll-behavior | Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump. |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically. |
CSS3 At-Rules:
| Property | Description |
| @charset | specifies the character encoding of an external style sheet. |
| @font-face | Enables the use of downloadable web fonts. |
| @import | Imports an external style sheet. |
| @keyframes | Specifies the values for the animating properties at various points during the animation. |
| @media | Sets the media types for a set of rules in a style sheet. |
| @page | Defines the dimensions, orientation, and margins of a page box for printing environments. |
Comments on CSS:
In HTML you can comment texts using <!-- comment -->
In CSS or SCSS you can comment using slash + asterisk (and asterisk + slash for closure) for multi-line comments like:
/* multiIf you are using Sass / SCSS you can also add comments using double slash // for single line comments, see example below
line
comment */
// single line comment
#main-content.container { background: green; }
#main-content { background: red; }
// .container { background: blue; }
Vendor prefix / Property Prefixing:
So from the perspective of a front-end web developer, browser prefixes are used to add new CSS features onto a site while having comfort knowing that the browsers will support those styles. This can be especially helpful when different browser manufacturers implement properties in slightly different ways or with a different syntax.
The CSS browser prefixes that you can use (each of which is specific to a different browser) are:
| Android, Chrome, iOS (including firefox for iOS), Safari, Opera (new versions); Any webkit-based browser. | -webkit- |
| Mozilla Firefox | -moz- |
| Internet Explorer, Edge | -ms- |
| Opera (old pre-webkit versions) | -o- |
In most cases, to use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. The prefixed versions would always come first (in any order you prefer) while the normal CSS property will come last. For example, if you want to add a CSS3 transition to your document, you would use the transition property as shown below:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
Remember, some browsers have a different syntax for certain properties than others do, so don’t assume that the browser-prefixed version of a property is exactly the same as the standard property. For example, to create a CSS gradient, you use the linear-gradient property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix while early versions of Chrome and Safari use the prefixed property -webkit-gradient.
Also, Firefox uses different values than the standard ones.
The reason that you always end your declaration with the normal, non-prefixed version of the CSS property is so that when a browser does support the rule, it will use that one. Remember how CSS is read. The later rules take precedence over earlier ones if the specificity is the same, so a browser would read the vendor version of a rule and use that if it does not support the normal one, but once it does, it will override the vendor version with the actual CSS rule.
CSS Properties Synergy:
It's near impossible for me to create a full doc about all css synergies, but I am obliged to notify you about this. For many reasons:
- Possible unexpected behavior
- Ways to reach things not defined by single properties or not working inside some layout.
For example, you can set this properties into a div HTML element: max-width: 600px; margin: 0 auto; and it will be centered on the screen, occupying 600px as maximum.
We didn't set align-self: center, nor justif-content or other centering property or value, but setting the x-axis margin to auto jointly with max-width property (when the window is bigger than 600px, obviously) will make the div show centered respectively to the screen.
Of course you can reach the same setting a parent div with display: flex; justify-content: center; and then a child div with max-width: 600px;
There's a logic between the apparent chaos you may found after reading this last paragraph, simply think on what properties do:
- max-width: 600px; Limits the width of an element to 600px.
- By default all items are positioned "top: 0; left: 0;" so it will start from left: 0; to left: 600;
- Margin specifies the distance between objects, setting margin: 0 auto; means that we want no margin on Y-axis but we want X-axis margin for being auto, that means, read the available free space, divide it by 2 and set each half on each side of the element. Of course, this causes the item centering.
So don't worry about synergies, when you find one simply try to understand why it's working that way and you'll learn fast.
Advice:
There are tones of properties I'm adding step by step. Some of them are not standard or not allowed by all browsers. Sometimes you'll find a workaround such prefixing the property or using javascript to reach the DOM property (if any).
I highly recommend you to search the properties you are going to use on can I use . If you don't find what you want here then search for the property on mdn.
If you are going to build something that works on chrome it's OK because it usually can use almost all properties, but if you need compatibility or retro-compatibility with old browsers, you'll need to search this property compatibility more accurately.
Examples:
I'm posting some posts about building interactive components using CSS that you may find useful, you can take a look at the posts here:
- Building CSS Only interactive components from scratch PART 1
- Building CSS Only interactive components from scratch PART 2
- Building CSS Only interactive components from scratch PART 3
I'll add more content here to increase the informative content wrapped on a single post, like units, color formats and so on.
Hope you find all that useful and if you have any question please leave a comment and share :)
EDIT / Changelog
- Added more than 40 properties, each with its description.
- Added Grid Layout Properties block.
- Added Other Properties block.
- Added prefixing documentation.
- Added advice, specially for newbies.
- Added external sources.
- Added css properties synergy explanation.
- Corrections about comments
Best regards
Top comments (5)
As a developer newbie and reading through, I immediately told myself "I'm definitely using this as a resource when next I'm building" lol
At best, I'll come copy an element or class function that I need from here and google it to know the html tag to apply in-line. 😁
PS: Am I the only newbie who's finding CSS Selectors a big deal? Like it can be quite overwhelming to be honest. And I wonder what awaits me in Javascript or React 😟
Well, CSS and JS have a totally different logic so don't take it to comparison, it really could be simpler to learn a framework than an entire language (as the framework uses it's own scope with it's own functions). Here's a CSS guide (not 100% complete TBH), that means almost all about a "language" and of course, JavaScript is more extended but CSS could be tricky and so usefull at the same time, check the linked posts on the footnotes and you'll see some nice features :)
If you are learning check my post "Building an efficient portfolio from scratch" where I tried to cover all the workaround that you can find on a nowadays company but simplified as much as I could.
Hope it helps you :)
Thanks a lot! I'll be sure to check it.
don't worry, you're not the only one, I'm stuck with these things, it must be at least 2 weeks and I'm going crazy, it's really frustrating
Wow...