Sal
This blog post is a part of the "Web Development - Frontend" series.Welcome to the introductory post, let's dive right into the basics of HTML & CSS !

Heading Tags in HTML

Heading tags are an important part of every HTML document. Search engine spiders read HTML and understand the relevance of heading tags, so when heading tags are used appropriately search engines give more weight to text that is inside a heading tag.

HTML heading tags from <h1> to <h6> are intended to convey a logical hierarchy to define HTML headings.


<h1> defines the most important heading. On most web pages the <h1> tag is only used once as the main heading of the web page. It is the hero heading conveying the title of the webpage.

The <h2> heading tag is the second most important heading on a web page. In a blog it’s your post titles and page titles in most themes.

The other HTML heading tags are meant to be used in descending hierarchical order in accord with their importance within posts and pages with <h6> defining the least important heading.

The <p> and <br> tags
The <p> tag defines a paragraph. HTML paragraphs can be any structural grouping of related content, such as images or form fields. Browsers automatically add a single blank line before and after each <p> element.
The HTML <br> element produces a line break in text. It is useful where the division of lines is significant .

output1

As you can see , a <br> element is included at each point where we want the text to break. The text after the <br> begins again at the start of the next line of the text block. Do not use <br> to create margins between paragraphs. Use the <p> tag instead.


The <img> Tag

The <img> tag is used to embed an image in an html page. However technically images are not inserted into the web page rather they are linked and the <img> tag creates space for them.

Syntax:

<img src=”file.jpeg” alt=”The image” height=”500px” width=”500px”>

Here,

src - defines location of the image, it can be a local address or url.

alt - defines an alternate text for the image, if the image for some reason cannot be displayed.

height and width - define the height and width of the image.


CSS properties for < img > tag:

1) vertically align- vertically align has three values top, middle and bottom, there effects are as follows

output2

2) border- all border styles are also applicable for an image.

3) display- by default an image is displayed as inline-block but this can be manually changed.

4) margin and padding- margin and padding can also be applied to an image.


The <button> Tag

The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i>, <strong>, <br>, <img>, etc.).


Attributes:
Attribute Value Description
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formtarget _blank
_self
_parent
_top
framename
Specifies where to display the response after submitting the form. Only for type="submit"
name name Specifies a name for the button
type button
reset
submit
Specifies the type of button
value text Specifies an initial value for the button


Hover:

The :hover selector is used to select elements when you mouse over them.

Syntax:

:hover {
	css declarations;
}



Animation and transition:

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Ex.

What are CSS Animations?

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.

Ex.

The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds)

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By using percent, you can add as many style changes as you like. The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Ex.

Delay an Animation
The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:

Ex.

Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.

Ex.

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
}



The <div> tag

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document.

Classes:
The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in the CSS stylesheet using “.” symbol.
ID:
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking, scripting, or styling (with CSS). The id name in the CSS stylesheet using “#” symbol. The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.

output3

Display Property:

The display property specifies the display behaviour of an element i.e. how an element is rendered with respect to other elements.

Syntax of display property is

display: value;

There are three main display property values in CSS:

  • Block:
Block displays an element as a block which starts on a new line and takes up the whole width by default. However, height and width can be defined for a block.
  • Inline:
Inline displays an element like <span> i.e. inline with other elements. The height and width properties have no effect when an element is displayed as inline.
  • Inline-block:
Inline-block displays an element as an inline-level block container i.e. the element is displayed as an inline element but height and width properties have an effect.


Margin, Padding and Border
(CSS Box model) :

Content - Content is the area where your text and images appear.

Padding - Padding is an empty transparent space between the border and content.

Border - Border is located between the margin and padding and it can be styled according to the user using css.

Margin - Margin clears an empty transparent space outside the border.

Box model

Syntax:-

Padding-
Padding can be defined in three ways. You can either define padding of each direction individually like:-
div {
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 50px;
	padding-left: 80px;
}

