Skip to main content

Nexl Form Styling

A Step by Step Guide to Nexl Form Styling

Jenn Gopez avatar
Written by Jenn Gopez
Updated over a week ago

Enhancing the look and feel of your Nexl forms is a powerful way to reinforce your brand’s identity and improve user experience. In this guide, we’ll walk you through the steps to import Fonts and apply additional styling like colors, borders, and padding to make your forms stand out.

Cover photo

Adding a cover photo to your forms can help convey a stronger brand image and create a more impactful impression on your audience.

Follow these simple steps to add a cover photo to your forms.

  1. Click on Add Cover Photo.

  2. Upload your image. You can either drag and drop your image into the uploader or click it to select a file from its location.

  3. Your cover photo will now be displayed at the header section of your form.

Image Requirements:

  • Accepted Formats: JPEG or PNG

  • Maximum Size: 50MB

  • Aspect Ratio: 5:1 (For example, 3000 x 600 pixels)

NOTE: When forms are cloned, cover photos will be cloned as well.

Nexl Form CSS Editor

It allows you to write, edit, and manage Cascading Style Sheets (CSS) code. CSS is a stylesheet language used to control the presentation and layout of HTML elements on a web page. The Nexl Form CSS editor provides a dedicated space for you to work with CSS, often offering features that enhance productivity and appearance.

Our form editor offers two types of styling options:

Global Form Styling

This option is recommended for establishing a consistent brand style across all forms. It allows you to set universal elements such as fonts, colors, and general design aesthetics that apply to every form.

Custom Styling Per Form

This feature enables you to customize individual forms, allowing for specific styling tailored to each form's purpose. This is useful for creating unique designs without impacting the styling of other forms.

Default Form Style

Default Form Confirmation Style

Importing Fonts

Importing fonts is necessary when you want to use specific typefaces in your forms instead of the default system fonts. While default fonts are functional, they might not align with your brand’s identity or the desired aesthetic of your website.

  1. Go to fonts.google.com

  2. Search for your preferred font. In this example, we will use “Oswald”.

  3. Select the preferred font (i.e., “Oswald”)

  4. Click on “Get Font”

  5. Click on “<> Get embed code”

  6. Copy the URL

  7. Paste the URL on a web address bar then hit enter. The woff2 codes will be generated.

  8. Copy the import code (woff2) and paste it into the Nexl Form CSS editor.

  9. Access the NexlForm CSS editor:

    a. Click "Admin”

b. Click “Forms”

c. Click “General Settings”

d. Navigate to the “Styles” section

e. Paste the import code in the styles section:

What is @font-face?

The @font-face rule in CSS allows you to define custom fonts that can be loaded and used on your web pages, even if those fonts are not installed on the user's device. This is essential for ensuring that your forms and other web content display consistently across different browsers and devices.

1. Cyrillic Extended Characters

Explanation:

  • font-family: 'Oswald'; : Names the font so you can easily apply it later in your CSS.

  • font-style: normal; : Specifies that this is the normal, non-italic version of the font.

  • font-weight: 200 700; : Indicates that this font file supports a range of weights from light (200) to bold (700).

  • font-display: swap; : Improves loading performance by showing a fallback font until the "Oswald" font is fully loaded.

  • src: url(...) format('woff2'); : Specifies the location of the font file, which is hosted on Google Fonts, in the woff2 format.

  • unicode-range: U+0460-052F, U+1C80-1C88...; : Defines the specific characters supported by this font file, which are mainly used in extended Cyrillic scripts.

2. Standard Cyrillic Characters

Explanation:

  • unicode-range: U+0301, U+0400-045F...;: This range includes standard Cyrillic characters, which are commonly used in languages like Russian, Ukrainian, and Bulgarian.

How to Use the Imported Font in Your Forms

Once you have defined the @font-face rules, you can easily apply the font to your form elements by using the following CSS:

font-family: ‘Oswald’, sans-serif;

Examples of Custom CSS code to modify forms

Updating Layout and Structure

Full Form Container

Code

Output

@media (min-width: 900px) {

.css-6nhfsr {

width: 100% !important;

max-width: 900px !important;

margin: 0 auto !important;

box-sizing: border-box;

padding: 0 2rem;

}

}

Wrapper Background

