sanadiqbal

Posted on Mar 2, 2023

HTML-CSS

HTML

HTML stands for Hypertext Markup Language. It's the standard markup language for Web pages.By using HTML we can create websites.We should remember that html is not a programming language but a markup language.

CSS

CSS stands for Cascading Style Sheet.It's a Style Sheet language that is used for describing the presentation of a document written in a markup language like html.
So CSS is basically just a language we use to style our HTML documents.CSS describes how HTML elements should be displayed.

Some of the key concepts of html and CSS are:

Box Model
Inline versus Block Elements.
Positioning
CSS structural classes
CSS styling classes
CSS Specificity
CSS Responsive Queries
Flexbox
Grid
Common header meta tags

Let's look at these topics one by one.

BOX MODEL

The CSS box model is a container that contains various properties like borders, margins ,padding and also the the contents. We use CSS box models to design the layout of web pages. The browser will render every elements as boxes according to the CSS box model.

Various box properties are:

Content Area: Content area contains all the contents like text, images, or other media content. It is bounded by content edge. The dimensions of content area are given by content-box width and height.
Padding Area: Padding area has the padding of the element. This area is actually the space around the content area and inside the border-box. The dimensions of padding area are given by the width of the padding-box and it's height.
Border Area: Border area is the area between the box’s padding and margin. The dimensions of border area are given by the width and height of the border.
Margin Area: Margin area is the space between border and margin. It's dimensions are the margin-box width and the margin-box height. It functions to separate the element from their neighbouring elements. Let's look at box model with an example. Suppose we have
wrapped inside

<div>
    <p>Some content within the box. Some other contents.</p>
  </div>

We can apply this CSS to

and set size of padding, border, and margin of the element:

  div {
    background-color: yellow;
    padding: 1px;
    border: 1px solid black;
    margin: 0;
  }
  p {
    background-color: white;
    padding: 1em;
    border-width: 10px;
    border-style:solid;
    border-color: red;
    margin: 10px ;
   }

The resulting layout will look like this :

INLINE AND BLOCK ELEMENTS

Each and every element in HTML has a default display value,which depends on the type of the element.

The two display values are:

block
inline

Block elements : A block-level element always starts on a new line, and our browser add some space automatically before and after the element.A block-level element will always take up the full width that is available.Examples of block elements are <p> and <div>.
The <p> element defines a paragraph in the HTML document.
The <div> element defines a division in the HTML document.

Inline-elements: Inline elements do not start on a new line unlike block elements. Inline elements only takes up the necessary width. Examples of inline elements are <a>, <strong>, <b> and <span>.

POSITION

The position property specifies the type of position method which we use to position our elements using CSS.

There are total 5 different position values:

static
relative
fixed
absolute
sticky

We'll discuss only absolute and relative positioning.

Relative positioning : When the position property of an element is relative;any change in position like margin will cause it to adjust from its normal position. The other objects or elements will not fill the gap.

Absolute Position : An element with position: absolute; will cause it to adjust its position with respect to its parent. If no parent is present, then it uses the document body as parent.

CSS SPECIFICITY

When more than one set of CSS rules are applied to a given element, the browser will decides which specific set will be applied to the element. The rules followed by the browser are collectively called Specificity.

CSS Specificity Rules

CSS style applied by referencing external stylesheet has the lowest precedence and it gets overridden by Internal and inline CSS.
Internal CSS gets overridden by inline CSS.
Inline CSS has the highest priority and it overrides all the other selectors.

Specificity Hierarchy

Inline style: Inline style has the highest priority.
Identifiers(ID): Identifiers have the second highest priority.
Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are comes after ID.
Elements and pseudo-elements: Elements and pseudo-elements have the lowest priority in CSS.

CSS RESPONSIVE QUERY

We use Media query in CSS is used to make a responsive web design. The view of a web page will differ from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.

Media queries checks the following:

width and height of the viewport
width and height of the device
Orientation
Resolution

A media query consists of a media type that can has one or more expression which can either be true or false. The result of the query is true if the specified media matches the type of device the document is displayed on and hence a style sheet is applied.
Syntax:

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Media Types in CSS

all: Used for all media devices
print: Used for printer.
screen: Used for computer screens, smartphones, etc.
speech: Used for screen readers that read the screen out aloud.

FLEXBOX

Flexbox is a CSS display type which helps to help us create CSS layouts very easily and very fast.It controls the position, size and spacing of elements relative to their parents elements as well as each other.
Flexbox is ideal for responsive web designing.
When we apply a display type of flexbox to a parent container, all the child elements in it are adjusted into the flex type and these child elements are now called the “flex items”. Now they have become more flexible i.e. we can control how much they will shrink and how much they will grow and we can also control the spacing between these elements.

Properties of flexbox

