"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "This article is all about reducing the need of JavaScript and keeping things simple using pure css. I have curated a list for you with examples." }), "\n", _jsxs(_components.p, { children: ["As we know, more and more interesting CSS features are introduced in CSS. These features make our lives easier and also allow us to ", _jsx(_components.a, { href: "https://programmingly.dev/design-a-better-web-application-by-following-css-best-practices", children: "write code with some good practices" }), ". We used JavaScript to do most of our work, even for simple interactions. But now, CSS takes care of most of the things."] }), "\n", _jsx(_components.h3, { children: "1) Validating Number Range Input" }), "\n", _jsxs(_components.p, { children: ["Let’s say we want to add validation styling for the Input type number field between 0 (min) & 50 (max) values. In the old days, this kind of interaction could only be added using JavaScript. But now, it can be achieved simply using ", _jsx(_components.a, { href: "https://programmingly.dev/everything-about-css-pseudo-classes-elements-and-their-use-cases", children: "CSS pseudo-class" }), " ", _jsx(_components.code, { children: ":in-range" }), " & ", _jsx(_components.code, { children: ":out-of-range" }), "."] }), "\n", _jsx(_components.p, { children: "Here is a simplified example:" }), "\n", _jsx(_components.p, { children: "I’ve defined an HTML input of type number and set the range using min/max attributes:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "html", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "html", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"number\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " min" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"0\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " max" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"50\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["Using CSS pseudo-class ", _jsx(_components.strong, { children: ":in-range" }), " & ", _jsx(_components.strong, { children: ":out-of-range" }), " to achieve conditional styling:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " // number is " }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "in-range" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":in-range" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " solid" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " green" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " // number is " }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "out-of-range" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":out-of-range" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " solid" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " red" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "2) Input Validation Error Indicator" }), "\n", _jsxs(_components.p, { children: ["We can also style invalid input, where the condition is not fulfilled. It can be achieved using CSS Pseudo-class ", _jsx(_components.code, { children: ":invalid" }), " ."] }), "\n", _jsx(_components.p, { children: "Define an input with the required attribute to tell the user this field is required, To give a proper indication we need to style the input element." }), "\n", _jsx(_components.p, { children: "This is how we define the input element:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "html", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "html", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"text\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " required" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["Style invalid input Using CSS pseudo-class ", _jsx(_components.code, { children: ":invlaid" }), " ."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":invalid" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "3" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " solid" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " red" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "3) Paragraph Styling & Control" }), "\n", _jsxs(_components.p, { children: ["Imagine, you are building a blog post page, and you have to dynamically set the text size of the ", _jsx(_components.strong, { children: "first letter" }), " of the first word to bigger than other letters, or you want to style the ", _jsx(_components.strong, { children: "first line" }), ", or maybe you want to add extra content of your choice ", _jsx(_components.strong, { children: "before or after the element" }), ". It all can be achieved using CSS."] }), "\n", _jsx(_components.p, { children: "See the below with the example code:" }), "\n", _jsx(_components.p, { children: "Take the blog post example and let’s define the HTML:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "html", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "section" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"blog-container\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">This is the first paragraphy of blog post. <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolorum fugiat explicabo ad eveniet minus nostrum eum distinctio quidem pariatur velit obcaecati, ea, perferendis laudantium tenetur necessitatibus, vel eos ipsum. " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"note-alert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Now, we can achive many things from CSS " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">That's all " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] })] }) }) }), "\n", _jsx(_components.p, { children: "This is how our output looks right now," }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753350409956", alt: "Output 1" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Now, taking our first example, style the first letter of our blog post using ", _jsx(_components.code, { children: ":first-letter" }), " pseudo-class."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":first-of-type:first-letter" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-size" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "rem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "red" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["As you can see, we can easily style the ", _jsx(_components.strong, { children: "first letter" }), " of the paragraph using CSS."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753350451632", alt: "Output 2" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Our Second challenge is to style the first line of the paragraph, by making italic text and increasing the font size to make it unique than other elements." }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":first-of-type:first-line" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "italic" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-size" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1.2" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "rem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.p, { children: "Here is an output:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753350485475", alt: "Output 3" }) }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Move forward to step three, this time we style our alert section and add extra content at the start dynamically." }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".note-alert" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " solid" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " blue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " padding" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "10" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".note-alert::before" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Notice: \"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "blue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-size" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1.2" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "rem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-weight" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "800" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " text-transform" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "uppercase" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.p, { children: "So, here is the output of where we have added “Notice” an extra element at the start, and also style it using only CSS." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753350525165", alt: "Output Image" }) }), "\n", _jsxs(_components.ol, { start: "4", children: ["\n", _jsx(_components.li, { children: "at the end, let’s add a goodbye message at the end of our blog post after the last paragraph, which can also be achieved using CSS." }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":last-of-type::after" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Thanks for Reading, Please Like, share and comment\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "block" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " margin-top" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "20" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "italic" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-weight" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "bold" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.p, { children: "Here is the output of our last challenge, see how we have added the goodbye message at the end of the paragraph." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753350605691", alt: "Output" }) }), "\n", _jsx(_components.h3, { children: "4) Styling the Editable Content on Webpage" }), "\n", _jsxs(_components.p, { children: ["Do you know, you can also edit content in HTML? In case you don’t, just add the ", _jsx(_components.code, { children: "contenteditable" }), " the attribute in any HTML tag so you can easily edit the content on the webpage like Input Element."] }), "\n", _jsx(_components.p, { children: "You can easily do many things with it, but in this article, I’m going to show one example." }), "\n", _jsx(_components.p, { children: "Let’s see an example of how to identify editable content on the webpage and style it using CSS." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "html", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">This paragraph can be read-only" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " contenteditable" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"true\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">This paragraph can be editable" })] })] }) }) }), "\n", _jsx(_components.p, { children: "Now, take the above code, and we’ll style editable content with a green color and others with red." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":read-only" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "red" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":read-write" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "green" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "5) Allow/Disallow User Selection" }), "\n", _jsxs(_components.p, { children: ["Sometimes, based on requirements we don’t allow users to select text on the webpage. This can be easily achieved by using CSS. We can also disable selection for the whole webpage to a single paragraph using ", _jsx(_components.code, { children: "user-select" }), " property. You'll learn more about at ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select", children: "MDN docs" }), "."] }), "\n", _jsx(_components.p, { children: "See the example given below to understand how it works:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " user-select" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "none" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "In the above, I showed you how to disallow user selection for all paragraphs on the webpage." }), "\n", _jsxs(_components.p, { children: ["Many websites provide multiple theming options, most of them in dark or light mode. Now, we can able to create multiple themes using CSS ", _jsx(_components.code, { children: "prefers-color-scheme" }), " media query. Using this we can easily detect and set styling without the need for javascript."] }), "\n", _jsxs(_components.p, { children: ["Many websites provide multiple theming options, most of them in dark or light mode. Now, we can able to create multiple themes using CSS ", _jsx(_components.code, { children: "prefers-color-scheme" }), " media query. Using this we can easily detect and set styling without the need for javascript."] }), "\n", _jsx(_components.p, { children: "Let’s see the below example:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " /* Default Light Mode */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "white" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "black" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " /* Dark Mode */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " @media" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (prefers-color-scheme: dark) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: " body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "black" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "white" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };