Article Section
\nThis is an article.
\n| HTML | \nCSS | \nJavaScript | \n
Responsive Table Example
\n\n\n\n
\n
\n\n"
}
]
}
],
"CSS Display property": [
{
"title": "CSS Display property",
"description": "One of the most crucial and often used CSS properties for regulating how items are arranged on a webpage is the display property.",
"sub_description": "It chooses how an element appears on the screen and works with other elements.",
"additional_info": "",
"content": [
{
"type": "heading",
"level": "4",
"text": "Block-level elements:"
},
{
"type": "paragraph",
"text": ""
},
{
"type": "textarea",
"text": "div {\n\twidth: 100%;\n\tmargin: 10px 0;\n\tbackground-color: #f0f0f0;\n}",
"template": "\n\n\n| Course | \nDuration | \nLevel | \n
|---|---|---|
| HTML | \n4 Weeks | \nBeginner | \n
| CSS | \n6 Weeks | \nIntermediate | \n
| JavaScript | \n8 Weeks | \nAdvanced | \n
Block-level Elements Example
\nThis is a block-level element.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Inline elements:"
},
{
"type": "paragraph",
"text": "An inline element is an element which takes only necessary width and does not start on a new line."
},
{
"type": "textarea",
"text": "span {\n\tcolor: blue;\n\tfont-weight: bold;\n}",
"template": "\n\n\nInline Elements Example
\nThis is an inline element.\n\n" }, { "type": "heading", "level": "4", "text": "Display: none property -" }, { "type": "paragraph", "text": "An element is not displayed when its none value is used. The element is completely removed from the document flow, thus there will be no room for it in the layout." }, { "type": "textarea", "text": ".hidden {\n\tdisplay: none;\n}", "template": "\n\n\nDisplay: none Example
\nThis element is hidden using display: none.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Override The Default Display Value:"
},
{
"type": "paragraph",
"text": "You can change an inline element to block level and vice versa using display property."
},
{
"type": "textarea",
"text": ".override {\n\tdisplay: block;\n}",
"template": "\n\n\nDisplay: block Example
\nThis element is displayed as a block.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Hide an Element - display:none or visibility:hidden?:"
},
{
"type": "paragraph",
"text": "Using display: none, the element will be hidden and not occupy the same space in the webpage while using visibility: hidden, the element will be hidden but will occupy same space in the web page."
},
{
"type": "textarea",
"text": ".hidden {\n\tdisplay: none; /* Removes the element from the document flow */\n}\n\n.visible-hidden {\n\tvisibility: hidden; /* Hides the element but maintains its space */\n}",
"template": "\n\n\nDisplay: none and visibility: hidden Example
\nThis element is hidden using display: none.
\nThis element is hidden using visibility: hidden.
\n\n"
}
]
}
],
"CSS Position": [
{
"title": "CSS Position",
"description": "In CSS, the position property determines an element's placement inside its parent container or throughout the document. ",
"sub_description": "An element's layout and interactions with other elements are determined also by its position property.",
"additional_info": "There are 5 possible position values:",
"content": [
{
"type": "heading",
"level": "4",
"text": "static:"
},
{
"type": "paragraph",
"text": "This is the default property for position of an element."
},
{
"type": "textarea",
"text": "static {\n\tposition: static;\n\t/* Default position value, elements are positioned according to the normal flow */\n}",
"template": "\n\n\nStatic Position Example
\nThis element is positioned static.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "relative:"
},
{
"type": "paragraph",
"text": "The element with position: relative property will be positioned relative to its normal position. Setting top, right, left and bottom values for this element will adjust its position from its normal position."
},
{
"type": "textarea",
"text": "relative {\n\tposition: relative;\n\ttop: 10px;\n\tleft: 20px;\n\t/* Element is positioned relative to its normal position */\n}",
"template": "\n\n\nRelative Position Example
\nThis element is positioned relative.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "fixed:"
},
{
"type": "paragraph",
"text": "The position: fixed; makes an element fixed in its position relative to viewport which means the element stays in the same place even if webpage is scrolled. "
},
{
"type": "textarea",
"text": "fixed {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\t/* Element is positioned relative to the viewport */\n}",
"template": "\n\n\nFixed Position Example
\nThis element is positioned fixed.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "absolute:"
},
{
"type": "paragraph",
"text": "The element with postion: absolute; is positioned relative to the nearest positioned ancestor (i.e., an ancestor element with position as relative, absolute or fixed). If the absolute positioned element has no positioned ancestor then it positions itself relative to document body and moves with scrolling the page."
},
{
"type": "textarea",
"text": "absolute {\n\tposition: absolute;\n\ttop: 50px;\n\tleft: 100px;\n\t/* Element is positioned relative to its nearest positioned ancestor */\n}",
"template": "\n\n\nAbsolute Position Example
\nThis element is positioned absolute.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "sticky:"
},
{
"type": "paragraph",
"text": "The position:sticky; element is treated as relative until the page is scrolled to a certain positon where it becomes fixed. The top, right, bottom, and left properties manage where the element sticks before reaching a position to become fixed."
},
{
"type": "textarea",
"text": "sticky {\n\tposition: sticky;\n\ttop: 0;\n\t/* Element is positioned based on the user's scroll position */\n}",
"template": "\n\n\nSticky Position Example
\nThis element is positioned sticky.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The z-index property:"
},
{
"type": "paragraph",
"text": "The z-index property is used to control the stacking order of an element. It is done to manage the overlapping stacking order of elements. Stack order for an element can be positive or negative."
},
{
"type": "textarea",
"text": ".element {\n\tposition: relative;\n\tz-index: 10;\n\t/* Specifies the stack order of the element */\n}",
"template": "\n\n\nZ-Index Example
\nThis element is positioned relative with a z-index of 10.
\n\n"
}
]
}
],
"CSS Overflow": [
{
"title": "CSS Overflow property",
"description": "When content of an element overflows the element’s box size then we use overflow property to add scrollbars to the element’s box for better viewing of content.",
"sub_description": "The overflow property has the following values:",
"additional_info": "",
"content": [
{
"type": "heading",
"level": "4",
"text": "visible: "
},
{
"type": "paragraph",
"text": "This is by default and the content overflows the element’s box in it."
},
{
"type": "textarea",
"text": ".element {\n\tvisibility: visible;\n\t/* The element is visible */\n}",
"template": "\n\n\nVisible Overflow Example
\nThis element has visible overflow.The content is too long to fit inside the box, so it will spill outside the container.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "hidden: "
},
{
"type": "paragraph",
"text": ""
},
{
"type": "textarea",
"text": ".element {\n\tvisibility: hidden;\n\t/* The element is hidden but still takes up space */\n}",
"template": "\n\n\nHidden Overflow Example
\nThis element has hidden overflow.The content is too long to fit inside the box, so the extra text will be cut off and not visible.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "scroll: "
},
{
"type": "paragraph",
"text": "The overflow is hidden or clipped and to view rest of the content a scrollbar is provided."
},
{
"type": "textarea",
"text": ".element {\n\toverflow: scroll;\n\t/* Scroll bars will appear even if the content fits within the element */\n}",
"template": "\n\n\nScroll Overflow Example
\nThis element has scroll overflow.The content is too long to fit inside the box, so scrollbars appear for both horizontal and vertical scrolling.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "auto: "
},
{
"type": "paragraph",
"text": "It is similar to scroll but adds scrollbars only when needed."
},
{
"type": "textarea",
"text": ".element {\n\toverflow: auto;\n\t/* Scroll bars will appear only if the content overflows the element */\n}",
"template": "\n\n\nAuto Overflow Example
\nThis element has auto overflow.he content is too long to fit inside the box, so scrollbars appear automatically when necessary.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "overflow-x and overflow-y:"
},
{
"type": "paragraph",
"text": "The overflow-x species to change the overflow of content on the horizontal axis and overflow-y on the vertical axis."
},
{
"type": "textarea",
"text": ".element {\n\toverflow-x: hidden; /* Hides horizontal overflow */\n\toverflow-y: scroll; /* Always shows vertical scroll bar */\n}",
"template": "\n\n\nOverflow-x and Overflow-y Example
\nThis element has overflow-x hidden and overflow-y scroll.This content is long enough to require vertical scrolling, but horizontal scrolling is hidden even if text is too wide.
\n\n"
}
]
}
],
"CSS Float property": [
{
"title": "CSS Float property",
"description": "The float is used to position elements to the left or right of their containing element and allowing content to flow around them.",
"sub_description": "",
"additional_info": "",
"content": [
{
"type": "heading",
"level": "5",
"text": "left :"
},
{
"type": "paragraph",
"text": ""
},
{
"type": "textarea",
"text": ".element {\n\tleft: 20px; /* Positions the element 20 pixels from the left */\n}",
"template": "\n\n\nLeft Float Example
This element is floated to the left.
This text wraps around the floated element. The float allows text and other inline content to flow around the box.
Right Float Example
This element is floated to the right.
This text wraps around the floated element. The float allows text and other inline content to flow around the box.
None Float Example
This element is not floated.
This text appears below the element because it is not floated.
Inherit Float Example
\nThis element inherits the color property from its parent.
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Clear property:"
},
{
"type": "paragraph",
"text": "The clear property defines how the elements which are adjacent to floating elements will behave. "
},
{
"type": "paragraph",
"text": "property following values:"
},
{
"type": "heading",
"level": "5",
"text": "left"
},
{
"type": "paragraph",
"text": ""
},
{
"type": "textarea",
"text": ".element {\n\tclear: left; /* Prevents the element from wrapping around floated elements on the left */\n}",
"template": "\n\n\nClear Left Example
Floated Left Element
This element is cleared left and starts below the floated element.
Other content follows normally after the cleared element.
\n" }, { "type": "heading", "level": "5", "text": "right" }, { "type": "paragraph", "text": "" }, { "type": "textarea", "text": ".element {\n\tclear: right; /* Prevents the element from wrapping around floated elements on the right */\n}", "template": "\n\n\nClear Right Example
Floated Right Element
This element is cleared right and starts below the floated element.
Other content flows normally after the cleared element.
\n" }, { "type": "heading", "level": "5", "text": "none" }, { "type": "paragraph", "text": "" }, { "type": "textarea", "text": ".element {\n\tclear: none; /* Allows the element to be positioned next to floated elements */\n}", "template": "\n\n\nClear None Example
Floated Left Element
This element is not cleared, so it flows alongside or around floated elements if possible.
Other content follows normally.
\n" }, { "type": "heading", "level": "5", "text": "both" }, { "type": "paragraph", "text": "" }, { "type": "textarea", "text": ".element {\n\tclear: left; /* The element is moved below any floated elements on the left */\n}\n.element {\n\tclear: right; /* The element is moved below any floated elements on the right */\n}", "template": "\n\n\nClear Both Example
Floated Left Element
Floated Right Element
This element is cleared both left and right and appears below all floated elements.
Other content follows normally.
\n" }, { "type": "heading", "level": "5", "text": "inherit:" }, { "type": "paragraph", "text": "The element inherits its clear value from its parent element." }, { "type": "textarea", "text": ".element {\n\tclear: inherit; /* The element inherits the clear property from its parent */\n}", "template": "\n\n\nInherit Clear Example
Parent element (floated left, cleared right)
Child element inherits clear from parent
Other content follows normally.
\n" } ] } ], "CSS Inline-block property": [ { "title": "CSS Inline-block property", "description": "The display: inline-block;:The display: inline-block is different from display: inline; as it allows height and width properties and, top and bottom margins/paddings are also allowed while in display: inline; these are not allowed. ", "sub_description": "", "additional_info": "", "content": [ { "type": "heading", "level": "4", "text": "Use of inline-block to create navigation links:" }, { "type": "paragraph", "text": "The display: inline-block; is most commonly used to display list items horizontally." }, { "type": "textarea", "text": "element {\n\tdisplay: inline-block; /* The element behaves like an inline element but accepts width and height */\n}", "template": "\n\n\n- Home
- About
- Services
- Contact
CSS Center Align Elements Example
This inline text is centered inside the container.
"
},
{
"type": "heading",
"level": "4",
"text": "Center Align text:"
},
{
"type": "paragraph",
"text": "To center the text inside an element, use text-align: center; property."
},
{
"type": "textarea",
"text": "h1, h2, h3, p {\n\ttext-align: center; /* Center-aligns text for headers and paragraphs */\n}",
"template": "This block-level element is centered with
margin: 0 auto and width: 50%.This is a centered H1 header
This is a centered H2 header
This is a centered H3 header
This paragraph text is centered as well, using the CSS text-align property.
" }, { "type": "heading", "level": "4", "text": "Center an image:" }, { "type": "paragraph", "text": "To center an image make it a block element and set its width less than the entire width (100%) and set the margin left and right to auto." }, { "type": "textarea", "text": "img {\n\tdisplay: block; /* Change display to block */\n\tmargin-left: auto; /* Automatically adjusts left margin */\n\tmargin-right: auto; /* Automatically adjusts right margin */\n}", "template": "Centered Image
"
}
]
}
],
"CSS Combinators": [
{
"title": "CSS Combinators",
"description": "Combinators in CSS are used to define relationship between two selectors. A combinator is used between selectors.",
"sub_description": "There are four types of combinators:",
"additional_info": "",
"content": [
{
"type": "list",
"items": [
"Descendant combinator (space)",
"Child combinator (>)",
"Next sibling combinator (+)",
"Subsequent-sibling combinator (~)"
]
},
{
"type": "heading",
"level": "4",
"text": "Descendant combinator:"
},
{
"type": "paragraph",
"text": "The descendant combinatory (space) selects all the elements which are descendants of a specified element."
},
{
"type": "textarea",
"text": "div p {\n\tcolor: blue; /* Selects all elements inside
elements */\n}",
"template": " elements that are direct children of
CSS Descendant Selector Example
This paragraph is INSIDE the div (should be blue).
This paragraph is OUTSIDE the div (should be normal black).
" }, { "type": "heading", "level": "4", "text": "Child combinator:" }, { "type": "paragraph", "text": "The child combinator (>) selects all the elements that are children of the specified element." }, { "type": "textarea", "text": "ul > li {\n\tfont-weight: bold; /* Selects only- */\n}",
"template": "
- Direct Child 1 (Blue)
- Direct Child 2 (Blue)
- Parent Item
- Nested Child (NOT Blue)
- Apple
- Banana
- Cherry
- Orange
- First item \n
- Second item \n
- Third item \n
- Apple
- Banana
- Cherry
Child Combinator ( > ) Example
that is immediately after an
*/\n}",
"template": " This is a heading
✔ This paragraph is immediately after h2 (Blue)
✘ This paragraph is NOT immediately after h2 (Black)
" }, { "type": "heading", "level": "4", "text": "Subsequent-sibling combinator:" }, { "type": "paragraph", "text": "The Subsequent-sibling combinator(~) selects all the elements that are siblings of a specified element and appear after it." }, { "type": "textarea", "text": "h2 ~ p {\n\tcolor: green; /* This will apply to allelements that follow an
*/\n}",
"template": "This is a heading
✔ This paragraph comes after h2 (Green)
✔ This paragraph also comes after h2 (Green)
✘ This paragraph is BEFORE h2 (Black)
Another Heading
✔ This paragraph comes after second h2 (Green)
" } ] } ], "CSS Pseudo-classes": [ { "title": "CSS Pseudo-classes", "description": "Pseudo-classes are keywords that can be combined with selectors to specify a special state of a selected element.", "sub_description": "These allow users to add styling to elements based on user interactions, position in the document and other conditions.", "additional_info": "Syntax:selector:pseudo-class{
property: value;
}", "content": [ { "type": "textarea", "text": "a:hover {\n\tcolor: red; /* Changes the link color when hovered over */\n}", "template": "
CSS Pseudo-Class :hover Demo
Move your mouse over the links below to see the color change:
First LinkSecond Link
Third Link" }, { "type": "heading", "level": "4", "text": "Anchor pseudo-classes:" }, { "type": "list", "items": [ ":link pseudo class is used to change styling of a link in its unvisited state.", ":visited pseudo class is used to change styling of a link if its already visited.", ":hover pseudo class is used to change styling of a link when user hovers over it.", ":active pseudo class is used to change styling of a link when it is active or being clicked on." ] }, { "type": "heading", "level": "4", "text": ":first-child pseudo class:" }, { "type": "paragraph", "text": "This is used to select the first child of a specified parent element." }, { "type": "textarea", "text": "p:first-child {\n\tfont-weight: bold; /* Makes the first paragraph child bold */\n}", "template": "
This is the first paragraph. It will be bold and red because it is the first child of the body.
This is the second paragraph. It will stay normal.
This is the third paragraph. It will also stay normal.
" }, { "type": "heading", "level": "4", "text": ":nth-child() pseudo class:" }, { "type": "paragraph", "text": "This selects elements based on their position in a group of siblings. Values it takes are numbers, formulas or keywords." }, { "type": "textarea", "text": "li:nth-child(2) {\n\tcolor: red; /* Changes the color of the second list item */\n}", "template": "Fruit List
Paragraph 1 – normal
Paragraph 2 – normal
Paragraph 3 – bold and blue
Paragraph 4 – normal
" } ] } ], "CSS Pseudo-elements": [ { "title": "CSS Pseudo-elements", "description": ":The pseudo elements are keywords that are used to style a specific part of selected elements.", "sub_description": "", "additional_info": "", "content": [ { "type": "heading", "level": "4", "text": "The ::first-line pseudo-element:" }, { "type": "paragraph", "text": "" }, { "type": "textarea", "text": "p::first-line {\n font-weight: bold;\n color: green;\n}", "template": "This is a paragraph. Only the first line of this paragraph will appear bold, green, and slightly larger. The rest of the text remains normal.
Another paragraph here. Again, just the first line will get the special style applied.
" }, { "type": "heading", "level": "4", "text": "The ::first-letter pseudo-element:" }, { "type": "paragraph", "text": "The ::first-letter pseudo-element is used to add style to the first letter of selected element. Only a few properties can be applied to ::first-letter pseudo-element such as color properties, font properties, background properties, letter-spacing, word-spacing, text-decoration, text-transform, vertical-align(only if float is none), line-height, clear, etc." }, { "type": "textarea", "text": "p::first-letter {\n font-weight: bold;\n color: green;\n}", "template": "This is a paragraph. Only the first letter 'T' will be bold, green, and larger. The rest of the text remains normal.
Another paragraph example. The first letter 'A' will also be styled the same way.
" }, { "type": "heading", "level": "4", "text": "Using pseudo-element and html classes together:" }, { "type": "paragraph", "text": "The pseudo-elements and html classes can be used together.Syntax:
Selector.classname::pseudo-element {
property: value;
}" }, { "type": "textarea", "text": ".highlighted-text::after {\n content: ' - Webcooks';\n color: green;\n font-weight: bold;\n}\n\n
Welcome to the course
", "template": "Welcome to the course
Another paragraph without the pseudo-element.
" }, { "type": "heading", "level": "4", "text": "The ::before pseudo-element:" }, { "type": "paragraph", "text": "The ::before pseudo-element allows us to add some content before the content of selected element." }, { "type": "textarea", "text": ".welcome-message::before {\n content: '🎉 ';\n font-size: 20px;\n color: orange;\n}\n\n", "template": "This paragraph has no : :before element.
" }, { "type": "heading", "level": "4", "text": "The ::after pseudo-element:" }, { "type": "paragraph", "text": "The ::after pseudo-element allows us to add some content just after the content of selected element." }, { "type": "textarea", "text": ".notice::after {\n content: ' Thank you for visiting!';\n font-size: 14px;\n color: green;\n}\n\nWe hope you enjoyed the experience.
", "template": "We hope you enjoyed the experience.
This paragraph has no extra message after it.
" }, { "type": "heading", "level": "4", "text": "The ::marker pseudo-element:" }, { "type": "paragraph", "text": "The ::marker pseudo-element is used to add style to the markers of lists." }, { "type": "textarea", "text": "ul::marker {\n color: red;\n font-size: 20px;\n}\n\n- \n
My Favorite Fruits
Select this text to see the selection effect.
", "template": "Select this text with your mouse to see the yellow highlight effect.
Try selecting this line too – it will have the same styling.
" } ] } ], "CSS Opacity": [ { "title": "CSS Opacity", "description": "Opacity is used to set opacity or transparency of an element. Its value ranges from 0.0 (being fully transparent) to 1.0 (being fully opaque).", "sub_description": "", "additional_info": "", "content": [ { "type": "heading", "level": "4", "text": "Transparent Box:" }, { "type": "paragraph", "text": "When applying opacity to a box element, it also gets inherited automatically to all the children of the box element. This can make text inside the box hard to read if opacity is too low." }, { "type": "textarea", "text": ".transparent-box {\n width: 300px;\n height: 200px;\n background-color: rgba(255, 255, 255, 0.5);\n border: 2px solid #000;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n\n This is a transparent box.\n
",
"template": "\n\n\n\n This is a transparent box.\n
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Transparency using RGBA:"
},
{
"type": "paragraph",
"text": "If you want to apply transparency only to the box but not the text or other elements inside it then you can use RGBA color values as in it alpha is used to add opacity to color. RGBA also specified as rgba(red, green, blue, alpha) has alpha values ranging from 0.0 (fully transparent) to 1.0 (fully opaque)."
},
{
"type": "textarea",
"text": ".transparent-bg {\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 123, 255, 0.5); /* Blue background with 50% transparency */\n}\n\n\n This div has a transparent background.\n
",
"template": "\n\n\n\n This div has a transparent background.\n
\n\n"
}
]
}
],
"CSS Units": [
{
"title": "CSS Units",
"description": "CSS has many different units for expressing length such as px, pt, rem etc.Several CSS properties take length values such as margin, padding, width, font-size etc.",
"sub_description": "",
"additional_info": "",
"content": [
{
"type": "heading",
"level": "4",
"text": "Absolute lengths:"
},
{
"type": "paragraph",
"text": "These are fixed units of measurement and are independent of surrounding context."
},
{
"type": "textarea",
"text": ".absolute-lengths {\n width: 300px; /* Absolute width in pixels */\n height: 200pt; /* Absolute height in points */\n margin: 20cm; /* Margin in centimeters */\n font-size: 16px; /* Font size in pixels */\n}\n\n\n This div uses absolute lengths.\n
",
"template": " This div uses absolute lengths like cm and pt.
"
},
{
"type": "heading",
"level": "4",
"text": "Relative lengths:"
},
{
"type": "paragraph",
"text": "This type of length is dependent on surrounding context such as parent element, viewport or the font size of the element."
},
{
"type": "textarea",
"text": ".relative-lengths {\n width: 50%; /* Width is 50% of the parent element */\n height: 10em; /* Height is 10 times the font size */\n margin: 2rem; /* Margin is 2 times the root font size */\n font-size: 1.5rem; /* Font size is 1.5 times the root font size */\n}\n\n\n This div uses relative lengths.\n
",
"template": "Absolute Units
This box uses absolute lengths like cm and pt. It does not scale with screen size.
Relative Units
This box uses relative lengths like %, em, and rem. It adapts to font size and screen width.
" }, { "type": "heading", "level": "4", "text": "Padded inputs:" }, { "type": "paragraph", "text": "" }, { "type": "textarea", "text": "input {\n padding: 15px; /* Adds padding to the input field */\n border: 1px solid #ccc; /* Sets the border color */\n border-radius: 4px; /* Rounds the corners */\n width: 100%; /* Makes the input take full width */\n box-sizing: border-box; /* Ensures padding is included in total width */\n}\n\ninput:focus {\n border-color: #66afe9; /* Changes border color on focus */\n outline: none; /* Removes default outline */\n}", "template": "
" }, { "type": "heading", "level": "4", "text": "Bordered Inputs:" }, { "type": "paragraph", "text": "The border property can be used to change border size, color and style for an input element. Also border-radius can be used to add rounded borders to input elements." }, { "type": "textarea", "text": "input {\n border: 2px solid #4CAF50; /* Sets the border color and width */\n padding: 10px; /* Adds padding inside the input field */\n border-radius: 4px; /* Rounds the corners */\n width: 100%; /* Makes the input take full width */\n box-sizing: border-box; /* Ensures padding is included in total width */\n}\n\ninput:focus {\n border-color: #3e8e41; /* Changes border color on focus */\n outline: none; /* Removes default outline */\n}", "template": "
" }, { "type": "heading", "level": "4", "text": "Colored Inputs:" }, { "type": "paragraph", "text": "Background color can be added to input elements using background-color property and text color can be styled using color property." }, { "type": "textarea", "text": "input {\n background-color: #f0f8ff; /* Sets the background color */\n color: #333; /* Sets the text color */\n border: 2px solid #add8e6; /* Sets the border color and width */\n padding: 10px; /* Adds padding inside the input field */\n border-radius: 4px; /* Rounds the corners */\n width: 100%; /* Makes the input take full width */\n box-sizing: border-box; /* Ensures padding is included in total width */\n}\n\ninput:focus {\n background-color: #e6f7ff; /* Changes background color on focus */\n border-color: #87ceeb; /* Changes border color on focus */\n outline: none; /* Removes default outline */\n}", "template": "\n\n\n
\n\n![\"Webcooks](\"https://www.webcooks.in/assets/images/webcooks-logo.webp\")
\n
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Styling Textareas:"
},
{
"type": "paragraph",
"text": "After styling textarea you can use resize: none; property to disable resizing of textreas."
},
{
"type": "textarea",
"text": "/* Styling the textarea */\ntextarea {\n width: 100%; /* Makes the textarea take the full width of the container */\n height: 150px; /* Sets a specific height for the textarea */\n padding: 10px; /* Adds padding inside the textarea */\n border: 2px solid #ccc; /* Default border color */\n border-radius: 4px; /* Rounds the corners */\n resize: none; /* Disables resizing of the textarea */\n font-family: Arial, sans-serif; /* Sets the font family */\n font-size: 16px; /* Sets the font size */\n box-sizing: border-box; /* Ensures padding is included in total width */\n}\n",
"template": "\n\n\n\n",
"IDs - Example: #nav",
"pseudo-classes, attribute selectors - Example: .dropdown, :hover, [type]",
"Elements and pseudo-elements - Example: p, ::after"
]
},
{
"type": "heading",
"level": "4",
"text": "How to calculate specificity:"
},
{
"type": "paragraph",
"text": "Take first value as 0 then:"
},
{
"type": "list",
"items": [
"Add 100 for each ID.",
"Add 10 for every class or pseudo-class or attribute selector.",
"Add 1 for each element selector or pseudo-element."
]
},
{
"type": "paragraph",
"text": "Inline style has a specificity of 1000 and is always highest priority. And if !important is used then it will override even inline style."
},
{
"type": "textarea",
"text": "/* Example of inline style and !important */\n\n"
},
{
"type": "paragraph",
"text": "You can also add blur value to the shadow. "
},
{
"type": "textarea",
"text": "/* Example of CSS Shadow Effects with Blur Value */\n\n.box {\n width: 200px;\n height: 200px;\n background-color: lightblue;\n box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Horizontal offset, Vertical offset, Blur radius, Color */\n border-radius: 10px;\n}\n\n.text {\n font-size: 24px;\n color: darkblue;\n text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Horizontal offset, Vertical offset, Blur radius, Color */\n}",
"template": ""
},
{
"type": "heading",
"level": "4",
"text": "Multiple shadow:"
},
{
"type": "paragraph",
"text": "To add multiple shadows just add the shadow values separated by comma to the text-shadow property."
},
{
"type": "textarea",
"text": "/* Example of CSS Multiple Shadow Effects */\n\n.box {\n width: 300px;\n height: 300px;\n background-color: lightcoral;\n box-shadow: \n 2px 2px 5px rgba(0, 0, 0, 0.3), /* First shadow */\n 5px 5px 15px rgba(0, 0, 0, 0.5); /* Second shadow */\n border-radius: 15px;\n}\n\n.text {\n font-size: 32px;\n color: white;\n text-shadow: \n 1px 1px 2px rgba(0, 0, 0, 0.4), /* First text shadow */\n 2px 2px 5px rgba(0, 0, 0, 0.6); /* Second text shadow */\n}",
"template": ""
},
{
"type": "paragraph",
"text": "Additionally, you can utilize the text-shadow property to surround certain text with a plain border devoid of shadows."
},
{
"type": "textarea",
"text": "/* Example of Text Shadow for Border Effect */\n\n.text-border {\n font-size: 48px;\n color: white;\n text-shadow: \n -1px -1px 0 rgba(0, 0, 0, 1), /* Top left */\n 1px -1px 0 rgba(0, 0, 0, 1), /* Top right */\n -1px 1px 0 rgba(0, 0, 0, 1), /* Bottom left */\n 1px 1px 0 rgba(0, 0, 0, 1); /* Bottom right */\n}\n\n/* Usage */\nCSS Shadow Effects Demo \n\n\n\n
Syntax:transition: [property-name] [duration] [timing-function] [delay];" }, { "type": "textarea", "text": "/* Example of using the transition shorthand property */\n.transition-example {\n width: 100px;\n height: 100px;\n background-color: blue;\n transition: background-color 0.5s ease-in-out, transform 0.3s ease;\n}\n\n.transition-example:hover {\n background-color: green;\n transform: scale(1.1);\n}\n\n/* Usage */\nCSS Animation Demo \n\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The animation-duration property:"
},
{
"type": "paragraph",
"text": "The animation-duration property defines the time duration an animation takes. If this property is not specified then animation will not occur as by default it is set to 0s (seconds)In @keyframes you can specify change in animation using:to and from:"
},
{
"type": "textarea",
"text": "/* Define the keyframes for the slide animation */\n@keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(100px); }\n}\n\n/* Apply the animation to an element with a specific duration */\n.slide-in {\n width: 200px;\n height: 200px;\n background-color: teal;\n animation-name: slide;\n animation-duration: 2s; /* Animation lasts for 2 seconds */\n animation-fill-mode: forwards;\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Delay an animation:"
},
{
"type": "paragraph",
"text": "The animation-delay property is used to set delay time in start of an animation. It is specified in seconds. It can also be specified in negative time and in that case it will play as if it had already been playing for the specified seconds."
},
{
"type": "textarea",
"text": "/* Define the keyframes for the fade-in animation */\n@keyframes fadeIn {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n}\n\n/* Apply the animation with a delay */\n.fade-in {\n width: 200px;\n height: 200px;\n background-color: coral;\n animation-name: fadeIn;\n animation-duration: 3s; /* Animation lasts for 3 seconds */\n animation-delay: 1s; /* Animation starts after a delay of 1 second */\n animation-fill-mode: forwards;\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Set How Many Times an Animation Should Run:"
},
{
"type": "paragraph",
"text": ""
},
{
"type": "textarea",
"text": "/* Define the keyframes for the bounce animation */\n@keyframes bounce {\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-30px); }\n 60% { transform: translateY(-15px); }\n}\n\n/* Apply the animation with iteration count */\n.bounce {\n width: 100px;\n height: 100px;\n background-color: goldenrod;\n animation-name: bounce;\n animation-duration: 2s; /* Animation lasts for 2 seconds */\n animation-iteration-count: 5; /* Animation will run 5 times */\n animation-fill-mode: forwards;\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Run Animation in Reverse Direction or Alternate Cycles:"
},
{
"type": "paragraph",
"text": "The animation-direction property defines in which direction the animation should run, forwards, backwards or in alternate cycles. This property can have the following values:"
},
{
"type": "list",
"items": [
"normal: this plays the animation in its normal flow is forwards and this is by default.",
"reverse: this plays the animation backwards or in reverse direction.",
"alternate: this plays the animation first in forward direction then in backward direction.",
"alternate-reverse: this plays animation in backward direction first and then forwards."
]
},
{
"type": "textarea",
"text": "/* Define the keyframes for a simple scale animation */\n@keyframes scale {\n from { transform: scale(1); }\n to { transform: scale(1.5); }\n}\n\n/* Apply the animation with alternate direction */\n.scale-animation {\n width: 200px;\n height: 200px;\n background-color: teal;\n animation-name: scale;\n animation-duration: 2s;\n animation-direction: alternate; /* Animation will run forward and then backward */\n animation-iteration-count: infinite; /* Animation will repeat indefinitely */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Specify the Speed Curve of the Animation:"
},
{
"type": "paragraph",
"text": "The animation-timing-function property in CSS controls how an animation moves forward over time by defining its speed curve. Because it controls the animation's tempo, more dynamic and eye-catching effects are possible. "
},
{
"type": "list",
"items": [
" ease: (default) Defines an animation that begins slowly, accelerates, and ends slowly.",
"linear:",
"ease-in: defines a slow-starting animation.",
" ease-out – defines a slow-ending animation.",
"ease-in-out – this defines an animation which has a slow start and a slow end.",
"cubic-bezier(n,n,n,n) – this lets you define your own values in a cubic-bezier function."
]
},
{
"type": "textarea",
"text": "/* Define the keyframes for a simple move animation */\n@keyframes move {\n from { transform: translateX(0); }\n to { transform: translateX(100px); }\n}\n\n/* Apply the animation with a custom timing function */\n.move-animation {\n width: 100px;\n height: 100px;\n background-color: coral;\n animation-name: move;\n animation-duration: 2s;\n animation-timing-function: ease-in-out; /* Specify the speed curve of the animation */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Specify the fill-mode For an Animation:"
},
{
"type": "paragraph",
"text": "Neither before nor after the first keyframe is played do CSS animations have an impact on an element. The animation-fill-mode property has the ability to overrule this action.The animation-fill-mode property can take up the following values: "
},
{
"type": "list",
"items": [
"none: It is the default setting. ",
"forwards: (Depends on animation-direction and animation-iteration-count) the element will maintain the style settings established by the previous keyframe.",
"backwards: ",
"both: The animation will follow properties of both forwards and backwards and will extend animation properties in both directions."
]
},
{
"type": "textarea",
"text": "/* Define the keyframes for a simple fade animation */\n@keyframes fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Apply the animation with a fill-mode */\n.fade-animation {\n width: 100px;\n height: 100px;\n background-color: teal;\n animation-name: fade;\n animation-duration: 3s;\n animation-fill-mode: forwards; /* Specifies that the animation will maintain the final state */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "Animation shorthand property:"
},
{
"type": "paragraph",
"text": "You may set several animation-related properties in a single line using CSS's animation shorthand property.
Syntax:animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];" }, { "type": "textarea", "text": "/* Define the keyframes for a simple bounce animation */\n@keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-30px);\n }\n 60% {\n transform: translateY(-15px);\n }\n}\n\n/* Apply the animation using shorthand property */\n.bounce-animation {\n width: 100px;\n height: 100px;\n background-color: orange;\n animation: bounce 2s ease infinite; /* Shorthand for all animation properties */\n}\n\n/* Usage */\n", "template": "\n\n\nCSS Animation Demo \n\n\n\n\n\n"
}
]
}
],
"CSS Transformations": [
{
"title": "CSS Transformations",
"description": "2D transforms:You can skew, scale, rotate, and move elements using CSS 2D transforms. The transformation in this are done along the X-axis and Y-axis.",
"sub_description": "",
"additional_info": "",
"content": [
{
"type": "heading",
"level": "4",
"text": "The translate() method:"
},
{
"type": "paragraph",
"text": "An element is moved from its present position using the translate() method (based on the X-axis and Y-axis parameters)."
},
{
"type": "textarea",
"text": "/* Example of using the translate() method in CSS */\n.translate-example {\n width: 100px;\n height: 100px;\n background-color: blue;\n transform: translate(50px, 50px); /* Moves the element 50px to the right and 50px down */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The rotate() method:"
},
{
"type": "paragraph",
"text": "An element can be rotated clockwise or counterclockwise using the rotate() method according to a given degree. Using positive values will rotate element clockwise and negative values will rotate element counter-clockwise."
},
{
"type": "textarea",
"text": "/* Example of using the rotate() method in CSS */\n.rotate-example {\n width: 100px;\n height: 100px;\n background-color: red;\n transform: rotate(45deg); /* Rotates the element 45 degrees clockwise */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The scale() method:"
},
{
"type": "paragraph",
"text": "Depending on the values provided for the width and height, the scale() method alters the size of an element.An elements size can be halved by using scale(0.5,0.5)."
},
{
"type": "textarea",
"text": "/* Example of using the scale() method in CSS */\n.scale-example {\n width: 100px;\n height: 100px;\n background-color: blue;\n transform: scale(1.5); /* Scales the element to 150% of its original size */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "5",
"text": "The scaleX() method:"
},
{
"type": "paragraph",
"text": "An element's width can be changed using the scaleX() method."
},
{
"type": "textarea",
"text": "/* Example of using the scaleX() method in CSS */\n.scaleX-example {\n width: 100px;\n height: 100px;\n background-color: green;\n transform: scaleX(2); /* Scales the element's width to 200% of its original size */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "5",
"text": "The scaleY() method:"
},
{
"type": "paragraph",
"text": "An element's height can be changed using the scaleY() method."
},
{
"type": "textarea",
"text": "/* Example of using the scaleY() method in CSS */\n.scaleY-example {\n width: 100px;\n height: 100px;\n background-color: blue;\n transform: scaleY(1.5); /* Scales the element's height to 150% of its original size */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The skew() Method:"
},
{
"type": "paragraph",
"text": "An element is skewed along the X-axis and the Y-axis by a specified angle using skew() method."
},
{
"type": "textarea",
"text": "/* Example of using the skew() method in CSS */\n.skew-example {\n width: 100px;\n height: 100px;\n background-color: orange;\n transform: skew(20deg, 10deg); /* Skews the element by 20 degrees on the X-axis and 10 degrees on the Y-axis */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "5",
"text": "The skewX() method:"
},
{
"type": "paragraph",
"text": "An element is skewed along the X-axis by the specified angle using the skewX() method."
},
{
"type": "textarea",
"text": "/* Example of using the skewX() method in CSS */\n.skewX-example {\n width: 100px;\n height: 100px;\n background-color: teal;\n transform: skewX(30deg); /* Skews the element by 30 degrees on the X-axis */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "5",
"text": "The skewY() Method:"
},
{
"type": "paragraph",
"text": "An element is skewed along the Y-axis by the specified angle using skewY() method."
},
{
"type": "textarea",
"text": "/* Example of using the skewY() method in CSS */\n.skewY-example {\n width: 100px;\n height: 100px;\n background-color: coral;\n transform: skewY(30deg); /* Skews the element by 30 degrees on the Y-axis */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The matrix() method:"
},
{
"type": "paragraph",
"text": "In the matrix() method all the 2D transform properties are combined into one.
Syntax:Transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());" }, { "type": "textarea", "text": "/* Example of using the matrix() method in CSS */\n.matrix-example {\n width: 100px;\n height: 100px;\n background-color: lightblue;\n transform: matrix(1, 0.5, 0.5, 1, 0, 0); /* Applies a 2D transformation with matrix values */\n}\n\n/* Usage */\n", "template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "2",
"text": "3D transforms in CSS:"
},
{
"type": "paragraph",
"text": "Using CSS you can also perform 3D transformations. These transformation differ from 2D transformation as these also have a Z-axis along with X-axis and Y-axis."
},
{
"type": "textarea",
"text": "/* Example of 3D transforms in CSS */\n.three-d-transform {\n width: 100px;\n height: 100px;\n background-color: coral;\n transform: rotateY(30deg) rotateX(20deg) translateZ(50px); /* Applies 3D transformations */\n transform-style: preserve-3d; /* Enables 3D transformations */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The rotateX() Method:"
},
{
"type": "paragraph",
"text": "An element is rotated by a specified degree along the X-axis using rotateX() method."
},
{
"type": "textarea",
"text": "/* Example of rotateX() method in CSS */\n.rotate-x {\n width: 100px;\n height: 100px;\n background-color: lightblue;\n transform: rotateX(45deg); /* Rotates the element 45 degrees around the X-axis */\n transition: transform 0.5s; /* Adds a transition effect */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The rotateY() method:"
},
{
"type": "paragraph",
"text": "An element is rotated by a specified degree along the Y-axis using rotateY() method."
},
{
"type": "textarea",
"text": "/* Example of rotateY() method in CSS */\n.rotate-y {\n width: 100px;\n height: 100px;\n background-color: lightgreen;\n transform: rotateY(45deg); /* Rotates the element 45 degrees around the Y-axis */\n transition: transform 0.5s; /* Adds a transition effect */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The rotateZ() method:"
},
{
"type": "paragraph",
"text": "An element is rotated by a specified degree along the Z-axis using rotateZ() method."
},
{
"type": "textarea",
"text": "/* Example of rotateZ() method in CSS */\n.rotate-z {\n width: 100px;\n height: 100px;\n background-color: lightcoral;\n transform: rotateZ(30deg); /* Rotates the element 30 degrees around the Z-axis */\n transition: transform 0.5s; /* Adds a transition effect */\n}\n\n/* Usage */\n",
"template": "\n\n\nCSS Transformations Demo \n\n\n\n\n\n"
}
]
}
],
"CSS Media Queries": [
{
"title": "CSS Media Queries",
"description": "In CSS2, the @media rule was added, allowing for the definition of distinct style rules for various media types. The CSS3 media queries concept expanded on the CSS2 media type concept by examining the device's capabilities rather than its type.",
"sub_description": "CSS media queries let you apply styles according on certain conditions, such as viewport size (height and width of viewport), screen resolution, or device orientation (orientation of viewport like landscape or portrait).",
"additional_info": "Syntax:A media query is made up of a media type and one or more media features that can be true or false. The media-type is optional but is necessary when not or only is used.
@media not|only media-type and (media feature) and (media feature) {
/* CSS rules here */
}", "content": [ { "type": "heading", "level": "4", "text": "Explanation:" }, { "type": "list", "items": [ "media-type: Defines the media type (e.g., screen, print). Using only restricts the styles to that media type.", "not: Excludes the defined media condition or type from the subsequent styles.", "media feature: This represents conditions such as min-width, min-resolution, max-width etc.", "and: More precise queries are made possible by combining a media type with one or more media features using the and keyword.", "only: To stop the styles within that media query from being applied by older browsers that do not support media queries, the only keyword is used. " ] }, { "type": "paragraph", "text": "The media query is considered to be \"true\" if" }, { "type": "list", "items": [ "The media type matches the device type For example, if the device is a screen and the media type is screen, the two are compatible.", "All specified media features in media query evaluate to true (for example, if the viewport width is less than or equal to a specific value)." ] }, { "type": "paragraph", "text": "Additionally, you can link to various stylesheets for various media and viewport (browser window) widths:" }, { "type": "textarea", "text": "\n\n\n", "template": "\n\n\nCSS Media Queries Demo \n\n\n\n\n"
},
{
"type": "paragraph",
"text": "Having a differnet CSS section directly within your style sheet is one way to use media queries.For example:-"
},
{
"type": "textarea",
"text": "@media (max-width: 600px) {\n body {\n background-color: lightblue;\n }\n}\n\n@media (min-width: 601px) and (max-width: 1024px) {\n body {\n background-color: lightgreen;\n }\n}\n\n@media (min-width: 1025px) {\n body {\n background-color: lightcoral;\n }\n}",
"template": "
This text is red (inline style).
\nThis text will be blue (inline style with !important).
", "template": "This text is red (inline style).
This text will be blue (inline style with !important).
" }, { "type": "heading", "level": "4", "text": "!important flag:" }, { "type": "paragraph", "text": "A style rule can be given greater specificity or priority in CSS by adding the special flag !important, which guarantees that the rule is enforced even in the event that it conflicts with other rules. Unless those rules also use !important, it takes precedence above any other conflicting rules." }, { "type": "textarea", "text": "/* Example of the !important flag */\n\n\n\nThis text is green.
\nThis text will be red due to !important.
", "template": "This text is green.
This text will be red due to !important.
" }, { "type": "heading", "level": "4", "text": "More specificity rules examples:" }, { "type": "paragraph", "text": "If a same rule is written twice then it means they have equal specificity in that case the latest rule wins and its CSS rule will be applied." }, { "type": "textarea", "text": "/* Example of specificity rules */\n\n\n\nThis text will be orange because the latest rule is applied.
", "template": "This text will be orange because the latest rule is applied.
" }, { "type": "paragraph", "text": "ID selectors have a higher specificity than attribute selectors." }, { "type": "textarea", "text": "/* Example of ID selector vs. attribute selector */\n\n\n\n", "template": "" }, { "type": "paragraph", "text": "Internal CSS rule will be closer to the HTML code than external sheet so CSS rule of internal CSS will be applied." }, { "type": "textarea", "text": "/* Example of Internal CSS vs. External CSS */\n\n\n \n \n\n\n\nThis text will be blue due to the internal CSS.
\n",
"template": " This text will be blue due to the internal CSS.
"
},
{
"type": "paragraph",
"text": "A class selector wins over any element selectors."
},
{
"type": "textarea",
"text": "/* Example of Class Selector vs. Element Selector */\n\n\n \n\n\n\n This text will be blue because the class selector has higher specificity.
\n", "template": "This text will be blue because the class selector has higher specificity.
" } ] } ], "CSS Shadow": [ { "title": "CSS Shadow effects", "description": "In CSS a shadow can be applied to text or element. ", "sub_description": " The basic way to use it is to add horizontal shadow value and vertical shadow value to text-shadow property.", "additional_info": "You can also change the color of shadow by specifying color value after horizontal and vertical shadow value.", "content": [ { "type": "textarea", "text": "/* Example of CSS Shadow Effects */\n\n.box {\n width: 200px;\n height: 200px;\n background-color: lightblue;\n box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Adds a shadow effect */\n border-radius: 10px;\n}\n\n.text {\n font-size: 24px;\n color: darkblue;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow effect */\n}", "template": "This text will have a shadow effect.
This text will have a shadow effect.
This text will have a shadow effect.
Hello, Webcooks!
", "template": "\n\n\nHello, Webcooks!
\n\n" }, { "type": "heading", "level": "4", "text": "box-shadow property:" }, { "type": "paragraph", "text": "The box-shadow property allows us to add one or more shadow to an element.The most basic use of this property is with horizontal and vertical value. " }, { "type": "textarea", "text": "/* Example of Box Shadow Property */\n\n.box-shadow-example {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* Horizontal, Vertical, Blur, Color */\n}\n\n/* Usage */\nBox Shadow Example
",
"template": "Box Shadow Example
"
},
{
"type": "paragraph",
"text": "The color parameter can be used to specify color for the shadow in box-shadow property."
},
{
"type": "textarea",
"text": "/* Example of Box Shadow Color Parameter */\n\n.box-shadow-color {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: 5px 5px 10px red; /* Horizontal, Vertical, Blur, Color */\n}\n\n/* Usage */\nShadow with Red Color
",
"template": "Shadow with Red Color
"
},
{
"type": "paragraph",
"text": "The blur parameter is used to specify the blur radius. The more the blur radius, the more blur the shadow is.Example of how to add blur to a box shadow:"
},
{
"type": "textarea",
"text": "/* Example of Box Shadow Blur Parameter */\n\n.box-shadow-blur {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: 5px 5px 20px gray; /* Horizontal, Vertical, Blur, Color */\n}\n\n/* Usage */\nShadow with Blur
",
"template": "Shadow with Blur
"
},
{
"type": "heading",
"level": "4",
"text": "Setting spread radius of box shadow:"
},
{
"type": "paragraph",
"text": "The spread parameter is used to specify the spread radius of the box shadow. If it’s positive the size of shadow increases and if it’s negative, the size of shadow decreases."
},
{
"type": "textarea",
"text": "/* Example of Box Shadow Spread Radius */\n\n.box-shadow-spread {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: 5px 5px 10px 5px gray; /* Horizontal, Vertical, Blur, Spread, Color */\n}\n\n/* Usage */\nShadow with Spread Radius
",
"template": "Shadow with Spread Radius
"
},
{
"type": "heading",
"level": "4",
"text": "The inset parameter:"
},
{
"type": "paragraph",
"text": "The inset parameter sets the shadow from being an outer shadow to being a inner shadow."
},
{
"type": "textarea",
"text": "/* Example of Box Shadow with Inset */\n\n.box-shadow-inset {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: inset 5px 5px 10px gray; /* Inset, Horizontal, Vertical, Blur, Color */\n}\n\n/* Usage */\nInset Shadow
",
"template": "Inset Shadow
"
},
{
"type": "heading",
"level": "4",
"text": "Adding multiple shadows:"
},
{
"type": "paragraph",
"text": "You can add multiple box shadows to an element by separating the values by a coma(“,”)."
},
{
"type": "textarea",
"text": "/* Example of Box Shadow with Multiple Shadows */\n\n.multiple-shadows {\n width: 200px;\n height: 100px;\n background-color: #ffffff;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),\n -2px -2px 5px rgba(255, 0, 0, 0.5); /* Multiple shadows with different colors */\n}\n\n/* Usage */\nMultiple Shadows
",
"template": "Multiple Shadows
"
}
]
}
],
"CSS Transition": [
{
"title": "CSS Transition",
"description": "CSS transition is used to control the smooth transition between two states of an element.transition property:To add transition using transition property, first specify the CSS property to add effect to and specify duration of the effect. ",
"sub_description": "If duration is not specified, it will default to 0 and transition will have no effect.",
"additional_info": "",
"content": [
{
"type": "textarea",
"text": "/* Example of CSS Transition */\n\n.transition-example {\n width: 200px;\n height: 100px;\n background-color: blue;\n transition: background-color 0.5s ease, transform 0.5s ease; /* Transition for background color and transform properties */\n}\n\n.transition-example:hover {\n background-color: green; /* Changes background color on hover */\n transform: scale(1.1); /* Scales the element on hover */\n}\n\n/* Usage */\nHover me!
",
"template": "Hover me!
"
},
{
"type": "heading",
"level": "4",
"text": "Changing multiple property values:"
},
{
"type": "paragraph",
"text": "You can add effect to multiple CSS properties using transition property just by separating them by a coma (“,”) and also adding duration of effect for each of the property."
},
{
"type": "textarea",
"text": "/* Example of Changing Multiple Property Values with CSS Transition */\n\n.transition-multiple {\n width: 200px;\n height: 100px;\n background-color: blue;\n color: white;\n font-size: 16px;\n transition: background-color 0.5s ease, color 0.5s ease, font-size 0.5s ease; /* Transition for multiple properties */\n}\n\n.transition-multiple:hover {\n background-color: green; /* Changes background color on hover */\n color: yellow; /* Changes text color on hover */\n font-size: 20px; /* Increases font size on hover */\n}\n\n/* Usage */\nHover over me!
",
"template": "Hover over me!
"
},
{
"type": "heading",
"level": "4",
"text": "Specify the Speed Curve of the Transition:"
},
{
"type": "paragraph",
"text": "The transition-timing-function is used to speed and manner of change during a transition."
},
{
"type": "paragraph",
"text": "This property can have the following values:"
},
{
"type": "list",
"items": [
"ease – this defines a transition effect which starts slowly, then becomes fast, then ends slowly (this is default).",
"linear – this defines a transition effect which has constant speed from start to end.",
"ease-in – this defines a transition effect which starts slowly.",
"ease-out – this defines a transition effect which ends slowly.",
"ease-in-out – this defines a transition effect whichs starts slowly and ends slowly as well.",
"cubic-bezier(n,n,n,n) - allows you to define your own values in a cubic-bezier function."
]
},
{
"type": "textarea",
"text": "/* Example of Specifying the Speed Curve of the Transition */\n\n.speed-curve {\n width: 200px;\n height: 100px;\n background-color: blue;\n color: white;\n transition: background-color 1s ease-in-out; /* Ease-in-out for speed curve */\n}\n\n.speed-curve:hover {\n background-color: green; /* Changes background color on hover */\n}\n\n/* Usage */\nHover over me!
",
"template": "Hover over me!
"
},
{
"type": "heading",
"level": "4",
"text": "Delay the transition effect:"
},
{
"type": "paragraph",
"text": "The transition-delay property is used to add a delay to transition effect. The delay is in seconds."
},
{
"type": "textarea",
"text": "/* Example of Delaying the Transition Effect */\n\n.delay-transition {\n width: 200px;\n height: 100px;\n background-color: blue;\n color: white;\n transition: background-color 1s ease-in-out 0.5s; /* Delay of 0.5s before starting the transition */\n}\n\ndelay-transition:hover {\n background-color: green; /* Changes background color on hover */\n}\n\n/* Usage */\nJoin the Webcooks journey!
",
"template": "Join the Webcooks journey!
"
},
{
"type": "heading",
"level": "4",
"text": "Transition shorthand property:"
},
{
"type": "paragraph",
"text": "The transition property is the shorthand for several transition properties.Syntax:transition: [property-name] [duration] [timing-function] [delay];" }, { "type": "textarea", "text": "/* Example of using the transition shorthand property */\n.transition-example {\n width: 100px;\n height: 100px;\n background-color: blue;\n transition: background-color 0.5s ease-in-out, transform 0.3s ease;\n}\n\n.transition-example:hover {\n background-color: green;\n transform: scale(1.1);\n}\n\n/* Usage */\n
Join Webcooks!
",
"template": "Join Webcooks!
"
}
]
}
],
"CSS Animations": [
{
"title": "CSS Animation",
"description": "You can do animations in CSS to HTML elements without the use of javascript.",
"sub_description": "The following properties will be discussed in this chapter:",
"additional_info": "",
"content": [
{
"type": "list",
"items": [
"@keyframes",
"animation-name",
"animation-duration",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-timing-function",
"animation-fill-mode",
"animation"
]
},
{
"type": "paragraph",
"text": "An element can transition subtly between styles with the use of animation.You must first define a few keyframes for the animation before you can utilize CSS animation."
},
{
"type": "textarea",
"text": "/* Define the keyframes */\n@keyframes exampleAnimation {\n 0% { transform: translateX(0); }\n 50% { transform: translateX(100px); }\n 100% { transform: translateX(0); }\n}\n\n/* Apply the animation to an element */\n.animated-box {\n width: 100px;\n height: 100px;\n background-color: blue;\n animation-name: exampleAnimation;\n animation-duration: 2s;\n animation-delay: 0s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n}\n\n/* Usage */\nWelcome to Webcooks Community
",
"template": "\n\n\nWelcome to Webcooks Community
\n\n"
},
{
"type": "heading",
"level": "4",
"text": "The @keyframes Rule:"
},
{
"type": "paragraph",
"text": "By specifying styles inside of @keyframes rule, at some time the animation will change gradually from current style to the new style inside of @keyframes."
},
{
"type": "textarea",
"text": "/* Define the keyframes for the fade animation */\n@keyframes fade {\n 0% { opacity: 0; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n}\n\n/* Apply the animation to an element */\n.fade-in {\n width: 200px;\n height: 200px;\n background-color: coral;\n animation-name: fade;\n animation-duration: 3s;\n animation-fill-mode: forwards;\n}\n\n/* Usage */\n",
"template": "\n\n\nSyntax:animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];" }, { "type": "textarea", "text": "/* Define the keyframes for a simple bounce animation */\n@keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-30px);\n }\n 60% {\n transform: translateY(-15px);\n }\n}\n\n/* Apply the animation using shorthand property */\n.bounce-animation {\n width: 100px;\n height: 100px;\n background-color: orange;\n animation: bounce 2s ease infinite; /* Shorthand for all animation properties */\n}\n\n/* Usage */\n", "template": "\n\n\n
Syntax:Transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());" }, { "type": "textarea", "text": "/* Example of using the matrix() method in CSS */\n.matrix-example {\n width: 100px;\n height: 100px;\n background-color: lightblue;\n transform: matrix(1, 0.5, 0.5, 1, 0, 0); /* Applies a 2D transformation with matrix values */\n}\n\n/* Usage */\n", "template": "\n\n\n
@media not|only media-type and (media feature) and (media feature) {
/* CSS rules here */
}", "content": [ { "type": "heading", "level": "4", "text": "Explanation:" }, { "type": "list", "items": [ "media-type: Defines the media type (e.g., screen, print). Using only restricts the styles to that media type.", "not: Excludes the defined media condition or type from the subsequent styles.", "media feature: This represents conditions such as min-width, min-resolution, max-width etc.", "and: More precise queries are made possible by combining a media type with one or more media features using the and keyword.", "only: To stop the styles within that media query from being applied by older browsers that do not support media queries, the only keyword is used. " ] }, { "type": "paragraph", "text": "The media query is considered to be \"true\" if" }, { "type": "list", "items": [ "The media type matches the device type For example, if the device is a screen and the media type is screen, the two are compatible.", "All specified media features in media query evaluate to true (for example, if the viewport width is less than or equal to a specific value)." ] }, { "type": "paragraph", "text": "Additionally, you can link to various stylesheets for various media and viewport (browser window) widths:" }, { "type": "textarea", "text": "\n\n\n", "template": "\n\n\n
Media Query Demo
Resize the browser window to see the background color change.
" }, { "type": "heading", "level": "4", "text": "" } ] } ] }