Posts

Showing posts from February, 2024

Conditional Rendering in React Complete Guide with Examples 2026

Image
  Conditional Rendering in React Conditional Rendering is one of the most useful concepts in React. It means showing different content on the screen depending on a condition. For example: If a user is logged in → show Logout If a user is not logged in → show Login If a student has passed → show Congratulations If a product is available → show Buy Now If data is loading → show Loading... React does not have a separate if rendering tag. Instead, we use normal JavaScript conditions such as if, the ternary operator, &&, and switch to decide what should appear in the UI.
Post a Comment
Read more

css border property

Image
CSS box model-Border property 1] The border-top property in css is shorthand property that allows. 2] Set the width, style, and color of the top border of an element in a single declaration. 3] Simplifies the process of styling the top border by combining several individual border                properties :-        1] border-Top         2] border-Bottom       3]  border-right       4] border-left   1] border -top  Property :-       1] border-top-width  :-  1] property sets the width of the top border.                                             2]  specify the width using values like pixels and percentages.           2] border-top-style  :-    1] property sets the style ...
Post a Comment
Read more

css box padding property

Image
    CSS Box  -Padding Property    1]     padding is the space between the content and border of the element.  2]  It provides internal spacing within the element    CSS Properties           1]   padding-top         2]   padding-right         3]   padding-bottom         4]   padding-left CSS Box Model - padding EXample :- <html>    < head >         < title > Padding </ title >         < style > h3 {     background-color : rgb ( 228 , 239 , 233 );     color : rgb ( 221 , 56 , 202 ); } .main {     border : 2px solid black ;     padding-right : 100px ;     padding-right : 100px ;     padding-top : 52px ;     padding-bottom : 52px ;     color : rgb ( 255 ...
Post a Comment
Read more

CSS Box margin property

Image
     CSS Box Model -Margin Property   1] css box model is a fundamental concept in web design that describes                                                         how elements on a webpage   2] css box model consists of components including content, margin, border, padding .   CSS box model explain   1] Margin :-              1] Margin property is use create space around html element.             2]  Margin property CSS  individual sides top, right, bottom, left                                          Margin                 1] Margin-top :-    used space to set left margin ...
Post a Comment
Read more

css button style

Image
CSS Button Style Example:-     < html >     < head >< title > html shadow button </ title >     < style >         .btn-shadow1         {             background-color : rgb ( 63 , 61 , 188 );             border-radius : 10px ;             color : aliceblue ;             padding : 15px 30px ;             font-size : 16px ;             box-shadow : 1px 1px 3px 3px palevioletred ;                     }     </ style >     </ head >     < body >         < button class = "btn-shadow1" onclick = " alert ('hi friends')" > < B > Shadow Button </ B ></ button >     ...
Post a Comment
Read more

html Button tag

Image
Html Button Tag    1]  <Button> tag creates a  clickable  button.    2]  The  type="button" attribute specifies the button.    3]  The text  "click Me" content of the button.    4]  button can trigger java Script events / perform action defined the web page. Html Button Tag Example :- <! DOCTYPE html > < html >     < head >         < title > button tag </ title >     </ head >     < body >         < h2 > Html Button Tag </ h2 >         < button type = "button" onclick = " alert ('hi friends')" > Click Me </ button >     </ body > </ html > Html Button Tag Output :- related Post :- about us page design template php program print inverted pyramid star pattern in php css id selector
Post a Comment
Read more

css class selector

Image
  css class selector 1]  css class selector write (.) character. 2]  css class selector is a fundamental part of cascading style sheets target html elements            based on their class attribute. Syntax :- . class  { text-align : center; color :pink; } CSS Class Selector Example :- <! DOCTYPE html > < html > < head >     < title > css class select </ title >     < style >     .web     {         text-align : center ;         color : yellowgreen ;     } </ style > </ head > < body >     < h2 class = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body > </ html > CSS Class Sele...
Post a Comment
Read more

What is CSS ID Selector? Syntax, Examples

Image
        CSS ID Selector 1] css id selector  attribute  is the unique identifier in an html document. 2] id selector use # character. 3] css id selector is used to apply style specific HTML element. Syntax :- #id  { // css property } CSS id selector  Example:- <! DOCTYPE html > < html > < head >     < title > css id selector </ title >     < style >         #web         {             text-align : center ;             color : brown ;         }     </ style > </ head > < body >     < h2 id = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body ...
Post a Comment
Read more

css element selector

Image
   CSS Selector   1] css selector are used to select the content to style. 2] Selector are the part of css rule set. 3] css selector is a pattern used to select and style elements on webpage.     Four type of css selectors  1] CSS Element Selector 2] CSS ID Selector 3] CSS Class Selector 4] CSS Universal Selector 1] CSS Element Selector :-    1] Selects HTML elements based on their tag names       eg.  ' h3 ' selects all ' <h3> ' elements. CSS Element Selector :- Program:- <! DOCTYPE html > < html > < head >     < title > css selector </ title >     < style >         h3         {                 text-align : center ;                 color : blueviolet ;         }     </ style > </ head > < bo...
Post a Comment
Read more

css text-decoration

Image
css text-decoration      CSS Text-decoration   1]  cascading style sheets (css) the text-decoration property is used to specify       the decoration added to text content. 2] It allows you to control aspects such as underlining , overline, line-through, none       1]   Text decoration Property           1]  text-decoration: overline;         2]   text-decoration : underline;         3]   text -decoration : line-through;           4] text-decoration :none; 1] Text-decoration : overline       1]  Adds a line above the text; Syntax :-       Text-decoration : overline;      Example :- < html > < head >     < title > TEXT DECORATION  PROPERTY </ title >     < STYLE >       ...
Post a Comment
Read more

css text-align Property

Image
 Text-align property 1]    Text-align  property in used to the horizontal alignment of text content element.  2]    A text property includes value  left and right ,center , justify.  3 ] The text-align property in css is used for the alignment of the text. 4] Use css property to set the horizontal alignment of a table -cell box or the block element .   1] text-align :  justify         1] justify the text in the container.       2] spaces between word in each line so that the text aligns with           both the left and right edges of the container.      Syntax :-        text-align :  justify ; Text-Align :  justify      Example:- <! DOCTYPE html > < html > < head >       < title > text-align property = justify </ title >       < style > ...
Post a Comment
Read more