📂 Find Templates by Category

📑 Search Results for "Css"

• CSS Basics: Copy-Paste Friendly Guide

  A beginner-friendly CSS style guide with ready-to-use examples. Learn properties, typography, layout, and design essentials.

• CSS: Adding Border-Line Below Heading with border-bottom

  Learn how to add a border line below a heading using the border-bottom property in CSS.

• 【CSS】How to Set Element Height to 100%｜Using h-100 and h-50

  Learn how to set element height to 100% using the CSS classes 'h-100' and 'h-50'. This article explains how to adjust the height of elements while considering the parent container's height setting.

• CSS Template: Button with Hover Color Change (:hover)

  A CSS template for implementing a hover effect that changes button color when the cursor is over it. Simple and great for UX.

• CSS Template: Adjusting padding-left for Icon Button

  This CSS template is designed to add appropriate space to the left side of the icon button. It helps create a button where the icon and text are properly spaced.

• CSS Template: Input Field Decoration (input { border-radius + padding })

  A CSS template for adding border-radius and padding to input fields.

• CSS Template: Changing Border Color on input:focus

  This is a CSS template for changing the border color when the input element is focused.

• CSS Template: letter-spacing: 0.05em;

  A CSS template to slightly increase the space between characters for better readability.

• CSS Template: line-height: 1.8;

  A CSS template to increase line spacing. Includes a practical example that's easy to use even for beginners.

• CSS Template: Loading Spinner (Rotating Circle and Bar)

  A CSS template for creating a loading spinner with a rotating circle or bar.

• 【CSS】Basic Margin and Padding｜How to Use m-0, p-10, m-20, p-5

  Learn the basic techniques for setting margin and padding with CSS. This article explains how to use properties like <code>m-0</code>, <code>p-10</code>, <code>m-20</code>, and <code>p-5</code> with practical examples.

• CSS Template: Margin and Padding Utility Classes

  This template defines utility classes for commonly used vertical margins and paddings. They can be used concisely according to a naming convention.

• 【CSS】Basic Scroll Display｜How to Use overflow-scroll

  Learn how to use CSS's <code>overflow-scroll</code> to display scrollbars for overflowing content. This article explains the basic method of using display: none; and its applications with examples.

• Radio and Checkbox Custom: appearance: none Decoration

  A CSS template for customizing radio buttons and checkboxes. This template uses appearance: none to remove the default styles and adjust the design.

• CSS Template: Rounded Button (border-radius + background)

  A CSS template to easily create a button with rounded corners and background color. Great for beginners.

• CSS: Adding Semi-Transparent Area background-color: rgba(0,0,0,0.5)

  Learn how to create a semi-transparent area using background-color: rgba(0,0,0,0.5) in CSS.

• CSS Template: Slide-in (Left/Right) transform: translateX

  A CSS template using transform: translateX to create slide-in effects from left or right.

• CSS Template: text-align: center;

  A CSS template for centering text horizontally. Useful for titles, buttons, and notice messages.

• CSS Template: Button with Shadow for Depth (box-shadow)

  A CSS template that adds depth to buttons using box-shadow. A simple and practical visual styling effect.

• [CSS] Basics of Centering Text | How to Use text-align

  Learn how to center text using CSS with the text-align: center; property. Includes a copy-paste template with basic and practical examples.

• CSS Template: color: red;

  A simple CSS template for emphasizing text in red. Useful for alerts and important messages.

• CSS Template: Two-Column Layout (25% / 75%)

  A CSS template that creates a two-column layout with a 25% sidebar and a 75% main content area. Ideal for sidebar + content structures.

• [CSS] Comparison Between 100% Width and 50% Width | How to Use w-100

  Compare how to set element widths to 100% and 50% using CSS. Learn how different width settings affect layouts that adapt to parent elements.

• [CSS] Basics of Hiding Elements｜How to Use .d-none

  Learn the basic technique of using the CSS class 'd-none' to hide elements. This method hides elements without removing them from the HTML structure, using 'display: none;'.

• CSS Template: Blinking Text with animation: blink

  A CSS template that uses animation: blink to make text blink.

• 【CSS】Global Font and Background Initial Setup

  This template demonstrates the basic CSS method for setting the global font and background for the website.

• CSS: Adding Border Box with border: 1px solid #ccc; padding: 10px;

  Learn how to create a box with a border and padding using CSS.

• CSS Template: Button Hover Scale Effect with scale()

  A CSS template that gives a slight enlargement effect to a button when hovered using scale().

• CSS Template: Card Layout (Rounded Corners + Shadow)

  A CSS template for creating card-style designs. It uses border-radius and box-shadow to create a soft and modern appearance.

• 【CSS】Site-wide Color Management and Theme Color Setup

  This article explains how to define color variables in CSS using :root and manage the theme colors for the entire site.

• CSS Template: Fixed Height with Scrollable Content

  This CSS template allows you to create elements with a fixed height and scrollable content using a combination of overflow: auto and max-height.

• 【CSS】How to Use ID Selectors

  Learn how to use CSS ID selectors to target specific elements and apply styles.

• 【CSS】How to Use Class Selectors

  This article explains how to use the CSS class selector to target specific elements and apply styles.

• 【CSS】How to Change the Color of p-tag Using Tag Selectors

  Learn how to use CSS tag selectors to change the color of p-tag to orange. This tutorial demonstrates how to modify the color of elements using tag selectors.

• 【CSS】Basic Method to Hide Elements｜Using .d-none

  A basic technique for hiding elements using the 'd-none' class in CSS. Use 'display: none;' to hide elements without removing them from the HTML structure.

• CSS Reset: Remove text-decoration from a tag

  Learn how to reset the default text-decoration (underline) on links (a tag) and apply custom styles.

• CSS Template: Disabled Button Style (button:disabled)

  A CSS template for styling buttons in their disabled state using :disabled. Visually communicates an inactive button, with changes to color and cursor.

• CSS Template: display: flex;

  A CSS template that uses flex layout to arrange elements horizontally. Useful for box layouts and responsive design.

• CSS: Adding Dotted Border-Line with border-style: dotted

  Learn how to create a dotted border-line using the border-style: dotted property in CSS.

• CSS Template: @keyframes fadeIn + opacity

  A CSS template using @keyframes and opacity to add a fade-in effect to an element.

• CSS Template: float: left;

  A CSS template that uses float to align elements horizontally. Useful for older browsers and simple box layouts.

• CSS Template: font-size: 0.8em;

  A CSS template to display text in a slightly smaller size. Includes practical examples that are easy for beginners.

• CSS Template: font-style: italic;

  A CSS template to display text in italic (slanted) style. Includes beginner-friendly examples.

• How to Make Text Bold with CSS font-weight: bold

  A beginner-friendly guide on how to use the CSS font-weight property to make text bold. Includes a ready-to-use copy-and-paste demo template.

• Form Layout: Utilizing form-group

  A CSS template for grouping form fields and creating a visually organized layout. By using the form-group class to group related fields, this template enhances the user input experience.

• CSS: Adding Gradient Background with background: linear-gradient(...)

  Learn how to add a gradient background using the background: linear-gradient() property in CSS.