CSSCasts: CSS libraries Plugins Tips & Tricks

Learn to create modern shape dividers using CSS and SVG, including polygon shapes, Illustrator workflows, exporting SVGs, and applying responsive dividers with z-index and absolute positioning.

Learn to build a dynamic shine effect for images with a glass shine box using CSS. Master flexbox centering, overlays, and simple animations to enhance photo visuals.

Learn to craft decorative dividers using border-image and linear gradients, including butterfly images as borders, adjustable sizing, and section dividers for blog articles.

Learn to create custom cursors in CSS using emojis or images, apply prebuilt cursors, and handle fallbacks for unsupported browsers while exploring maximum cursor sizes and practical examples.

Explore how to create stunning text effects with css gradient text, image background text, and text shadow, using background-clip techniques and layered backgrounds for bold typography.

Discover how to alter font height and width in CSS by using the transform property and scale on the x and y axes, including hover effects and transitions.

Install bootstrap 4 in your project using the atom editor, set up emmet and beautify, and use a live server for real-time preview.

Explore how bootstrap 4 reboot resets browser defaults through normalization and base styles, demonstrating its impact on margins, typography, and simple layouts.

Understand how headings (h1–h6) in Bootstrap are styled with specific heading classes and font sizes, and learn to apply container and grid concepts to control page layout.

Explore how to use bootstrap display classes to customize heading sizes, experiment with display-1 through display-4, and adjust text with muted and small styles for hero sections.

Apply css techniques to style text and backdrops, then master responsive text alignment across viewport sizes using breakpoints like small, medium, and large with media queries.

Learn how to implement blockquotes in Bootstrap 4, add semantic markup with blockquote and blockquote footer for an author, and style and align quotes with simple classes.

Discover Bootstrap 4 list styling with simple, nested, inline, and description lists; learn alignment with grid columns, offsets, and text truncation for clean, responsive menus.

Create and customize Bootstrap list groups using anchor links and buttons, applying active and disabled states, with list group items and badges for rich content.

Learn to build a bootstrap list group with contextual classes such as success and danger, and to add badges and links to items for a richer UI.

Create a custom bootstrap 4 list group with links, buttons, and badges, apply contextual classes, and design a multi-line chat layout featuring active items and group or individual messages.

Explore coloring text and applying background colors in Bootstrap using contextual classes (primary, success, info, warning, danger) to style headings, paragraphs, and links.

Display code on your webpage using bootstrap and CDN, copy and paste source snippets, wrap them in appropriate elements, and showcase variables and sample output with safe escaping.

Learn how to make images responsive in bootstrap and align them left, right, or center using container-based sizing and simple classes.

Explore how to create a simple bootstrap table and customize its headings, including applying table classes, default and inverted heading styles, to build clean, responsive layouts.

apply bootstrap 4 classes to style the table body, toggle striping and borders, and adjust backgrounds in simple html.

Apply Bootstrap classes table-hover and table-sm to style the table body, control hover effects, and create compact padding for a readable, attractive table.

Learn to apply contextual classes and background classes to style rows and cells in a table, with examples such as success, warning, and danger.

Learn how to make your Bootstrap 4 table responsive by applying a single class. Avoid horizontal scrolling on small viewports and keep the large data set aligned.

Discover how the figure element and its figcaption display captions for images, videos, and music, with Bootstrap styling, responsive image fluid classes, and caption alignment options.

Create and customize Bootstrap 4 alerts, including success, warning, and danger variants, with links and multi-line content. Apply accessible markup with roles to ensure screen readers work well across devices.

Learn to build bootstrap 4 alerts, make them dismissible with a close button and data attributes, and listen for close and closed events to respond to user interactions.

Discover how to add and customize badges in Bootstrap 4. Attach badges to headings and use styles like primary, success, warning, and danger, with badge sizes automatically adjusting.

Demonstrate breadcrumb navigation in Bootstrap 4 within an e-commerce interface, using real-world examples to build and manage navigation lists, links, and active states across categories like home and laptops.

Learn to create normal and outline bootstrap 4 buttons, apply color classes like primary, secondary, success, danger, and info, and use button styles on links, inputs, and forms.

Learn to build checkbox and radio button groups in Bootstrap 4 using button groups, enabling multi-select checkboxes and single-select radios with labeled controls and toggle states.

Explore how to use Bootstrap button utility classes to adjust size, color, disabled state, block display, and toggle behavior across buttons and anchors.

Explore how to create button groups and a button toolbar in bootstrap 4, adjust sizes, spacing, and grouping to build organized, responsive UI components.

Learn how to add a list to Bootstrap 4 cards using list groups, including images, headings, subtitles, and links, with proper padding and margins for clean card layouts.

Learn how to add header and footer to cards, control card size, align text and headings, and apply Bootstrap styling.

Explore utility classes to quickly build cards, control sizes, and align text. Learn to set widths with 25, 50, 75, and 100 percent and center or left-align content.