display : Display defines a flex container
flex-direction : It defines the main axis
flex-wrap: It allows flex items to wrap on more than one line.
flex-flow It's shorthand for flex-direction + flex-wrap.
justify-content: It allows items to align along the main axis.
align-content Allows items to align along cross axis in a single line.It aligns multiple lines of items on the cross axis. Let's look at an example.

<div class="parent">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
</div>

.child{
 width:50px;
 height:50px;
 background:red;
}

Output:

After applying flexbox on parent class.

.parent{
 display:flex;
}
.child{
 width:50px;
 height:50px;
 background:red;
}

Output:

Changing the flex-direction to column:

.parent{
 display:flex;
  flex-direction:column;
}
.child{
 width:50px;
 height:50px;
 background:red;
}

Output:

Using justify content to align the items along main axis.

.parent{
 display:flex;
  justify-content:space-between;
}
.child{
 width:50px;
 height:50px;
 background:red;
}

Output:

GRID

Grid layout module in CSS is used to create a grid-based layout system, with the help of rows and columns that makes it much easy to design a web page without using floats and positioning.

Syntax

.class {
    display:grid;
}

Grid Properties

grid-template: Shorthand property for defining grid columns, rows, and areas.
grid-template-areas: Used to specify the area within the grid layout.
grid-template-columns: Used to set the number of columns and size of the columns of the grid.
grid-template-rows: Used to set the number of rows and height of the rows in a grid.
column-gap: Used to specify the amount of gap between the columns in which a given text is divided using the column-count property.
gap: Used to set the spacing also caller gutter between the rows and columns.
grid-column: Describes the number of properties that allow to design of grid structures and control the placement of grid items using CSS.
grid-column-end: Explains the number of columns an item will span, or on which column-line the item will end.
grid-column-gap: Used to set the size of the gap between the columns in a grid layout.

Let's understand it with an example.

<div class="parent">
  <div class="child A">A</div>
  <div class="child B">B</div>
  <div class="child C">C</div>
</div>

.parent{
 display:grid;
 grid-template-rows:1fr 1fr 1fr;
 grid-template-columns:1fr 1fr 1fr;

 }
.child{
 width:50px;
 height:50px;
 background:red;
}
.A{
 grid-column:3/4;
 grid-row:1/2;
}
.B{
  grid-column:1/2;
 grid-row:3/4;
}
.C{
   grid-column:2/3;
 grid-row:2/3;
}

COMMON HEADER META TAGS

Meta Tag is an HTML component which gives the metadata about an HTML document. It is an empty tag, it just has an initial tag and no end tag. It's always present inside the

tag and are used to portray Page portrayals, Certain Keywords, Author of the Document, viewport settings, determining character sets, and so on.
They are used by Web Browsers, Search Engines, and other Web Services to rank the web pages accordingly.

<head>
   <meta attribute-name = "value"/>
</head>

Attributes

name: Used for indicating the character encoding for the HTML Document.
http-equiv: Used to get the HTTP response message header.
content: Used to specify properties value.
charset: Used for indicating the character encoding for the HTML Document.

CSS STRUCTURAL CLASSES

CSS structural classes are classes used to target and apply styles to specific structural elements of a webpage, such as headings, paragraphs, lists, tables, and forms. These classes are used to create consistent styles throughout a website and make it easier to update styles in the future.

Here's an example of how to use structural classes in CSS:

h1, h2, h3, h4, h5, h6 {
  font-size: 24px;
}

.content p {
  background-color: #eee;
}

.table {
  border: 1px solid black;
}

.input {
  border-radius: 5px;
}

In this example, we use the following structural classes:

h1, h2, h3, h4, h5, h6 to target all headings and apply a font size of 24px.
.content p to target all paragraphs within a div with class content and apply a background color of #eee.
.table to target all tables with class table and apply a border of 1px solid black.
.input to target all form inputs with class input and apply a border radius of 5px.

By using these structural classes, we can easily apply consistent styles throughout our website and make it easier to update styles in the future.

CSS STYLING CLASSES

CSS styling classes are classes used to apply specific styles to elements in a webpage. These classes are used to create custom styles that are unique to a particular element or set of elements on the page.

Let's see an example of how to use styling classes in CSS:


.primary {
  background-color: blue;
  color: white;
}
.error {
  color: red;
}
.button:hover {
  border: 1px solid green;
  padding: 5px;
}

In the above example, we use the following styling classes:

.primary to apply a blue background color and white text color to any element with the class primary.
.error to apply a red text color to any element with the class error.
.button:hover to apply a green border and padding to any element with the class button when it is hovered over by the user.

By using these styling classes, we can create custom styles that are unique to specific elements or sets of elements on the page. This allows us to have more control over the appearance of our webpage and make it more visually appealing to our users.