HTML-STYLES-CSS-PART-2

TITLE: HTML Styles - CSS PART-2
TAGS: Examples
TIME: 9:56 AM Thursday, January 06, 2022
CONTENT: CSS Padding
-----------------------------
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
    padding-top
    padding-right
    padding-bottom
    padding-left
All the padding properties can have the following values:
    length - specifies a padding in px, pt, cm, etc.
    % - specifies a padding in % of the width of the containing element
    inherit - specifies that the padding should be inherited from the parent element
Example
Set different padding for all four sides of a <div> element:
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
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
So, here is how it works:
If the padding property has four values:
    padding: 25px 50px 75px 100px;
        top padding is 25px
        right padding is 50px
        bottom padding is 75px
        left padding is 100px
Example
Use the padding shorthand property with four values:
div {
  padding: 25px 50px 75px 100px;
}
If the padding property has three values:
    padding: 25px 50px 75px;
        top padding is 25px
        right and left paddings are 50px
        bottom padding is 75px
Example
Use the padding shorthand property with three values:
div {
  padding: 25px 50px 75px;
}
If the padding property has two values:
    padding: 25px 50px;
        top and bottom paddings are 25px
        right and left paddings are 50px
Example
Use the padding shorthand property with two values:
div {
  padding: 25px 50px;
}
If the padding property has one value:
    padding: 25px;
        all four paddings are 25px
Example
Use the padding shorthand property with one value:
div {
  padding: 25px;
}
Padding and Element Width
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Example
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
  width: 300px;
  padding: 25px;
}
To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
Example
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}
All CSS Padding Properties
Property    Description
padding     A shorthand property for setting all the padding properties in one declaration
padding-bottom  Sets the bottom padding of an element
padding-left    Sets the left padding of an element
padding-right   Sets the right padding of an element
padding-top     Sets the top padding of an element
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Height and Width
------------------------------------------------
CSS height and width Values
The height and width properties may have the following values:
    auto - This is default. The browser calculates the height and width
    length - Defines the height/width in px, cm etc.
    % - Defines the height/width in percent of the containing block
    initial - Sets the height/width to its default value
    inherit - The height/width will be inherited from its parent value
Example
Set the height and width of a <div> element:
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
Example
Set the height and width of another <div> element:
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
All CSS Dimension Properties
Property    Description
height  Sets the height of an element
max-height  Sets the maximum height of an element
max-width   Sets the maximum width of an element
min-height  Sets the minimum height of an element
min-width   Sets the minimum width of an element
width   Sets the width of an element
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Box Model
------------------------------
Example
Demonstration of the box model:
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
Example
This <div> element will have a total width of 350px:
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Outline
-------------------------------
CSS has the following outline properties:
    outline-style
    outline-color
    outline-width
    outline-offset
    outline
CSS Outline Style
--------------------------------
The outline-style property specifies the style of the outline, and can have one of the following values:
    dotted - Defines a dotted outline
    dashed - Defines a dashed outline
    solid - Defines a solid outline
    double - Defines a double outline
    groove - Defines a 3D grooved outline
    ridge - Defines a 3D ridged outline
    inset - Defines a 3D inset outline
    outset - Defines a 3D outset outline
    none - Defines no outline
    hidden - Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Outline Width
-------------------------------
The outline-width property specifies the width of the outline, and can have one of the following values:
    thin (typically 1px)
    medium (typically 3px)
    thick (typically 5px)
    A specific size (in px, pt, cm, em, etc)
The following example shows some outlines with different widths:
Example
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Outline Color
-------------------------------------
The outline-color property is used to set the color of the outline.
The color can be set by:
    name - specify a color name, like "red"
    HEX - specify a hex value, like "#ff0000"
    RGB - specify a RGB value, like "rgb(255,0,0)"
    HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
    invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:
Example
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
Example
p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}
RGB Values
Or by using RGB values:
Example
p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}
HSL Values
You can also use HSL values:
Example
p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Outline Shorthand
-------------------------------------------
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual outline properties:
    outline-width
    outline-style (required)
    outline-color
The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
The following example shows some outlines specified with the shorthand outline property:
Example
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Outline Offset
--------------------------------------
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
The following example specifies an outline 15px outside the border edge:
Example
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
Example
p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
All CSS Outline Properties
Property    Description
outline     A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color   Sets the color of an outline
outline-offset  Specifies the space between an outline and the edge or border of an element
outline-style   Sets the style of an outline
outline-width   Sets the width of an outline
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
;-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
TITLE: HTML Styles - CSS PART-2
TAGS: Examples
TIME: 10:17 AM Thursday, January 06, 2022
CONTENT: CSS Text
-----------------------
Text Color
The color property is used to set the color of the text. The color is specified by:
    a color name - like "red"
    a HEX value - like "#ff0000"
    an RGB value - like "rgb(255,0,0)"
