{
"version": "https://jsonfeed.org/version/1.1",
"user_comment": "This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL -- https://basescripts.com/category/css/feed/json -- and add it your reader.",
"next_url": "https://basescripts.com/category/css/feed/json?paged=2",
"home_page_url": "https://basescripts.com/category/css",
"feed_url": "https://basescripts.com/category/css/feed/json",
"language": "en-US",
"title": "CSS – Coding Help Tips Resources Tutorials",
"description": "Google Apps Scripts and Web Development Tutorials and Resources by Laurence Svekis",
"icon": "https://i0.wp.com/basescripts.com/wp-content/uploads/2023/02/cropped-logoBasescripts.png?fit=512%2C512&ssl=1",
"items": [
{
"id": "https://basescripts.com/?p=25662",
"url": "https://basescripts.com/100-practical-css-code-snippets",
"title": "100 Practical CSS Code Snippets",
"content_html": "https://github.com/lsvekis/100-CSS-Snippets 1) Modern CSS Reset (minimal) Does: Prevents common layout surprises (box sizing, default margins, media sizing).Use it: Put at the top of your stylesheet for consistent baseline behavior. 2) Fluid Container Does: Keeps content readable on large screens and padded on small screens.Use it: Wrap page sections in .container. 3) Responsive Typography (clamp) Does: ... Read more",
"content_text": "https://github.com/lsvekis/100-CSS-Snippets 1) Modern CSS Reset (minimal) Does: Prevents common layout surprises (box sizing, default margins, media sizing).Use it: Put at the top of your stylesheet for consistent baseline behavior. 2) Fluid Container Does: Keeps content readable on large screens and padded on small screens.Use it: Wrap page sections in .container. 3) Responsive Typography (clamp) Does: ... Read more",
"date_published": "2026-01-12T23:55:07+00:00",
"date_modified": "2026-01-12T23:55:11+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2026/01/100CSS.jpg?fit=800%2C533&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=22226",
"url": "https://basescripts.com/why-element-style-color-is-still-valid-and-why-vs-code-might-be-messing-with-your-javascript",
"title": "Why element.style.color Is Still Valid (and Why VS Code Might Be Messing with Your JavaScript)",
"content_html": "\ud83d\udd25 Why element.style.color Is Still Valid (and Why VS Code Might Be Messing with Your JavaScript) If you’ve been following a JavaScript lesson and suddenly found your code being rewritten by your editor\u2014you’re not alone. A developer recently shared that their simple color-toggle code wasn\u2019t working as expected in VS Code. Here’s what they were ... Read more",
"content_text": "\ud83d\udd25 Why element.style.color Is Still Valid (and Why VS Code Might Be Messing with Your JavaScript) If you’ve been following a JavaScript lesson and suddenly found your code being rewritten by your editor\u2014you’re not alone. A developer recently shared that their simple color-toggle code wasn\u2019t working as expected in VS Code. Here’s what they were ... Read more",
"date_published": "2025-08-07T17:15:19+00:00",
"date_modified": "2025-08-07T17:15:21+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2025/08/image-2.png?fit=1536%2C1024&ssl=1",
"tags": [
"CSS",
"Learning"
]
},
{
"id": "https://basescripts.com/?p=17946",
"url": "https://basescripts.com/advanced-css-comprehensive-guide",
"title": "Advanced CSS: Comprehensive Guide",
"content_html": "This guide is designed to teach advanced CSS concepts to help you build responsive, interactive, and aesthetically pleasing websites. We’ll explore advanced selectors, layout techniques, animations, and best practices. Advanced CSS Concepts Advanced Selectors 1. Attribute Selectors Attribute selectors allow you to style elements based on their attributes and attribute values. <input type=”text” placeholder=”Enter text” ... Read more",
"content_text": "This guide is designed to teach advanced CSS concepts to help you build responsive, interactive, and aesthetically pleasing websites. We’ll explore advanced selectors, layout techniques, animations, and best practices. Advanced CSS Concepts Advanced Selectors 1. Attribute Selectors Attribute selectors allow you to style elements based on their attributes and attribute values. <input type=”text” placeholder=”Enter text” ... Read more",
"date_published": "2024-11-25T18:06:43+00:00",
"date_modified": "2024-11-25T18:06:46+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-128.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17942",
"url": "https://basescripts.com/html-and-css-comprehensive-guide",
"title": "HTML and CSS: Comprehensive Guide",
"content_html": "HTML and CSS: Comprehensive Guide HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundation of web development. HTML provides the structure of a webpage, while CSS styles and layouts the content. This guide will teach you the basics of HTML and CSS, with examples, exercises, and quizzes to reinforce learning. 1. Introduction ... Read more",
"content_text": "HTML and CSS: Comprehensive Guide HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundation of web development. HTML provides the structure of a webpage, while CSS styles and layouts the content. This guide will teach you the basics of HTML and CSS, with examples, exercises, and quizzes to reinforce learning. 1. Introduction ... Read more",
"date_published": "2024-11-25T18:04:38+00:00",
"date_modified": "2024-11-25T18:04:42+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-127.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"HTML",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17823",
"url": "https://basescripts.com/understanding-the-after-pseudo-element-why-double-colons-matter",
"title": "Understanding the ::after Pseudo-Element: Why Double Colons Matter",
"content_html": "In the world of web development, CSS pseudo-elements play a pivotal role in enhancing the visual presentation of content without altering the HTML structure. One commonly used pseudo-element is ::after. However, there’s often confusion about whether to use a single colon (:) or double colons (::) when selecting pseudo-elements. This blog post delves into why ... Read more",
"content_text": "In the world of web development, CSS pseudo-elements play a pivotal role in enhancing the visual presentation of content without altering the HTML structure. One commonly used pseudo-element is ::after. However, there’s often confusion about whether to use a single colon (:) or double colons (::) when selecting pseudo-elements. This blog post delves into why ... Read more",
"date_published": "2024-11-20T23:45:39+00:00",
"date_modified": "2024-11-20T23:45:41+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-103.png?fit=1792%2C1024&ssl=1",
"tags": [
"CSS"
]
},
{
"id": "https://basescripts.com/?p=17819",
"url": "https://basescripts.com/css-transitions-and-animations-guide",
"title": "CSS Transitions and Animations Guide",
"content_html": "CSS Transitions and Animations are powerful tools to enhance the user experience by adding smooth visual effects. This guide covers the basics, advanced features, and practical examples of CSS Transitions and Animations. What Are CSS Transitions? CSS Transitions allow changes in CSS properties to occur smoothly over a specified duration rather than happening instantly. Syntax: ... Read more",
"content_text": "CSS Transitions and Animations are powerful tools to enhance the user experience by adding smooth visual effects. This guide covers the basics, advanced features, and practical examples of CSS Transitions and Animations. What Are CSS Transitions? CSS Transitions allow changes in CSS properties to occur smoothly over a specified duration rather than happening instantly. Syntax: ... Read more",
"date_published": "2024-11-20T23:08:24+00:00",
"date_modified": "2024-11-20T23:08:27+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-102.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17807",
"url": "https://basescripts.com/quick-guide-to-css-grid",
"title": "Quick Guide to CSS Grid",
"content_html": "CSS Grid is a powerful layout system for creating responsive and structured web designs. It allows developers to define rows, columns, and areas for precise control over layout and alignment. This guide introduces CSS Grid concepts, syntax, and practical examples. What is CSS Grid? CSS Grid Layout is a two-dimensional system for managing both rows ... Read more",
"content_text": "CSS Grid is a powerful layout system for creating responsive and structured web designs. It allows developers to define rows, columns, and areas for precise control over layout and alignment. This guide introduces CSS Grid concepts, syntax, and practical examples. What is CSS Grid? CSS Grid Layout is a two-dimensional system for managing both rows ... Read more",
"date_published": "2024-11-20T22:36:06+00:00",
"date_modified": "2024-11-20T22:39:23+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-101.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17804",
"url": "https://basescripts.com/comprehensive-guide-to-advanced-css",
"title": "Comprehensive Guide to Advanced CSS",
"content_html": "Welcome to the Advanced CSS guide! Building upon the fundamentals of CSS, this guide delves into more sophisticated techniques and concepts that empower you to create dynamic, responsive, and maintainable web designs. Whether you’re aiming to master complex layouts, optimize performance, or enhance accessibility, this guide provides the knowledge and practical examples necessary to elevate ... Read more",
"content_text": "Welcome to the Advanced CSS guide! Building upon the fundamentals of CSS, this guide delves into more sophisticated techniques and concepts that empower you to create dynamic, responsive, and maintainable web designs. Whether you’re aiming to master complex layouts, optimize performance, or enhance accessibility, this guide provides the knowledge and practical examples necessary to elevate ... Read more",
"date_published": "2024-11-20T22:31:53+00:00",
"date_modified": "2024-11-20T22:31:55+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-83.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17801",
"url": "https://basescripts.com/guide-to-css-transitions-and-animations",
"title": "Guide to CSS Transitions and Animations",
"content_html": "Welcome to the CSS Transitions and Animations guide! CSS Transitions and Animations are powerful tools that enhance the interactivity and visual appeal of your websites. By smoothly changing property values over time, you can create engaging user experiences that captivate and retain visitors. Whether you’re a beginner looking to grasp the basics or an intermediate ... Read more",
"content_text": "Welcome to the CSS Transitions and Animations guide! CSS Transitions and Animations are powerful tools that enhance the interactivity and visual appeal of your websites. By smoothly changing property values over time, you can create engaging user experiences that captivate and retain visitors. Whether you’re a beginner looking to grasp the basics or an intermediate ... Read more",
"date_published": "2024-11-20T22:13:43+00:00",
"date_modified": "2024-11-20T22:13:45+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-82.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
},
{
"id": "https://basescripts.com/?p=17792",
"url": "https://basescripts.com/comprehensive-guide-to-the-css-box-model",
"title": "Comprehensive Guide to the CSS Box Model",
"content_html": "Welcome to the CSS Box Model guide! The Box Model is a fundamental concept in web design and development, governing how elements are displayed and interact within a webpage. Understanding the Box Model is essential for creating layouts, managing spacing, and ensuring designs are both visually appealing and functional across different devices and screen sizes. ... Read more",
"content_text": "Welcome to the CSS Box Model guide! The Box Model is a fundamental concept in web design and development, governing how elements are displayed and interact within a webpage. Understanding the Box Model is essential for creating layouts, managing spacing, and ensuring designs are both visually appealing and functional across different devices and screen sizes. ... Read more",
"date_published": "2024-11-20T21:36:29+00:00",
"date_modified": "2024-11-20T22:04:06+00:00",
"authors": [
{
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
}
],
"author": {
"name": "Laurence Svekis",
"url": "https://basescripts.com/author/discoveryvip",
"avatar": "https://secure.gravatar.com/avatar/ae13e7166b2d48551742e3f86b837362f2627bf4f7f8038b3d6793fda8dc536c?s=512&d=mm&r=g"
},
"image": "https://i0.wp.com/basescripts.com/wp-content/uploads/2024/11/image-80.png?fit=1024%2C1024&ssl=1",
"tags": [
"CSS",
"PDF",
"PDF download"
]
}
]
}