Add tabs and pills navigation inside cards to allow links to reveal details within the card, and manage active and disabled states for a polished UI.

Learn how to add images to Bootstrap cards, apply image overlay, and control top or bottom image placement with text overlays, shadows, and brightness adjustments for responsive design.

Explore styling Bootstrap cards: set background and outline, create inverted cards, apply color variants like primary, success, danger, and outline styles to build clean, responsive card layouts.

Learn how to group cards with Bootstrap using the card group and deck options, then space them with margins and flexbox to create responsive, well-aligned layouts.

Learn to create a masonry cards layout in Bootstrap 4 using a simple class to produce multi-column cards with images and overlays, while noting browser support and responsive column counts.

Learn to build a Bootstrap carousel with slides, captions, and responsive images, add next and previous controls, and manage multiple carousels with unique IDs.

Explore how to create a carousel with indicators and captions by scaffolding an ordered list as indicators, setting an active slide, and attaching captions beneath each image.

Explore how to use Bootstrap collapse to show or hide elements with a button or link, and build accordions that manage multiple collapsibles.

Create a simple accordion using the collapse feature with cards, headers, and body blocks, wiring up collapse targets and a default open item for accessible interaction.

Learn to create a Bootstrap dropdown with a button and an anchor, using dropdown toggle, dropdown menu, and dropdown items to build interactive navigation.

Master Bootstrap dropdowns by using button and anchor toggles, including split dropdowns and button groups, and control sizing and variation from drop down to drop up.

Explore how to work with dropdown header, dividers, and disabling items, including drop down and drop up behaviors, and adding headings inside dropdowns.

Explore how to build and align navigation components quickly using bootstrap and flexbox utilities, with horizontal and vertical layouts, semantic structure, and responsive alignment options.

Learn to build navigation with an unordered list using tabs, pills, justified, and fill navs, including active states. Compare justified and fill navs to see how space is distributed.

Learn to implement bootstrap 4 pagination using an unordered list with class pagination, create page items and links, add previous and next controls, and customize size, alignment, and disabled states.

Learn how cascading style sheets control page layout and how browser default styling appears. Explore how to override defaults with resets and custom styles to control fonts, margins, and links.

Install a code editor such as Brackets, Atom, Sublime Text, or VS Code, set up a project with local host server, and install the Beautify extension to streamline web development.

Learn how to apply inline styling to HTML elements using the style attribute, adjusting font family, font size, color, and text formatting such as bold and italic.

Explore embed styling to target headings, paragraphs, and sections, apply global or scoped rules, and manage specificity to override inline styles.

Explore how cascading CSS works by wiring external stylesheets and CDNs to style multiple pages consistently, while contrasting embedded styles limited to a single page.

Explore font-family concepts, system fonts, and web fonts; learn how browsers pick default fonts, apply font stacking with generic families, and use font-face in projects.

Explore how to set font sizes with CSS using pixels, ems, rems, and percentages, and understand how parent and root font sizes affect the rendered text.

Explore how to apply font-style and font-weight in CSS, using values normal, italic, oblique, and weights 100–900, with examples and browser considerations.

Explore the CSS text-transform property to capitalize, uppercase, lowercase, and small-caps, and see how to apply these on the client side to format blog data without server changes.

Explore how to use the text decoration property to decorate text, including links, headings, and paragraphs, with examples of underline, none, color changes, line-through, and overline.

Learn to change text color using the color property in CSS, applying it to body, paragraphs, and headings, and using hex, rgb, and keyword values.

Explore how to align text using CSS text-align properties, including left, right, center, and justify, with practical examples for responsive layouts.

Learn how to use the CSS text-indent property to indent text, including first-line and first-paragraph indentation, adjust with pixel values, and apply class or id selectors for targeted paragraphs.

Learn how to adjust letter spacing and word spacing in CSS, explore pixel values, and create hover-reveal effects using transitions and animations.

Discover how to control the space between elements in CSS by using the margin property, understand its role in the box model, and apply spacing to headings and paragraphs.

Explore how to create dynamic text shadow effects with CSS, including horizontal and vertical offsets, blur, color, and multiple shadows, while considering performance when animating shadows.

Learn how CSS color keyword definitions work, including named colors, hex and extended color keywords, and how to apply color with opacity for web design.

Discover how to use hexadecimal color values in CSS, including prefixing with #, six-digit hex codes, red green blue values, and practical color palettes.

Explore rgb color units in css, showing how red, green, and blue values from 0 to 255 mix to produce colors, including hex and keyword representations.

Learn how the CSS opacity property works, apply it to text, paragraphs, and images, and use values from 0 to 1 to craft subtle visual effects.

Learn how rgba and hsla enable alpha transparency and fine-grained opacity control by mixing color values and opacity in CSS, demonstrated with blue box examples and practical color adjustments.

Explore the basics of linear gradients in CSS, applying backgrounds with multiple color stops using hex or named colors, from red to yellow to blue, with default top-to-bottom direction.