/* Change the background colour of wrapper */

.nexl-form-wrapper {

background: #FFF !important;

}

/* Change the main form background color */

.css-6nhfsr {

background-color: #FEF4EA !important; /* beige */

}

.css-53izo1 {

background-color: #fff !important; /* white */

}

/* Change the form background color */

.css-6nhfsr, .css-53izo1 {

background-color: #FEF4EA !important;

}

/* Change the form background color of the Confirmation page*/

.css-1z0pgw6 {

background: #FEF4EA !important;

}

/* Change the wrapper color of the confirmation page*/

.css-1ym5yg{

background: #fff !important;

}

Full form alignment

/* Full form alignment, hiding the vertical scroll bar when embedded */

.nexl-form-wrapper,

.nexl-form-wrapper > div {

display: block !important;

justify-content: flex-start !important;

align-items: flex-start !important;

text-align: left !important;

margin: 5px !important;

padding: 0 !important;

max-width: 100% !important;

width: 780px!important;

box-sizing: border-box;

background-color: #fff !important;

overflow-x: hidden !important;

min-height: auto;

overflow: unset;

}

Footer and Submit Button Order

/* Re-arrange footer and submit button order */

form > .MuiTypography-root.css-yg30e6 {

order: 2; /* Push the footer to the bottom */

}

form > button[type="submit"] {

order: 1; /* Show the submit button before the footer */

}

form {

display: flex;

flex-direction: column;

}

button[type="submit"] {

margin-bottom: 20px !important;

}

Before:

After:

/* Arranging order of button and text element for footer */

/* Ensure the form is a flex container */

form {

display: flex;

flex-direction: column;

}

/* Submit button (D) stays before B and C */

form > button[type="submit"] {

order: 1;

margin-bottom: 20px !important;

}

/* Section C - Designed and security delivered using Nexl Engage.*/

form > .MuiTypography-root.css-qbwvdy:nth-of-type(3) {

order: 3;

}

/* Section D - Address*/

form > .MuiTypography-root.css-qbwvdy:nth-of-type(4) {

order: 4;

}

Before:

After:

Updating Typography and Headings

Code

Output

/* Form main header */

h4 {

font-size: 2.5rem !important; /* Slightly smaller than h1 */

font-weight: 400;

font-family: 'Merriweather' !important;

color: #21090C !important;

line-height: 1.3;

margin: 0.5em 0;

}

/* Description, text helper styling */

p {

font-family: 'Open Sans' !important;

font-size: 16px !important;

line-height: 1.5;

color: #E47D7C !important;

}

/*Form sub-header */

h1 {

font-size: 1.75rem !important; /* Large heading */

font-weight: 400 !important; /* Medium bold */

font-family: 'Merriweather' !important;

color: #643C40 !important;

line-height: 1.235;

margin: 0.5em 0;

}

/*Text element and field description styling */

.css-qbwvdy {

font-family: 'Open Sans' !important;

font-size: 16px !important;

line-height: 1.5;

color: #333132 !important;

}

/* Label styling */

.MuiTypography-root.MuiTypography-subtitle2 {

white-space: normal !important;

overflow-wrap: break-word !important;

text-align: left !important;

font-family: 'Open Sans' !important;

font-weight: bold;

font-size: 18px;

color: #703D46 !important;

line-height: 28px;

padding-right: 10px;

max-width: 260px !important;

}

/*Span styling */

span {

font-family: 'Open Sans' !important;

font-size: 16px !important;

color: #8D5F67 !important;

}

/* Styling the form consent */

#preview-form-Consent .MuiTypography-root.MuiTypography-subtitle2.css-k4uzwc {

font-weight: 400 !important;

}

Updating Form Field Layout

Code

Output

/* Label container width */

.MuiBox-root.css-70qvj9 {

width: 240px !important;

flex-shrink: 0;

display: flex;

align-items: flex-start;

}

/* Text field row layout */

.MuiBox-root.css-1qm1lh {

display: flex !important;

align-items: center !important;

margin-bottom: 16px !important;

}

/* Text field container */

.MuiFormControl-root, .css-1wtialv{

width: 600px !important;

height: 40px !important;

background-color: #FFF !important;

display: flex;

align-items: center;

}

/* Rich Text Editor */

