mystudycode

Friday, May 31, 2024

HTML Semantics sheet

<article>: Defines independent, self-contained content.

<aside>: Contains content that is tangentially related to the content around it and could be considered separate.

<details>: Used to create an interactive widget that the user can open and close, revealing additional details.

<figcaption>: Provides a caption for a <figure> element.

<figure>: Represents self-contained content, like illustrations, diagrams, photos, code listings, etc., that is referenced as a single unit.

<footer>: Defines a footer for a document or section, typically containing information about the author, copyright information, etc.

<header>: Specifies a header for a document or section, usually containing introductory content or navigational aids.

<main>: Identifies the main content of a document, which is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, header or footer information.

<mark>: Highlights text.

<nav>: Defines a set of navigation links.

<section>: Represents a standalone section of a document, typically with a theme or topic.

<summary>: Defines a visible heading for a <details> element.

<time>: Indicates a specific period in time.

Tuesday, May 21, 2024

CSS Text & Fonts

Text&fonts.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Text&fonts</title>

    <link rel="stylesheet" href="Text&fonts.css">

</head>

<body>

    <h1>Fonts and Text</h1>

    <p><span>Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

</body>

</html>

Text&fonts.css

h1{

    font-family: "Helvetica";

    font-size: 40px;

}

p{

    font-family: Arial, Helvetica, sans-serif;

    font-style: Italic;

    text-decoration: underline;

    font-size: 1.7em;

}

span{

    font-weight: bold;

}

*{

    line-height: 2;

}

OUTPUT

