loading...
Cover image for Complete CSS Guide for beginners and not so beginners

Complete CSS Guide for beginners and not so beginners

joelbonetr profile image JoelBonetR Updated on ・30 min read

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:

  1. Priority 1: Inline styles using style attribute.
  2. Priority 2: Internal and external style sheets.
  3. Priority 3: Browser default
  4. If different styles are defined on the same priority level, the last one has the highest priority.*

This not means 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 :before and :after pseudo-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:

Source

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:

hyphens
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.

source

Comments on CSS:

In HTML you can comment texts using <!-- comment -->

In CSS or SCSS you can comment using double slash // or using slash + asterisk (and asterisk + slash for closure) for multi-line comments like:

// single line comment
/* 
multi 
line
comment
*/

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:


  1. Building CSS Only interactive components from scratch PART 1
  2. Building CSS Only interactive components from scratch PART 2
  3. 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.

Best regards

Posted on May 23 by:

joelbonetr profile

JoelBonetR

@joelbonetr

Senior Web Developer- Intermediate Grade on Computer Systems- High Grade on Web Application Development- Coursed a non-official MBA with Marketing and HR

Discussion

markdown guide
 

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.