trix-editor {

background-color: #FFF !important;

width: 600px !important;

border: none !important;

padding: 16px !important;

min-height: 120px !important;

box-sizing: border-box;

font-family: 'Open Sans' !important;

color: #8D5F67 !important;

}

/* Editor toolbar styling */

trix-toolbar .trix-button-row {

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

gap: 4px;

}

trix-toolbar .trix-button-group {

display: inline-flex;

margin-left: 0 !important;

margin-right: 4px;

}

trix-toolbar .trix-button-group:last-child {

margin-right: 0;

}

trix-toolbar .trix-button-group > button {

flex-shrink: 0;

}

Updating Checkbox & Radio Styling

Code

Output

/* Two-column layout for checkboxes */

.MuiFormGroup-root.css-1h7anqn {

display: grid !important;

grid-template-columns: 1fr 1fr;

gap: 12px 24px; /* row gap, column gap */

}

Note: It will also change the orientation of the radio buttons. The next code will show how to set the radio button's orientation.

/* Aligning checkbox to the left edge */

.MuiFormControlLabel-root {

margin-left: 0;

padding-left: 0;

}

.MuiCheckbox-root {

margin-left: 0;

padding-left: 0;

}

/* Adjust checkbox size and change background color to white*/

.MuiFormGroup-root.css-1h7anqn .MuiCheckbox-root {

width: 16px !important;

height: 16px !important;

background-color: #FFFFFF !important;

}

/* Remove default color from the checkbox SVG icon */

.MuiCheckbox-root .MuiSvgIcon-root {

color: rgba(243, 243, 243, 0) !important;

}

/* Checked state: Full color */

.Mui-checked .MuiSvgIcon-root {

color: #643C40 !important;

}

/* Radio-button orientation */

.MuiFormGroup-root.MuiRadioGroup-root.css-1h7anqn {

display: flex !important;

}

/* Square radio button */

.MuiRadio-root {

width: 16px !important;

height: 16px !important;

background-color: #FFF !important;

margin-left: 0 !important;

border: #FFF !important;

border-radius: 0 !important;

}

/* Remove default color from the SVG icon */

.MuiRadio-root .MuiSvgIcon-root {

color: rgba(243, 243, 243, 0) !important;

}

/* Radio button Checked state - shows checkmark */

.MuiRadio-root.Mui-checked {

background-color: #FFF !important;

border-color: #FFF !important;

}

/* Checkmark icon */

.MuiRadio-root.Mui-checked::after {

content: "✔";

position: absolute !important;

top: 50% !important;

left: 50% !important;

transform: translate(-50%, -50%) !important;

color: #DD7E7C !important;

font-size: 14px !important;

font-weight: bold !important;

}

/* Adjust spacing between radio and label */

.MuiFormControlLabel-root {

gap: 16px !important; /* Adjust this value as needed */

margin-left: 0 !important; /* Remove default left margin if needed */

}

/*Consent Checkbox */

.PrivateSwitchBase-input[type="checkbox"] {

width: 16px !important;

height: 16px !important;

background-color: #FFF !important;

border: #FFF !important; /* Matches form theme */

border-radius: 0 !important;

}

/* Show the checkmark in theme color when checked */

.PrivateSwitchBase-input[type="checkbox"]:checked::before {

content: '';

display: block;

position: absolute;

top: 2px;

left: 5px;

width: 4px;

height: 8px;

transform: rotate(45deg);

z-index: 2;

}

/* Keep icon shell white ONLY for consent */

span[aria-labelledby="preview-form-Consent"] .MuiSvgIcon-root {

background-color: #FFF !important;

}

/* Checked state color ONLY for consent */

span[aria-labelledby="preview-form-Consent"] .Mui-checked .MuiSvgIcon-root {

color: #643C40 !important;

}

Before:

After:

Updating Input Styling

Code

Output

/* Text field placeholder */

.css-1o6z5ng::placeholder {

color: #808080 !important;

font-family: 'Arial' !important;

font-size: 18px !important;

}

/* Text field input */

.MuiInputBase-input {

font-size: 18px;

font-family: 'Open Sans' !important;

color: #8D5F67 !important;

height: auto !important;

padding: 16px 10px !important;

box-sizing: border-box;

}

/* Input wrapper */