Look at CSS Color Values for a complete list of possible color values.
The default text color for a page is defined in the body selector.
Example
body {
  color: blue;
}

h1 {
  color: green;
}
Text Color and Background Color
In this example, we define both the background-color property and the color property:
Example
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Text Alignment
------------------------------------
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):
Example
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
Example
div {
  text-align: justify;
}
Text Align Last
The text-align-last property specifies how to align the last line of a text.
Example
Align the last line of text in three <p> elements:
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}
Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an element:
Example
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
Example
Set the vertical alignment of an image in a text:
img.a {
  vertical-align: baseline;
}
img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Text Decoration
-----------------------------------------
Example
a {
  text-decoration: none;
}
The other text-decoration values are used to decorate text:
Example
h2 {
  text-decoration: overline;
}

h3 {
  text-decoration: line-through;
}

h4 {
  text-decoration: underline;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Text Transformation
------------------------------------------------
Example
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Text Spacing Text Indentation
----------------------------------------------------------------
Example 1 Text Indentation
p {
  text-indent: 50px;
}
Example 2 Letter Spacing
h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}
Example 3 Line Height
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
Example 4 Word Spacing
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
Example 5 White Space
p {
  white-space: nowrap;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Text Shadow
---------------------------------------
Example
h1 {
  text-shadow: 2px 2px;
}
Example
h1 {
  text-shadow: 2px 2px red;
}
Example
h1 {
  text-shadow: 2px 2px 5px red;
}
Example 1
Text-shadow on a white text:
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
Example 2
Text-shadow with red neon glow:
h1 {
  text-shadow: 0 0 3px #ff0000;
}
Example 3
Text-shadow with red and blue neon glow:
h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
Example 4
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
All CSS Text Properties
Property    Description
color   Sets the color of text
direction   Specifies the text direction/writing direction
letter-spacing  Increases or decreases the space between characters in a text
line-height     Sets the line height
text-align  Specifies the horizontal alignment of text
text-align-last     Specifies how to align the last line of a text
text-decoration     Specifies the decoration added to text
text-indent     Specifies the indentation of the first line in a text-block
text-justify    Specifies how justified text should be aligned and spaced
text-overflow   Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow     Specifies the shadow effect added to text
text-transform  Controls the capitalization of text
unicode-bidi    Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align  Sets the vertical alignment of an element
white-space     Specifies how white-space inside an element is handled
word-spacing    Increases or decreases the space between words in a text
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Fonts
----------------------
Generic Font Families
In CSS there are five generic font families:
    Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
    Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
    Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
    Cursive fonts imitate human handwriting.
    Fantasy fonts are decorative/playful fonts.
Example
Specify some different fonts for three paragraphs:
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Web Safe Fonts
------------------------------------------
Example
Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.
p {
font-family: Tahoma, Verdana, sans-serif;
}
Best Web Safe Fonts for HTML and CSS
The following list are the best web safe fonts for HTML and CSS:
    Arial (sans-serif)
    Verdana (sans-serif)
    Helvetica (sans-serif)
    Tahoma (sans-serif)
    Trebuchet MS (sans-serif)
    Times New Roman (serif)
    Georgia (serif)
    Garamond (serif)
    Courier New (monospace)
    Brush Script MT (cursive)
CSS Font Fallbacks
---------------------------------------
Below are some commonly used font fallbacks, organized by the 5 generic font families:
    Serif
    Sans-serif
    Monospace
    Cursive
    Fantasy
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Font Style
------------------------------
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
    normal - The text is shown normally
    italic - The text is shown in italics
    oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
Font Weight
The font-weight property specifies the weight of a font:
Example
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Font Size
----------------------------
Example
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
Example
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
Example
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
Example
<h1 style="font-size:10vw">Hello World</h1>
CSS Google Fonts
---------------------------------------
Example 1
Here, we want to use a font named "Sofia" from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
Example 2
Here, we want to use a font named "Trirong" from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
Example 3
Here, we want to use a font named "Audiowide" from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
Example 4
Request multiple fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Example
Style the "Sofia" font:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Great Font Pairings
---------------------------------------------
Example
No doubt "Georgia" is the boss here:
body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
CSS Font Property
------------------------------------
The font property is a shorthand property for:
    font-style
    font-variant
    font-weight
    font-size/line-height
    font-family
Example
Use font to set several font properties in one declaration:
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}
All CSS Font Properties
Property    Description
font    Sets all the font properties in one declaration
font-family     Specifies the font family for text
font-size   Specifies the font size of text
font-style  Specifies the font style for text
font-variant    Specifies whether or not a text should be displayed in a small-caps font
font-weight     Specifies the weight of a font
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-
;-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-