Text Propertiescolor:
Sets the color of the text.
Example: p { color: #333333; }
text-align:
Specifies the horizontal alignment of text.
Values: left, right, center, justify.
Example: h1 { text-align: center; }
text-decoration:
Adds decoration to the text.
Values: none, underline, overline, line-through, blink.
Example: a { text-decoration: none; }
text-transform:
Controls the capitalization of text.
Values: none, capitalize, uppercase, lowercase.
Example: p { text-transform: uppercase; }
text-indent:
Indents the first line of text in an element.
Example: p { text-indent: 50px; }
line-height:
Sets the amount of space between lines of text.
Example: p { line-height: 1.5; }
letter-spacing:
Sets the space between characters.
Example: h1 { letter-spacing: 2px; }
word-spacing:
Sets the space between words.
Example: p { word-spacing: 4px; }
text-shadow:
Adds shadow to text.
Example: h1 { text-shadow: 2px 2px 5px gray; }
text-overflow:
Specifies how overflowed content that is not displayed is signaled to the user.
Values: clip, ellipsis.
Example: div { text-overflow: ellipsis; }
white-space:
Specifies how white space inside an element is handled.
Values: normal, nowrap, pre, pre-line, pre-wrap.
Example: pre { white-space: pre; }
text-align-last:
Sets how the last line of a block or a line right before a forced line break is aligned.
Values: auto, left, right, center, justify.
Example: p { text-align-last: right; }
text-decoration-color:
Sets the color of the text decoration.
Example: a { text-decoration-color: red; }
text-decoration-style:
Sets the style of the text decoration.
Values: solid, double, dotted, dashed, wavy.
Example: a { text-decoration-style: dashed; }
text-decoration-line:
Specifies what kind of line decorations are added to the text.
Values: none, underline, overline, line-through.
Example: a { text-decoration-line: underline; }
Font Propertiesfont-family:
Specifies the font family for text.
Example: p { font-family: Arial, sans-serif; }
font-size:
Sets the size of the font.
Example: p { font-size: 16px; }
font-weight:
Sets the weight (boldness) of the font.
Values: normal, bold, bolder, lighter, 100 to 900.
Example: h1 { font-weight: bold; }
font-style:
Sets the style of the font.
Values: normal, italic, oblique.
Example: p { font-style: italic; }
font-variant:
Specifies whether or not a text should be displayed in a small-caps font.
Values: normal, small-caps.
Example: p { font-variant: small-caps; }
font-size-adjust:
Preserves the readability of text when the font fallback is used.
Example: p { font-size-adjust: 0.5; }
font-stretch:
Selects a normal, condensed, or expanded face from a font.
Values: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded.
Example: p { font-stretch: expanded; }
font:
Shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.
Example: p { font: italic small-caps bold 16px/1.5 Arial, sans-serif; }
USAGE EXAMPLE

body { font-family: Arial, sans-serif; font-size: 16px; color: #333; line-height: 1.6; } h1 { font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } p { text-indent: 50px; letter-spacing: 1px; word-spacing: 2px; text-align: justify; } a { text-decoration: none; color: blue; } a:hover { text-decoration: underline; } blockquote { font-style: italic; border-left: 5px solid #ccc; padding-left: 10px; margin-left: 0; color: #555; }

CSS Selectors

selectors.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectors</title>
    <link rel="stylesheet" href="selectors.css">
</head>
<body>
        <ul>
                <li id="select">The Great Barrier Reef</li>
                <li class="underline">Pyramids of Giza</li>
                <li class="underline">Stonehenge</li>
        </ul>
</body>
</html>

selectors.css
li{
  border: 4px solid blue;
}
#select{
   background-color: red;
}
.underline{
 text-decoration: underline;
}

Output

Basic Selectors

Universal Selector (*):
- Selects all elements.
- Example: * { margin: 0; padding: 0; }
Type Selector (Element Selector):
- Selects all elements of a given type.
- Example: p { font-size: 16px; }
Class Selector (.):
- Selects all elements with a specific class.
- Example: .highlight { background-color: yellow; }
ID Selector (#):
- Selects a single element with a specific ID.
- Example: #header { background-color: blue; }

Attribute Selectors

[attribute] Selector:
- Selects elements with a specific attribute.
- Example: [type="text"] { width: 200px; }
[attribute=value] Selector:
- Selects elements with a specific attribute value.
- Example: [href="example.com"] { color: red; }
[attribute~=value] Selector:
- Selects elements with an attribute containing a specific word.
- Example: [class~=button] { padding: 10px; }
[attribute|=value] Selector:
- Selects elements with an attribute value that is exactly equal to a given value or starts with a given value followed by a hyphen.
- Example: [lang|=en] { font-family: Arial; }
[attribute^=value] Selector:
- Selects elements with an attribute value that starts with a specific value.
- Example: [title^="Hello"] { color: green; }
[attribute$=value] Selector:
- Selects elements with an attribute value that ends with a specific value.
- Example: [src$=".jpg"] { border: 1px solid black; }
[attribute=value] Selector*:
- Selects elements with an attribute value that contains a specific value.
- Example: [title*="important"] { font-weight: bold; }

Combinator Selectors

Descendant Selector (space):
- Selects all elements that are descendants of a specified element.
- Example: div p { color: blue; }
Child Selector (>):
- Selects all elements that are direct children of a specified element.
- Example: ul > li { list-style-type: none; }
Adjacent Sibling Selector (+):
- Selects an element that is the next sibling immediately following another element.
- Example: h1 + p { margin-top: 0; }
General Sibling Selector (~):
- Selects all elements that are siblings of a specified element.
- Example: h2 ~ p { color: gray; }

Pseudo-class Selectors

:hover:
- Selects elements when the user hovers over them.
- Example: a:hover { color: red; }
:focus:
- Selects elements that have focus.
- Example: input:focus { border-color: blue; }
:nth-child(n):
- Selects the nth child of a parent.
- Example: li:nth-child(2) { color: green; }
:nth-of-type(n):
- Selects the nth child of a specific type of its parent.
- Example: p:nth-of-type(2) { font-size: 18px; }
:first-child:
- Selects the first child of a parent.
- Example: p:first-child { font-weight: bold; }
:last-child:
- Selects the last child of a parent.
- Example: p:last-child { font-style: italic; }
:only-child:
- Selects an element that is the only child of its parent.
- Example: p:only-child { color: purple; }
:nth-last-child(n):
- Selects the nth child from the end of its parent.
- Example: li:nth-last-child(2) { color: orange; }

Pseudo-element Selectors

::before:
- Inserts content before the content of an element.
- Example: p::before { content: "Note: "; font-weight: bold; }
::after:
- Inserts content after the content of an element.
- Example: p::after { content: " End"; }
::first-line:
- Selects the first line of a block-level element.
- Example: p::first-line { font-size: 1.2em; }
::first-letter:
- Selects the first letter of a block-level element.
- Example: p::first-letter { font-size: 2em; color: red; }

Grouping Selectors

Grouping Selector (,):
- Selects all elements matched by the selectors separated by a comma.
- Example: h1, h2, h3 { margin-bottom: 10px; }

Other Useful Selectors

:not(selector):
- Selects all elements that do not match the given selector.
- Example: :not(p) { background-color: lightgray; }
:empty:
- Selects elements that have no children.
- Example: div:empty { display: none; }
:checked:
- Selects checked elements (checkboxes or radio buttons).
- Example: input:checked { background-color: yellow; }
:disabled:
- Selects disabled form elements.
- Example: input:disabled { background-color: lightgray; }

Background and Border usage in HTML

background&border.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Akatsuki</h1>

<ul>

<li>Sasori</li>

<li>hidan</li>

<li>Kakuzu</li>

<li>Itachi</li>

<li>kisame</li>

<li>zetsu</li>

<li>Konan</li>

<li>Nagato</li>

<li>Kabuto</li>

<li>Orochimaru</li>

<li>Sasuke Uchiha</li>

</ul>

</body>

</html>

bg.css

h1{

background:rgb(255, 80, 80);

border: 5px solid black;

/* The above code is written in short including the values for the width, style, color of the border accoridingly */

}

body{

background: url(https://wallpapers.com/images/featured/underwater-background-oepaymjqd9zy7i7v.jpg);

/* fetching the image for the cover from a google page */

background-size: cover;

}

ul{

color: aliceblue;

}

Output:

Background Properties

background:
- Shorthand property for setting all background properties in one declaration.
background-color:
- Sets the background color of an element.
background-image:
- Sets the background image of an element.
background-repeat:
- Sets how background images are repeated.
  - Values: repeat, repeat-x, repeat-y, no-repeat, space, round.
background-attachment:
- Sets whether a background image is fixed or scrolls with the rest of the page.
  - Values: scroll, fixed, local.
background-position:
- Sets the starting position of a background image.
  - Values: can be defined in length units (px, em, etc.), percentages, or keywords (top, right, bottom, left, center).
background-size:
- Specifies the size of the background image.
  - Values: auto, cover, contain, length units, percentages.
background-clip:
- Specifies the painting area of the background.
  - Values: border-box, padding-box, content-box, text.
background-origin:
- Specifies the positioning area of the background images.
  - Values: border-box, padding-box, content-box.
background-blend-mode:
- Specifies the blending mode for each background layer.
  - Values: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

Border Properties

border:
- Shorthand property for setting the border-width, border-style, and border-color.
border-width:
- Sets the width of the border.
  - Values: thin, medium, thick, length units.
border-style:
- Sets the style of the border.
  - Values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
border-color:
- Sets the color of the border.
border-top:
- Shorthand property for setting the width, style, and color of the top border.
border-right:
- Shorthand property for setting the width, style, and color of the right border.
border-bottom:
- Shorthand property for setting the width, style, and color of the bottom border.
border-left:
- Shorthand property for setting the width, style, and color of the left border.
border-radius:
- Sets the radius of the element's corners.
border-top-left-radius:
- Sets the border-radius for the top-left corner.
border-top-right-radius:
- Sets the border-radius for the top-right corner.
border-bottom-left-radius:
- Sets the border-radius for the bottom-left corner.
border-bottom-right-radius:
- Sets the border-radius for the bottom-right corner.
border-image:
- Shorthand property for setting all the border-image-* properties.
border-image-source:
- Specifies the path to the image to be used as a border.
border-image-slice:
- Specifies how to slice the border image.
border-image-width:
- Specifies the width of the border image.
border-image-outset:
- Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat:
- Specifies whether the border image should be repeated, rounded, or stretched.
border-collapse:
- Specifies whether table borders should collapse into a single border or be separated.
border-spacing:
- Specifies the distance between the borders of adjacent cells.

HTML Tags Related to Backgrounds and Borders

<style>: Used to define CSS within the HTML document.
<div>: Commonly styled with backgrounds and borders.
<span>: Commonly styled with backgrounds and borders.
<table>, <th>, <tr>, <td>: Table elements can have borders.
<img>: Images can have borders and backgrounds.
<header>, <nav>, <section>, <article>, <aside>, <footer>: Semantic HTML5 elements often styled with backgrounds and borders.
<form>, <input>, <textarea>, <button>, <select>: Form elements can have borders and backgrounds.

By mastering these properties, you can create rich, visually appealing web pages with sophisticated background and border designs.

CSS Colors

https://www.w3schools.com/css/css_colors.asp

Saturday, May 18, 2024

CSS tags and their uses

General CSS syntax

selector {property:value}

Selector{property:value; Another_property:value;............Another_property:value;}

Example

h1{text-align:center; font-color: blue}

_______________________________________________________________________________________________

.red {

color:red;

}

This tag is used to create a class named red which is indented below <style type="text/css"> inside <title> part of the <head> section of the code.

_______________________________________________________________________________________________

#green {

color:green;

}

This tag is used to to cread an id namd green which is indented below <style type="text/css">

inside <title> part of the <head> section of the code.

_______________________________________________________________________________________________

<div id="first section">

</div>

This tag is used to group a part of body section to apply a common css style to it from the corresponding id name.

_______________________________________________________________________________________________

<span style="color:blue">blue</span> eyes.

</p>

A <span> element which is used to color a part of a text.

_____________________________________________________________________

Block level & Inline elements

Block Level elements - Elements that are initiated/created on a new line

<p>

<hr>

<div>

In Line elements - Elements that can be initiated in the same line multiple times

<img>

<a>

<br>

<span>