.MuiInputBase-root {

height: 100% !important;

}

/* Text field outline */

.MuiOutlinedInput-notchedOutline {

border-color: #d3d3d3 !important;

}

/* Modify text field outline color on hover. */

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {

border-color: #F8B7B5 !important;

}

Note: Outline color from grayish to pinkish.

Updating Buttons

Code

Output

/*Submit Button*/

button.MuiButton-containedPrimary {

width: 170px !important;

height: 54px !important;

font-family: 'Open Sans' !important;

font-weight: bold;

font-size: 18px;

letter-spacing: 0.5px;

color: #FFF !important;

background-color: #8D5F67 !important;

border: 1px solid transparent !important;

border-radius: 0;

margin: 36px 0 36px 240px !important;

display: block;

position: relative;

cursor: pointer;

transition: 0.3s;

}

/* Button color transition on hover */

button.MuiButton-containedPrimary:hover {

background-color: #FEF4EA !important;

color: #560E20 !important;

border-color: #560E20 !important;

}

Updating copy

Element

Code

Output

Submit Button

/* Changing button copy and radius*/

button.MuiButton-containedPrimary {

width: 170px !important;

height: 54px !important;

display: block;

font-family: 'Open Sans' !important;

font-size: 16px;

font-weight: bold;

letter-spacing: 1px;

background-color: #8D5F67 !important;

border: 1px solid #8D5F67 !important;

padding-left: 30px;

padding-right: 30px;

border-radius: 30px;

margin: 2rem auto;

cursor: pointer;

transition: all 0.3s ease;

position: relative; /* Required for ::after positioning */

color: transparent !important; /* Hides original text */

}

/* Custom visible text via ::after */

button.MuiButton-containedPrimary::after {

content: "Entregar";

color: #FEF4EA; /* Initial color */

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-family: 'Arial', sans-serif;

font-weight: bold;

font-size: 12px;

letter-spacing: 1px;

pointer-events: none;

transition: color 0.3s ease;

}

/* Hover state updates color, background, and border */

button.MuiButton-containedPrimary:hover {

background-color: #FEF4EA !important;

border: 1px solid #8D5F67 !important;

color: transparent !important;

}

/* Change ::after text color on hover */

button.MuiButton-containedPrimary:hover::after {

color: #8D5F67;

}

Before hover:

On hover:

Text field caption or helper text

/* Change copy for text field caption or custom helper text */

#\:r4\:-helper-text {

visibility: hidden; /* Completely hides original from layout & view */

position: relative;

display: inline-block;

width: 100%;

min-height: 1em;

overflow: visible;

text-align: center;

}

#\:r4\:-helper-text::after {

content: "Por favor, introduzca el país.";

visibility: visible;

color: #E47D7C;

position: absolute;

left: 50%;

top: 0;

transform: translateX(-50%);

white-space: nowrap;

}

Hide and change copy for a Select element (e.g., Language Preference select)

/* Hide the original caption only when it follows the Language Preference field */

div[data-cy="Language-Preference:"] + .MuiTypography-root.MuiTypography-caption.css-1319n0l {

visibility: hidden;

position: relative;

min-height: 1em;

width: 100%;

overflow: visible;

text-align: center;

}

/* Replace it with custom helper text */

div[data-cy="Language-Preference:"] + .MuiTypography-root.MuiTypography-caption.css-1319n0l::after {

content: "Por favor, introduzca el idioma de su preferencia:";

visibility: visible;

color: #E47D7C;

position: absolute;

left: 50%;

top: 0;

transform: translateX(-50%);

white-space: nowrap;

}

Select "None"

/* Change Select "None" copy */

.MuiMenuItem-root[data-value=""] {

color: transparent;

position: relative;

}

.MuiMenuItem-root[data-value=""] > * {

display: none !important;

}

.MuiMenuItem-root[data-value=""]::after {

content: "Nada";

color: black;

position: absolute;

top: 50%;

left: 16px; /* Match padding of menu items */

transform: translateY(-50%);

font-family: inherit;

font-size: inherit;

font-weight: inherit;

pointer-events: none;

}

Original Copy:

After:

Hiding Form Elements

Element

Code

Output

Form Title <h4>

/* Hide form title */

.MuiTypography-h4.css-ewufrn {

display: none !important;

}

