📌CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

📎With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Example:
-----------------------------------
p  {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 25px;
}
-----------------------------------

@html_css_tut
"w3schools .com"

📌CSS Margins

📎The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Example:
-----------------------------------
p  {
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
-----------------------------------

@html_css_tut
"w3schools .com"

📌 Margin - Shorthand Property

📎To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

💎margin-top
💎margin-right
💎margin-bottom
💎margin-left


@html_css_tut
"w3schools .com"

📌Padding - Shorthand Property

📎To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

💎padding-top
💎padding-right
💎padding-bottom
💎padding-left


@html_css_tut
"w3schools .com"

📌CSS Border - Shorthand Property


To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

💎border-width
💎border-style
💎border-color


@html_css_tut
"w3schools .com"

CSS box-shadow

📌The box-shadow 
CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.


@html_css_tut
"developer. mozilla. org"

📌box shadow example #1

@html_css_tut

📌box shadow
example #2

@html_css_tut

CSS Text Shadow

📌The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.


@html_css_tut
"developer. mozilla. org"

📌Text shadow example #1

@html_css_tut

📌Text shadow example #2

@html_css_tut

📌 Full screen Video Background. Tutorial

https://youtu.be/sjd11WWS3wQ

CSS Border Image

📌The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.


@html_css_tut
"w3schools .com"

CSS Border Image

📌The CSS border-image property has three parts:

#1. The image to use as the border.

#2. Where to slice the image.

#3. Define whether the middle sections should be repeated or stretched.

@html_css_tut
"w3schools .com"

CSS Styling Tables

📌To specify table borders in CSS, use the border property.

📌The example above specifies a black border for <table>, <th>, and <td> elements:


@html_css_tut
"w3schools .com"

Double Borders

📌Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders.

📌To remove double borders, take a look at the example above.

@html_css_tut
"w3schools .com"

🕹 JavaScript is the 
Programming Language 
for the Web.

🕹 JavaScript can update
and change both 
HTML and CSS.

🕹 JavaScript can calculate, 
manipulate and 
validate data.

@javascript_tut
https://t.me/javascript_tut

Secure Login system using PHP with MYSQL database

https://youtu.be/TytaDtwnj0o

Generic Font Families

📌 In CSS there are five generic font families:

#1 Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.

#2 Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.

#3 Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.

#4 Cursive fonts imitate human handwriting.

#5 Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.


@html_css_tut
"w3schools .com"

The CSS font-family Property

📌 In CSS, we use the font-family property to specify the font of a text.

📌 The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.

💎 Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".


@html_css_tut
"w3schools .com"