Or you can define padding using shorthand syntax:-
div {
	padding: 25px 50px 75px 100px;
}
where 25px is top, 50px is right, 75px is bottom and 100px is left i.e TRBL, Or you can define symmetric padding like:-
div {
	padding: 25px 50px; // 25px for top and bottom , 50px for left and right
}

div {
	padding: 25px; // 25px for all sides
}
Margin
Margin can also be defined in three ways just like padding however it also has an adding value named auto. Auto horizontally centers an element within its container.
div {
	margin: auto;
}
Border

Border properties can be used to define the style, width and colour of a border surrounding an element.

1) border-style - border style is used to define whether a border is a solid line, dotted , double lines etc. 

e.g.

border-style: solid;

Solid Border

border-style:double;

double border
2) border-width - border width is used to define the thickness of border.

e.g.

border-width:5px;

5px border

border-width:2px;

2px border
3) border-color - border colour defines the colour of the border.

e.g

border-color:red;

Specific sides can also be coloured like

border-color: red green blue yellow; /* T-red, R-green, B-blue L-yellow */

rainbow border
4) border using shorthand syntax - border can be defined in i=one line using shorthand syntax e.g.

border: 5px solid red; /* where 5px is width, solid is style and red is  color */

shorthand border
5) border-radius - border-radius is used to create curved corners.

e.g.

border: 2px solid red;

border-radius: 8px;

Border radius


The @media property:

The @media property is used to make a website responsive. Max-width is a property used to define certain parameters that change when the max-width of a screen changes.In order to use @media property a meta needs to be defined as 

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

Here is an example of a background whose colour changes depending on the width of the browser window.

body {
	background-color: yellow;
}

@media (max-width: 600px) {
	body {
		background-color: lightblue;
	}
}

media yellow


media blue

The properties of any div or class can be changed by defining it in the @media query along with the properties you need to change.

Some other properties that can be defined in the parameters of @media are min-width,max-height,min-height,orientation,max-resolution etc.


Flexbox

  • CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns.
  • Items will "flex" to different sizes to fill the space. It makes responsive design easier.

output4

Here is a list of all the CSS flexbox properties that can be used to position elements in CSS.

CSS that can be applied to the container:
  • display: flexbox | inline-flex;

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

  • flex-direction: row | row-reverse | column | column-reverse;

output5

The four possible values of flex direction:

row (default): left to right

row-reverse: right to left

column: same as row but top to bottom

column-reverse: same as row-reverse but bottom to top

  • flex-wrap: nowrap | wrap | wrap-reverse;

output6

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

output7

Flex items within a flex container demonstrating various spacing options

flex-start (default): items are packed toward the start of the flex-direction.

flex-end: items are packed toward the end of the flex-direction.

center: items are centered along the line

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

space-around: items are evenly distributed in the line with equal space around them.

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

  • align-items: flex-start | flex-end | center | baseline | stretch;
output8

Flex-start :items are placed at the start of the cross axis.

Flex-end : items are placed at the end of the cross axis.

center: items are centered in the cross-axis

baseline: items are aligned such as their baselines align

stretch (default): stretch to fill the container (still respect min-width/max-width)

  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
output9

flex-start / start: items packed to the start of the container.

flex-end / end: items packed to the end of the container.

center: items centered in the container

space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

space-around: items evenly distributed with equal space around each line

stretch (default): lines stretch to take up the remaining space

CSS that can be applied to items/elements in the container:

order: <integer>; /* default is 0 */

output10

the order property controls the order in which they appear in the flex container.

flex-grow: <number>; /* default is 0 */

output11

This defines the ability for a flex item to grow if necessary. It dictates what amount of the available space inside the flex container the item should take up.

flex-shrink: <number>; /* default 1 */

This defines the ability for a flex item to shrink if necessary.

flex-basis: <length> | auto; /* default auto */

This defines the default size of an element before the remaining space is distributed.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

output12

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.