Nexl Footer

/* Hide "Supported by Nexl" footer main page*/

div.MuiBox-root.css-mkcoy {

display: none !important;

}

/* Hide "Supported by Nexl" footer confirmation page*/

div.MuiBox-root.css-1439hib {

display: none !important;

}

Main page:

Confirmation page:

Placeholder text

/* Hide placeholder text */

/ Hide placeholder label for dropdown /

.MuiFormLabel-root {

display: none !important;

}

/* Target MUI Input placeholder with full vendor support */

.MuiInputBase-input::placeholder {

color: transparent !important;

opacity: 0 !important;

}

.MuiInputBase-input::-webkit-input-placeholder {

color: transparent !important;

opacity: 0 !important;

}

.MuiInputBase-input::-moz-placeholder {

color: transparent !important;

opacity: 0 !important;

}

.MuiInputBase-input:-ms-input-placeholder {

color: transparent !important;

opacity: 0 !important;

}

Before:

After:

Hide placeholder text for dropdown i.e., Country

/* Hide placeholder label for Country dropdown */

.MuiFormLabel-root {

display: none !important;

}

Before:

After:

Editor toolbar

/* Hide editor toolbar */

trix-toolbar,

trix-toolbar * {

display: none !important;

visibility: hidden !important;

height: 0 !important;

overflow: hidden !important;

pointer-events: none !important;

opacity: 0 !important;

}

/* Just in case any direct row is left behind */

.trix-button-row,

.trix-button-group,

.trix-button {

display: none !important;

visibility: hidden !important;

pointer-events: none !important;

height: 0 !important;

opacity: 0 !important;

}

Before:

After:

Updating Hyperlink and Asterisk Stylings

Code

Output

/* Font color for links */

a {

color: #DD7E7C !important;

text-decoration-line: underline !important;

text-decoration-color: #hex !important;

text-decoration-thickness: 1px !important;

text-underline-offset: 2px !important;

}

a:hover {

text-decoration-thickness: 3px !important; /* Thicker on hover */

}

Default link color:

After:

On Hover (note the thickness of the underline):

/* Required asterisk color */

.css-jmj7vr {

color: #FF0000 !important;

}

Before:

After:

Viewport Responsive Rules

Tablet (600px–899px):

/* === Responsive Tablet Layout (600px–899px) === */

@media (max-width: 899px) and (min-width: 600px) {

.MuiBox-root.css-1qm1lh {

flex-direction: column !important;

align-items: stretch !important;

}

.MuiBox-root.css-70qvj9 {

width: 100% !important;

margin-bottom: 0;

}

.MuiFormControl-root,

.css-1wtialv,

.MuiFormGroup-root.css-1h7anqn,

.MuiRadioGroup-root.css-1h7anqn,

trix-editor,

trix-toolbar {

width: 100% !important;

}

button.MuiButton-containedPrimary {

width: 133px !important;

margin-left: 0 !important;

margin-top: 24px !important;

}

.css-1z0pgw6 {

padding: 24px 24px 0 24px !important;

}

}

Mobile (< 600px):

/* === Responsive Mobile Layout (max-width: 599px) === */

@media (max-width: 599px) {

.MuiBox-root.css-1qm1lh {

flex-direction: column !important;

align-items: stretch !important;

}

.MuiBox-root.css-70qvj9 {

width: 100% !important;

margin-bottom: 8px;

}

.MuiFormControl-root,

.css-1wtialv,

.MuiFormGroup-root.css-1h7anqn,

.MuiRadioGroup-root.css-1h7anqn,

trix-editor,

trix-toolbar {

width: 100% !important;

}

button.MuiButton-containedPrimary {

width: 133px !important;

margin-left: 0 !important;

margin-top: 24px !important;

}

.css-1z0pgw6 {

padding: 16px 16px 0 16px !important;

}

}


Important Notes

When customizing fonts with imported fonts and various styles, it’s essential to be aware of certain limitations and considerations that may impact your design and user experience. Here are some key points to keep in mind:

Font Availability and Compatibility

While Google Fonts offers a vast library of typefaces, not all fonts may be available or suitable for your specific use case.

Cross-Browser Compatibility

Not all fonts are supported equally across different browsers and devices. Some fonts may render differently or not display at all on older browsers or devices, which could affect the performance of your forms for some users.