Learn to control the flow direction of linear gradients in CSS, from top to bottom, bottom to top, or left to right, and apply dynamic background colors.

Learn to control the diagonal flow of linear gradients in CSS by setting x and y values, producing directions like top left to bottom right.

Learn to control the direction of linear gradients in CSS using angles and degrees. See how angles from 30 to 180 degrees shift the gradient from red to yellow.

Explore how to apply alpha transparency in linear gradients by adjusting color stops from partial opacity to full, enabling dynamic backgrounds with colors.

Learn to create radial gradients in CSS, starting from the center and spreading to the edges, using colors like red, yellow, blue, green, and black.

Explore how to create differently spaced color stops in radial gradients using CSS, assigning percentage values to red, blue, and yellow to control color distribution and background styling.

Discover how to create radial gradient shapes in CSS, switch between ellipse and circle, and adjust position with red and yellow to form a complete circle.

Learn how to use different size keywords in radial gradients to control the gradient size and position, including 90% offsets on the x and y axes.

Discover how to create a repeating radial gradient in CSS by layering multiple color stops and adjusting percent values to control the gradient size and repetition across the page.

Master the basics of element selectors to target single elements and sections, style headings, paragraphs, and links, and grasp specificity and the last-wins rule in CSS.

Learn how class selectors differ from element selectors, how to target specific elements with class names, and how selector specificity and descendant versus child relationships affect styling and performance.

Explore the id selector in depth, its unique requirement and 100x higher importance than class selectors, and learn to use # for id and . for class.

Explore the universal selector in depth, learn how it selects all elements with the star syntax, and see how specificity and inheritance shape color, background, and layout in CSS.

Master descendant selectors to target elements inside a section and article, chaining selectors and balancing specificity with performance while styling paragraphs and anchors.

Master group selectors in CSS to apply identical styles to multiple elements—group headings and other selectors for consistent color, borders, and layout across your page.

Target elements with attribute selectors to gain fine-grained control over styling. Learn to apply rules to specific attributes like class, id, or input type, enabling precise, value-based styling.

Explore how to use attribute selectors to target elements by values, including exact, space-separated, and dash-separated class values, and apply CSS styling with practical examples.

Learn how to match patterns with CSS attribute selectors by using value-based operators: starts with, ends with, and contains, to target elements, links, and downloadable items in real examples.

Target links using user action pseudo class selectors to style anchors by user actions, covering visited, hover, and active states, and apply your site color scheme.

Learn how to style the focused element using the user action pseudo class selector, customize focus borders, padding, and colors, and ensure keyboard navigation with the tab key.

Master the document structure selector and learn how first-child, last-child, and only-child selectors target specific elements to style web pages.

Learn to target elements by type using structural selectors, including first-child, last-child, first-of-type, last-of-type, and only-child, to style specific elements efficiently.

Explore document structure selector to target and style inline contents, including the first line, first letter, and first paragraph, with practical browser caveats.

Learn to target empty elements on a web page using document structure selectors and the :empty pseudo-class. See practical examples with borders, tables, and responsive styling.

Explore document structure selectors in CSS and learn to use the negation selector to target elements by criteria, exclude specific classes, and apply precise styling.

Explore how to use before and after pseudo selectors to insert and style content around any element, with practical examples of attributes, concatenation, and dynamic content.

Explore the document structure selector and learn to chain multiple selectors to craft powerful CSS rules, including before/after pseudo selectors, last-child and first-child, type selectors, and hover effects.

Learn to target elements by their parent-child relationships using the child combinator, and distinguish immediate children from descendants with the > selector.

Learn how the sibling combinator targets elements that are siblings of a heading 3, applying styles to following paragraphs; order matters and any subsequent siblings inherit the styling.

Learn how the adjacent selector targets immediate siblings, and use parent-child and descendant combinators to style headings, paragraphs, and sections.

Explore basic nth-child selectors to target elements by index, including even and odd patterns, first and last items, and practical examples with paragraphs, lists, and tables.

Learn how to target multiple elements using nth-child and child selectors, apply index-based patterns, even/odd and offset options, and understand selector limitations.

Master nth-child selectors by type to target specific children within a container, using patterns such as first, second, even, and odd to control css styling.

Master nth-child selectors to target list items in reverse order using last-child and even and odd patterns. Explore practical styling of sections and lists with offset techniques.

Learn how CSS fixed positioning keeps an element anchored in the browser window during scroll. Move elements with top, bottom, left, and right, and explore overlap scenarios.

Explore absolute positioning in css, learn how elements are removed from the document flow and positioned relative to the nearest positioned ancestor or browser window, and compare with fixed positioning.

Explore relative positioning in css and compare it with absolute positioning, showing how top, bottom, and margins interact with a blue box inside a parent container to control layout.

Understand that static is the default positioning, keeping elements in the normal document flow. See how absolute positioning moves elements out of flow and positions them relative to a container.