Sunday, July 19, 2020

CSS Text | CSS Fonts

CSS Text

CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively. The commonly used text properties are:

color
text-align
text-decoration
text-transform
text-indent
line-height
letter-spacing
word-spacing

These properties give you precise control over the visual appearance of the characters, words, spaces, and so on.

Color

The color of the text is defined by the CSS color property. The style rule in the following example will define the default text color for the page

body {

  color: #434343;
}

Although, the color property seems like it would be a part of the CSS text, but it is actually a standalone property in CSS. See the tutorial on CSS color to learn more about the color property.

Text Alignment

The text-align property is used to set the horizontal alignment of the text. Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins). Let's take a look at an example to understand how this property basically works.

h1 {

  text-align: center;
}

p {
  text-align: justify;
}

Note: When text-align is set to justify, each line is stretched so that every line has equal width (except the last line), and the left and right margins are straight. This alignment is generally used in publications such as magazines and newspapers.

Let's take a look at the following illustration to understand what these values actually mean.

Text Decoration

The text-decoration property is used to set or remove decorations from text. This property typically accepts one of the following values: underline, overline, line-through, and none. You should avoid underline text that is not a link, as it might confuse the visitor. Let's try out the following example to understand how it basically works:

h1 {

  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

Removing the Default Underline from Links

The text-decoration property is extensively used to remove the default underline from the HTML hyperlinks. You can further provide some other visual cues to make it stand out from the normal text, for example, using dotted border instead of solid underline. Let's take a look at the following example to understand how it basically works:

a {

  text-decoration: none;
  border-bottom: 1px dotted;
}

Note: When you create an HTML link, browsers built in style sheet automatically underline it and applies a blue color, so that the readers can clearly see which text is clickable.

Text Transformation

The text-transform property is used to set the cases for a text. Text are often written in mixed case. However, in certain situations you may want to display your text in entirely different case. Using this property you can change an element's text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text.

Let's try out the following example to understand how it basically works:

h1 {

  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}
h3 {
  text-transform: lowercase;
}

Text Indentation

The text-indent property is used to set the indentation of the first line of text within a block of text. It is typically done by inserting the empty space before the first line of text. The size of the indentation can be specified using percentage (%), length values in pixels, ems, etc. The following style rule will indent the first line of the paragraphs by 100 pixels.

p {

  text-indent: 100px;
}

Note: Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS direction property.

Letter Spacing

The letter-spacing property is used to set extra spacing between the characters of text. This property can take a length value in pixels, ems, etc. It may also accept negative values. When setting letter spacing, a length value indicates spacing in addition to the default inter-character space. Let's check out the following example to understand how it really works:

h1 {

  letter-spacing: -3px;
}

p {
  letter-spacing: 10px;
}

Word Spacing

The word-spacing property is used to specify additional spacing between the words. This property can accept a length value in pixels, ems, etc. Negative values are also allowed. Let's try out the following example to understand how this property works:

p.normal {

  word-spacing: 20px;
}

p.justified {
  word-spacing: 20px;
  text-align: justify;
}

p.preformatted {
  word-spacing: 20px;
  white-space: pre;
}

Note: Word spacing can be affected by text justification. Also, even though whitespace is preserved, spaces between words are affected by the word-spacing property.

Line Height

The line-height property is used to set the height of the text line. It is also called leading and commonly used to set the distance between lines of text. The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.

p {

  line-height: 1.2;
}

Note: Negative values for the line-height property are not allowed. This property is also a component of the CSS font shorthand property.

If the value of the line-height property is greater than the value of the font-size for an element, this difference (called the "leading") is cut in half (called the "half-leading") and distributed evenly on the top and bottom of the in-line box. Let's check out an example:

p {

  font-size: 14px;
  line-height: 20px;
  background-color: #f0e68c;
}

See the Pen CSS Text Properties by PANKAJ (@pankkap) on CodePen.

CSS Fonts

Choosing the right font and style is very crucial for the readability of text on a page. CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on. The font properties are:

font-family
font-style
font-weight
font-size
font-variant

Font Family

The font-family property is used to specify the font to be used to render the text.

This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user's system, browser tries to use the second one, and so on. A typical font family declaration might look like this:

body {

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

Font Style

The font-style property is used to set the font face style for the text content of an element. The font style can be normal, italic or oblique. The default value is normal.

p.normal {

  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
} 

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

p {

  font-variant: small-caps;
}

The value normal removes small caps from the text which is already formatted that way.

Font Size

The font-size property is used to set the size of font for the text content of an element. There are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems, etc.

The font-size value can be an absolute, or relative size.

Absolute size:

Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known

Relative size:

Sets the size relative to surrounding elements
Allows a user to change the text size in browsers

Setting Font Size with Pixels: Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length.

h1 {

  font-size: 24px;
}
p {
  font-size: 14px;
}

Defining the font sizes in pixel is not considered very accessible, because the user cannot change the font size from the browser settings. Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Setting Font Size with EM: To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

h1 {

  font-size: 2em; /* 32px/16px=2em */
}
p {
  font-size: 0.875em; /* 14px/16px=0.875em */
}

Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Using the Combination of Percentage and EM: As you've observed in the above example the calculation of em values doesn't look straightforward. Solution to this is one that works in all browsers, is to set a default font-size in percent for the <body> element:

The technique is to set the font-size for the body element to 62.5% (that is 62.5% of the default 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, and so on.

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.4em; /* 1.4em = 14px */
}
p span {
  font-size: 2em; /* 2em = 28px */
}

Setting Font Size with Root EM: To make things even more simpler CSS3 has introduced rem unit (short for "root em") which is always relative to the font-size of the root element (html), regardless of where the element lies in the document (unlike em which is relative to parent element's font size).

This means that 1rem is equivalent to the font size of the html element, which is 16px by default in most browsers.

html {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
  font-size: 2rem; /* 2rem = 20px (not 28px) */
}

Setting Font Size with Keywords: CSS provide several keywords that you can use to define font sizes. An absolute font size can be specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Whereas, a relative font size can be specified using the keywords: smaller or larger.

body {
  font-size: large;
}
h1 {
  font-size: larger;
}
p {
  font-size: smaller;
}

Note: The keyword medium is equivalent to the browsers default font-size, which is normally 16px. Likewise, xx-small is the equivalent of 9 pixels, x-small is 10 pixels, small is 13 pixels, large is 18 pixels, x-large is 24 pixels, and xx-large is 32 pixels.

Responsive Font Size with Viewport Units: The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window. Viewport units refer to a percentage of the browser's viewport dimensions, where 1vw = 1% of viewport width. Hence, if the viewport is 1600px wide, 1vw is 16px.

body {

  font-size: 1vw;
}
h1 {
  font-size: 3vw;
}

Font Weight

The font-weight property specifies the weight or boldness of the font. This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.

The numeric values 100-900 specify the font weights, where each number represents a weight greater than its predecessor. 400 is same as normal & 700 is same as bold.

The bolder and lighter values are relative to the inherited font weight, while the other values such as normal and bold are absolute font weights.

p {

  font-weight: bold;
}

Shorthand Property

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

The font property is a shorthand property for:

font-style
font-variant
font-weight
font-size/line-height
font-family

Example

Set some font properties with the shorthand declaration:

p.a {
  font: 20px Arial, sans-serif;
}
p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Google Fonts

If you do not want to use any of the standard fonts in HTML, you can use the Google Fonts API to add hundreds of other fonts to your page.

Steps to use Google Fonts:

Goto the site https://fonts.google.com/
Choice the font you want to use in your web page
Just add a stylesheet link and refer to a font family of your choice.

See the Pen Google Fonts by PANKAJ (@pankkap) on CodePen.

Saturday, July 18, 2020

CSS Width and Height | CSS Max - Min

CSS Width and Height

The width and height property defines the width and height of the content area of an element.

This width and height does not include paddings, borders, or margins. See the CSS box model to know how the effective width and height of an element's box is calculated.

Let's try out the following example and see how it actually works:

See the Pen CSS Width -Height by PANKAJ (@pankkap) on CodePen.

The above style rules assign a fixed width of 200 pixels and height of 100px to the <div> element.

The width and height properties can take the following values:

length - specifies a width in px, em, rem, pt, cm, etc.
% - specifies a width in percentage (%) of the width of the containing element.
auto - the browser calculates a suitable width for the element.
initial - Sets the width and height to its default value, which is auto.
inherit - specifies that the width should be inherited from the parent element.

You can not specify negative values to the width and height properties.

Tip: Typically when you create a block element, such as <div>, <p>, etc. browser automatically set their width to 100% of the available width, and height to whatever is needed to show all the content. You should avoid setting a fixed width and height unless it is necessary.

CSS Maximum Width and Height

You can use the max-width and max-height property to specify the maximum width and height of the content area. This maximum width and height does not include paddings, borders, or margins.

See the Pen CSS Max-width height by PANKAJ (@pankkap) on CodePen.

An element cannot be wider than the max-width value, even if the width property value is set to something larger. For instance, if the width is set to 200px and the max-width is set to 150px, the actual width of the element will be 150px. Note: If the min-width property is specified with a value greater than that of max-width property, in this case the min-width value will in fact be the one that's applied.

Likewise, an element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the height is set to 100px and the max-height set to 75px, the actual height of the element will be 75px. Note: If the min-height property is specified with a value greater than that of max-height property, in this case the min-height value will in fact be the one that's applied.

CSS Minimum Width and Height

You can use the min-width and min-height property specify the minimum width and height of the content area. This minimum width and height does not include paddings, borders, or margins.

See the Pen CSS Min -Width Height by PANKAJ (@pankkap) on CodePen.

An element cannot be narrower than the min-width value, even if the width property value is set to something lesser. For example, if the width is set to 300px and the min-width is set to 400px, the actual width of the element will be 400px. Note: The min-width property is usually used to ensure that an element has at least a minimum width even if no content is present. However the element will be allowed to grow normally if its content exceeds the minimum width set.

Similarly, an element to which min-height is applied will never be smaller than the value specified, even if the height property is set to something lesser. For example, if the height is set to 200px, and the min-height is set to 300px, the actual height of the element will be 300px.

Note: The min-height property is usually used to ensure that an element has at least a minimum height even if no content is present. However the element will be allowed to grow normally if the content exceeds the minimum height set.

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

CSS Overflow

The CSS overflow property specifies how to handle the content when it overflows its block level container. We know that every single element on a page is a rectangular box and the size, positioning and behavior of these boxes are controlled via CSS.

If you don't set the height of the box, it will grow as large as the content. But if you set a specific height or width of the box and the content inside cannot fit then what will happen. The CSS overflow property is used to overcome this problem. It specifies whether to clip content, render scroll bars, or just display content.

CSS Overflow property values

Visible: It specifies that overflow is not clipped. it renders outside the element's box. this is a default value.
Hidden: It specifies that the overflow is clipped, and rest of the content will be invisible.
Scroll: It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
Auto: It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
Inherit: It inherits the property from its parent element.
Initial: It is used to set the property to its initial value.

See the Pen CSS Overflow by PANKAJ (@pankkap) on CodePen.

Friday, July 17, 2020

Live your Website with GIT | GitHub

Nowadays software development takes place in a distributive way. This focuses on one such technology that supports distributed software development i.e GIT. According to the latest Stack Overflow developer survey, more than 70 percent of developers use Git, making it the most-used VCS in the world. Git is commonly used for both open source and commercial software development, with significant benefits for individuals, teams and businesses.

Popular companies that use Git and GitHub for source code hosting:

Netflix
Amazon
Airbnb
Google
IBM

What is GIT?

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git relies on the basis of distributed development of a software where more than one developer may have access to the source code of a specific application and can modify changes to it which may be seen by other developers.
Initially designed and developed by Linus Torvalds for Linux kernel development in 2005.
Every git working directory is a full-fledged repository with complete history and full version tracking capabilities, independent of network access or a central server.
Git allows a team of people to work together, all using the same files. And it helps the team cope up with the confusion that tends to happen when multiple people are editing the same files.

What is GitHub?

GitHub, developed in 2008, is a web application that hosts Git repositories. The team that started GitHub saw that Git could solve important problems for many teams – but Git itself is often difficult to use. GitHub adds a bunch of collaboration and exploration tools on top of Git to help you (and your team) be more productive.

For instance, GitHub makes it easy to share code between multiple computers and developers. It's become the centralized organization tool of the open-source community and, in turn, is used by thousands of companies and teams. Some GitHub users have one repo they work with every day, some have hundreds.

Some of the most important tools GitHub layers on top of Git include:

Pull Requests which are a way for developers to propose changes and solicit feedback/discussion from other developers (called Code Review).
Issues which developers use to track bugs, enhancements, or other requests that are associated with a given repository.

Git | GitHub in Visual Studio Code and Live your First Website

In this, you will learn how to clone an existing Git repository from GitHub. We will use the Visual Studio Code, but the same processes apply for using any Git-compatible client with GitHub.

Step-1: Download the Software and install it.

Download Visual Studio Code

Download Git-SCM

Step-2: Create a Github account

Goto www.github.com and sign into your account. If you’re a new user, you can simply sign-up. You’ll have a username from here. Let us say that it’s your_username

Step-3: CONFIGURING GIT

Go to the Git Bash terminal and type this to configure git

git config --global user.name “your_username”

Now type command to link your email too.

git config --global user.email “your_emailid”

Step-4: Create a Github Repository

Go to your github account and create a repository with a name( lets say name of your project). We are creating a repository with the name Fullstack-1_2020

Step-5: Clone a Repository

Copy the repo URL to your clipboard, in this example, https://github.com/pankkap/Fullstack-1_2020.git

Step-6: Open a new VS Code window.

Press Ctrl+Shift+P to show the Command Palette. The Command Palette provides an easy and convenient way to access a wide variety of tasks, including those provided by 3rd party extensions.

Execute the Git: Clone command. It may help to type “Git” to bring it to the shortlist.