Fallback Fonts

To mitigate compatibility issues, it’s essential to define fallback fonts in your CSS. These are secondary fonts that will be displayed if the custom font fails to load, but they may not perfectly match your intended design.

Limited Visual Elements

Inability to Insert Images - While you can style the borders and backgrounds, you cannot embed images.

Performance Impact

Importing multiple fonts and extensive styling can affect the loading speed of your forms and the overall page. A higher number of HTTP requests for font files can lead to increased load times. It’s advisable to limit the number of fonts used.

In summary, while customizing form styles can significantly improve their appearance and alignment with your brand, it’s important to be aware of these limitations. Balancing aesthetics with functionality, accessibility, and performance will help you create forms that are both beautiful and effective.

Reference

CSS Rule Summary Table

Section

Selector(s)

Purpose / Style Explanation

Layout: Form Container

.css-6nhfsr (900px+ media query)

Centers form layout, limits width to 900px, adds side padding for large screens.

Wrapper Background

.nexl-form-wrapper, .css-6nhfsr, .css-1z0pgw6, .css-1ym5yg

Sets form background to solid white.

Typography (Global)

div, h1, h4, .MuiTypography-root, .css-qbwvdy, .css-yg30e6

Applies Arial font, regular weight, dark gray color across headings and text.

Headings

h1, h4

Sets heading size to ~34px, light font weight, and consistent vertical spacing.

Description Text

.css-qbwvdy, .css-yg30e6

Sets font size to 16px, improves legibility and line height.ets font size, line height, color

Label Styling

.MuiTypography-subtitle2

Bold, left-aligned labels with max width 240px; wraps long text.

Label Override (Consent)

#preview-form-Consent .MuiTypography-subtitle2.css-k4uzwc

Uses normal font weight for consent section labels.

Field Row Layout

.MuiBox-root.css-1qm1lh

Horizontally aligns label and field on desktop; vertical on tablet/mobile.

Label Container

.MuiBox-root.css-70qvj9

Sets label area to fixed width (240px) and prevents shrinkage.

Input Container

.MuiFormControl-root, .css-1wtialv

Sets fixed width (600px) and height (40px) for inputs; aligns center vertically.

Input Text Field

.MuiInputBase-input

Sets font size to 18px and enforces Arial font family.

Placeholder Text

.css-1o6z5ng::placeholder

Light gray placeholder text with reduced opacity and large font.

Input Focus

.css-1o6z5ng:focus

Preserves white background and gray text on focus.

Autofill Handling

input:-webkit-autofill variants

Forces white background and gray text to override browser autofill.

Field Borders

.MuiOutlinedInput-root:hover

Sets light gray border; consistent with overall form style.

.MuiOutlinedInput-notchedOutline

On hover: darkens border to gray for clearer interaction feedback.

Checkbox Layout

.MuiFormGroup-root.css-1h7anqn

Grid layout (2-column by default), adjusts on smaller screens.

Checkbox Styling

.MuiCheckbox-root

Uses light gray color for default state; square corners.

.Mui-checked

Sets checked icon to dark gray for consistency with design palette.

Radio Buttons

.MuiRadio-root .MuiSvgIcon-root

Lighter border for unselected; bold dark fill for selected radio.

Responsive: Tablet

@media (max-width: 899px) and (min-width: 600px) + related selectors

Converts horizontal layout to vertical stacking; adjusts widths to 100%.

Responsive: Mobile

@media (max-width: 599px) + related selectors

Fully stacks form elements; centers submit button; reduces padding.

Submit Button

button.MuiButton-containedPrimary

Bold button with navy background, large text; uses ::after for French "Soumettre" label.

button.MuiButton-containedPrimary::after

Replaces button label visually with "Soumettre" while keeping original text transparent.

Localization (Dropdown)

.MuiMenuItem-root[data-value=""] and variants

Underlined dark text with orange highlight on hover.

Helper Text

.MuiFormHelperText-root

Hides helper text below inputs for a cleaner look.

Hide Footer/Branding

.MuiBox-root.css-mkcoy, .MuiBox-root.css-1439hib

Hides branding or footer sections in the form.

Common CSS Properties by Category

Text Appearance

Property

Description

Syntax

font-size

Controls the size of the text (e.g. 1.25rem, 20px).

selector {

font-size: 16px; /* Sets the size of the font */

}

font-weight

Sets the boldness (normal, bold, 400, 700, etc.).

selector {

font-weight: 600; /* Controls the thickness of text (e.g., normal, bold, 100–900) */

}

font-style

Sets the font to normal, italic, or oblique.

selector {

font-style: italic; /* Sets font style to italic, normal, or oblique */

}

font-family

Defines the typeface (e.g. 'Arial', sans-serif).

selector {

font-family: 'Arial', sans-serif; /* Sets the font family */

}

color

Changes the text color (e.g. #333, red).

selector {

color: #333333; /* Sets the text color */

}

line-height

Controls space between lines of text.

selector {

line-height: 1.5; /* Controls space between lines of text */

}

letter-spacing

Adjusts space between characters.

selector {

letter-spacing: 0.05em; /* Adjusts spacing between letters */

}

word-spacing

Adjusts space between words.

selector {

word-spacing: 0.1em; /* Adjusts spacing between words */

}

text-align

Aligns text: left, right, center, or justify.

selector {

text-align: center; /* Aligns text (left, center, right, justify) */

}

text-transform

Changes case: uppercase, lowercase, capitalize.

selector {

text-transform: uppercase; /* Transforms text (none, capitalize, uppercase, lowercase) */

}

text-decoration

Adds underline, line-through, or none.

selector {

text-decoration: underline; /* Adds decoration (underline, line-through, none) */

}

white-space

Controls how white space is handled (e.g., nowrap, pre).

selector {

white-space: nowrap; /* Controls white space (normal, nowrap, pre, etc.) */

}

text-shadow

Adds shadow behind the text.

selector {

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); /* Adds shadow to text */

}

overflow-wrap

Ensures long words break to fit inside the container.

selector {

overflow-wrap: break-word; /* Allows long words to break and wrap */

}

Box Model (Spacing & Sizing)

Property

Description

Syntax

margin

Sets space outside the element.

selector {

margin: 16px; /* Sets outer spacing */

}

padding

Sets space inside the element.

selector {

padding: 12px; /* Sets inner spacing */

}

width

Sets the width of the element.

selector {

width: 100%; /* Sets width */

}

height

Sets height (60px, 100%).

selector {

height: auto; /* Sets height */

}

max-width

Limits the maximum width.

selector {

max-width: 600px; /* Sets maximum width */

}

min-width

Sets a minimum width.

selector {

min-width: 200px; /* Sets minimum width */

}

box-sizing

Includes padding and border in total width/height.

selector {

box-sizing: border-box; /* Includes padding/border in width/height */

}

Positioning & Layout

Property

Description

Syntax

display

Controls box type (block, inline, flex,grid, contents, inline-block,inline-flex etc).

selector {

display: flex; /* Enables flexbox layout */

}

justify-content

Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Values: flex-start, flex-end, center, space-between, space-around, space-evenly, initial, and inherit.

selector {

justify-content: center; /* Horizontal alignment in flexbox */

}

align-items

Specifies the default alignment for items inside a flexbox or grid container. Values: normal, stretch, center, flex-start, flex-end, start, end, baseline, initial, and inherit.

selector {

display: flex;

align-items: center;

}

flex-direction

Specifies direction in flex containers (column, row).

selector {

flex-direction: column; /* Stack children vertically (row, column) */

}

flex-shrink

Prevents item from shrinking (0).

selector {

flex-shrink: 1; /* Shrinks flex items if needed */

}

gap

Sets space between flex items (e.g. 4px).

selector {

gap: 16px; /* Spacing between flex items */

}

overflow

Manages content overflow (hidden, unset).

selector {

overflow: hidden; /* Hides overflow (visible, hidden, scroll, auto) */

}

overflow-x

Specifically targets horizontal overflow.

selector {

overflow-x: auto; /* Controls horizontal overflow */

}

position

Controls element positioning (static, relative, absolute, etc.).

selector {

position: relative; /* Sets element position context (static, relative, absolute, fixed, sticky) */

}

top, left, right, bottom

Offsets position if position is not static.

selector {

top: 0; left: 0; right: 0; bottom: 0; /* Positions element relative to ancestor */

}

z-index

Controls stacking order.

selector {

z-index: 10; /* Controls stacking order */

}

float

Floats element to left or right.

selector {

float: left; /* Floats element (left, right, none) */

}

clear

Prevents floating elements from affecting layout.

selector {

clear: both; /* Prevents floating elements from wrapping */

}

Background & Border

Property

Description

Syntax

background-color

Sets the background color (hex code or rgba).

selector {

background-color: #fff; /* Sets background color to white */

}

background-image

Adds a background image.

selector {

background-image: url('image.jpg'); /* Sets background image */

}

border

Sets border style, width, and color.

selector {

border: 1px solid #ccc; /* Sets border width, style, and color */

}

border-radius

Rounds the corners of the border.

selector {

border-radius: 8px; /* Rounds corners */

}

box-shadow

Adds a shadow around the element.

selector {

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Adds shadow to box */

}

opacity

Controls transparency level (0 makes elements invisible).

selector {

opacity: 0.8; /* Sets transparency (0 = transparent, 1 = opaque) */

}

Transitions & Effects

Property

Description

Syntax

transition

Animates property changes smoothly.

selector {

transition: all 0.3s ease; /* Smooth animation for property changes (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier) */

}

transform

Rotates, scales, or skews the element.

selector {

transform: scale(1.1); /* Transforms the element (scale, rotate, translate) */

}

opacity

Sets transparency level.

selector {

opacity: 0.8; /* Sets transparency (0 = transparent, 1 = opaque) */

}

visibility

Toggles element visibility.

selector {

visibility: hidden; /* Hides element while preserving layout */

}

animation

Applies keyframe animations.

selector {

animation: fadeIn 2s ease-in-out; /* Runs an animation (needs @keyframes) */

}

Visual Effects & States

Property

Description

Syntax

:hover

Applies styles when the user hovers (e.g. change checkbox color).

selector:hover {

background-color: #e0e0e0; /* Style on hover */

}

::placeholder

Styles placeholder text (hidden in this CSS).

selector::placeholder {

color: #999999; /* Placeholder text style */

}

.Mui-checked

Styles for checked checkboxes/radio buttons.

.Mui-checked {

color: #1976d2; /* Applied to checked MUI components */

}

::before

A pseudo-element inserts some content before the content of the specified element.

selector::before {
content: "your content";
/* additional styles */
}

::after

A pseudo-element inserts some content after the content of the specified element.

selector::after{
content: "your content";
/* additional styles */
}

Form-Specific Styling

Component

Description

Syntax

.MuiFormControl-root

Container for input fields, styled with padding and height.

.MuiFormControl-root {

margin: 16px 0; /* Styles for MUI form control wrapper */

}

.MuiCheckbox-root

Custom-sized checkboxes with background color and spacing.

.MuiCheckbox-root {

color: #000; /* Base styling for MUI checkbox */

}

.MuiRadio-root

Custom radio buttons with embedded checkmark and no default icon.

.MuiRadio-root {

color: #000; /* Base styling for MUI radio */

}

trix-editor

Styled rich text editor with fixed width, padding, font.

trix-editor {

min-height: 150px; /* Styles for Trix rich text editor */

}

button.MuiButton-containedPrimary

Submit button with custom dimensions and color.

button.MuiButton-containedPrimary {

background-color: #1976d2; /* Style for primary contained button */

color: white;

}

Responsive Design

Property

Description

Sample Syntax

@media

Wraps styles for different screen sizes.

@media (max-width: 768px) {

selector {

font-size: 14px; /* Smaller font on tablets */

padding: 8px; /* Adjust padding for smaller screens */

}

}

clamp(), vw, vh

Allows responsive text sizing.

selector {

font-size: clamp(1rem, 2vw, 2rem); /* Grows/shrinks based on viewport */

}

max-width

Used in media queries to adjust layout below certain widths.

selector {

width: 100%;

max-width: 1200px; /* Limits layout width on large screens */

margin: 0 auto; /* Centers content */

}

flex-direction: column

Stacks elements vertically on smaller screens.

@media (max-width: 480px) {

selector {

display: block; /* Stack elements on small screens */

flex-direction: column; /* Stack flex children vertically */

width: 100%; /* Full width for mobile */

}

}

Did this answer your question?