Forem: Oluwasegun Olatunji

Mastering CSS Sizing: A Guide to Responsive Design

Oluwasegun Olatunji — Wed, 19 Apr 2023 16:55:48 +0000

The presentation and layout of web pages are managed using the powerful styling language known as Cascading Style Sheets, or CSS.

Size is one of the most important parts of responsive and adaptive designs, among others. In this article, we will dive deep into the world of CSS sizing, exploring the different units, techniques, and best practices for responsive design.

Here's a list of what we will cover in this article:

CSS Units
CSS Sizing Properties
Responsive Design Techniques

CSS Units

To change the size of elements in CSS, you need to know how to use the different units, and the three different types of CSS units are viewport units, relative units, and absolute

Absolute

Absolute units have a set size that is independent of the parent element's and the user's device sizes. Common absolute units are as follows:

Pixel (px) on a user's screen corresponds to a single dot. Although this is the most often used absolute unit, responsive design cannot effectively use it because it does not scale for different screen sizes.
Points (pt): One point, which was formerly employed in print media, is equivalent to 1/72 of an inch. Because it does not scale well across different devices, it is not advised for web design.

Relative Units

Relative units are perfect for flexible design since they can change in size according to the size of the parent element or other characteristics. Common related units are as follows:

Em: This measurement unit is based on the parent element's font size. For instance, 1em is equivalent to 16px if the parent's font size is 16px. Scalable typography can be made with the use of em units.
Rem: By using rem, which is unaffected by parent components' font sizes, you may guarantee uniform sizing across all of your elements.
Percentages (%): This measurement is based on how big the parent element is. For instance, a child element with a width of 50% would be 100px wide if the parent element had a width of 200px.

Viewport Units

The size of the user's device viewport determines the viewport units. These components are especially helpful for producing responsive designs that change according to the size of the screen. Common viewport units are as follows:

Viewport Width (vw): One unit is equal to one per cent of the viewport's width. For instance, 1vw is equal to 10px on a device with a viewport width of 1000px.

Viewport Height (vh): One unit equals one per cent of the viewport's height (vh).

Viewport Minimum (vmin): The smaller of vw or vh is equal to one unit in the Viewport Minimum (vmin) system.

Viewport Maximum (vmax): The larger vw or vh is equal to one unit in the Viewport Maximum (vmax) system.

Choosing the Right Units

Choosing the appropriate unit for sizing is crucial for creating responsive designs. In general, it is recommended to use relative units like em, rem, and percentages for most sizing tasks. Viewport units can be used when you want the size of an element to adapt directly to the viewport dimensions.

CSS Sizing Properties

Now that we are familiar with the various units, let's look at some of the most popular CSS properties for element sizing.

Width and Height

The width and height properties define the size of an element's content area. They can be set using any of the units discussed above.

The parameters of an element's width and height determine the size of its content area. To set them, any of the previously mentioned units can be used.

div {
  width: 50%;
  height: 200px;
}

Padding, Margin, and Border

Controlling the area around an element's content is made easier with padding, margin, and border attributes. In contrast to margin, which adds space outside the element, padding adds space inside the element, and the border attribute controls the element's border width.

div { padding: 1em;
    margin: 2rem;
    border: 1px solid black; }

Box-sizing

The box-sizing property controls how to calculate an element's dimensions. The default value, content-box subtracts padding and borders from the content area to determine the width and height.

It is simpler to control element sizing using the border-box value because padding and border are taken into account when calculating width nd height.

div {
  box-sizing: border-box;
  width: 50%;
  padding: 1em;
  border: 1px solid black;
}

Background-size and Background-position

The background image of an element can be positioned and scaled using these properties. You can change the background-size attribute to values like contain, cover, or particular measurements. The background-position attribute determines where the background image is located within the element.

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

Responsive Design Techniques

To make responsive designs, the layout must be changed to fit different screen sizes and devices. Here are a few well-liked methods for doing this:

Media Queries:

Based on the user's device parameters, such as screen width or device orientation, media queries let you apply several styles and also construct breakpoints that modify the layout at particular screen sizes.


@media (max-width: 768px) {
  div {
    width: 100%;
  }
}

Flexbox

Flexbox is a CSS layout module that offers a more effective method of spacing out and aligning elements inside a container. By utilizing Flexbox, you can design responsive layouts that change to fit the available space.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  min-width: 200px;
}

Grid Layout

Another layout module that uses a two-dimensional grid structure to enable the creation of intricate and responsive designs is CSS Grid. Using CSS Grid, you may specify rows and columns and insert objects inside grid cells.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  grid-column: span 1;
}

Transitions and Transforms in CSS

Responsive animations and effects can be made using CSS transformations and transitions. While transitions manage the timing of these changes, transforms let you alter the position, scale, and rotation of an element.

div:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

Conclusion

The ability to understand CSS sizing is crucial for web designers and developers. You can only make responsive designs that look great on any device if you know about the different devices, features, and especially CSS sizing.

For the majority of sizing activities, remember to use relative units like em, rem, and percentages, use viewport units for items that must adjust to the size of the viewport and to adjust element proportions, use properties like box-sizing, padding, margin, and border. For responsive layouts, look into new layout modules like Flexbox and Grid.

Last but not least, remember to combine CSS transforms and transitions for responsive animations and effects and utilise media queries to establish breakpoints for various screen sizes. You'll be well on your way to producing stunning, responsive designs with CSS if you adhere to these best practices.

See you next time!

Photo by Mohammad Rahmani on Unsplash

Understanding Container Theory And It's Application In Web Coding

Oluwasegun Olatunji — Sun, 18 Sep 2022 12:16:27 +0000

Container, in general term means to contain something; goods or other items inside an enclosed box or even a room.

In web coding (HTML), the concept of container is not different from the above. It means containing some element into an opening and ending tag of an HTML document. Containing an element varies with each language and framework, but in this article it will be explained only in relation to HTML.

In this article, we will extensively cover the following:

HTML Tags
Types of Container Tags
Semantic Elements

HTML Tags

HTML stands for Hypertext Markup Language which employs predefined elements and tags to instruct the browser on how to display the contents on a webpage .
Tags are merely a few commands that are surrounded in angle braces(<, >) and are unofficially divided into two, which are: Empty tags and container tags.

Empty Tags

In HTML, opening tags without a closing tag(/>) are known as empty tags, void tags, or self-closing tags.
Syntax:

<tag_name>content>

<br>
break this line

They are unable to hold more elements but are used in adding lists, images, hyperlinks meta-data, etc. into a website.

Adding a closing brace to an empty tag automatically makes it an invalid syntax

<br></br>
invalid

Notably there are 15 empty tags listed in the HTML5 specification and they include:

<meta> which represents the elements and information included in the meta-data of an HTML document.

<br>, also called carriage return. It is a tag that indicates line break in a text.

<area>, used to make a portion which mapped click able on an image.

<img>, is used to embed an image into the document.

<link>, it is used to to create a connection between content and an external resources.

<base>, <col>, <embed>, <input>, <hr>, <param>, <source>, <track>, <wbr>, <base> are other empty tags in HTML.

Container Tags

Whenever a content is written between an opening and ending tag in an HTML document, the tag is referred to as a container tag.

Syntax:

<tag_name> contents </tag_name>
<p>Container tag</p>

In a line of code, the document is divided into three parts, i.e., an opening tag, content (which can also contain other tags) closing tag which put an end to the line.

The content is displayed in the browser in accordance to the structure of the document. If the container tag isn't closed, the browser applies the effect of the opening tag until the end of the page.

The <html>, <head> and <body> tags are examples of container tags. Many other tags are contained in them because they form the basic structure of an HTML document.

Examples of Container Tags

There are lots of container tags in HTML but we are going to cover a very significant few which houses both container tags and empty tag in an HTML document.

The few tags are:
<html> tag, this tag is the second tag in an HTML document, all other tags are written in it and it has its closing tag written as, </html>.

By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.

<head> tag which has its closing tag written as </head> expressly contains details about the body, the page's title, the labels, etc. of a web page.

Only specific markup elements like meta, link, script, etc. are permitted in the HTML5 head title.

<body> tag is used to specify the primary content that will be shown on a website. SUCH content include: text, images, videos, links, etc. It has its closing written as, </body>.

Types of Container Tags

Embedded within the html <body> tag are types of container tags that includes; styled container tags and block container tags which are classified by their intents.

Styled Container Tags

This type of container tag consists of tags that are styled with the browser automatically by default.

For instance, an hyperlink tag <a> will be styled by the browser to make it clickable.

a: {
  color: link;
  cursor: pointer;
  text-decoration: underline;
}

The above is styled using a CSS user agent stylesheet that is provided by the browser to make it specially defined in a manner that suites the HTML standard.

The following tags are examples of styled tag and are specially styled by the browser.

Header tags<h1>, <h2>, <h3>, <h4>, <h5>, <h6> for different heading types.

The button tag <btn> for buttons.

List tags <ul>, <ol> for different kinds of lists.

Hyperlink tag <href>.

Paragraph tag <p>

Text styling tags to either make a text bold <b> or in italics <i>.

Block Container Tags

Block container tags are mainly used to divide HTML document into sections such as; header, footer, etc. in other for the document to be easily accessible and understood by browsers and developers.

Before the inception of HTML5, dividing an HTML document can only be done using a <div> tag with an id attribute. But now, <nav>, <main>, <aside>, <articles>, <header>, <footer>, and <section> tags have been drafted into the HTML5 specifications for dividing HTML documents.

`Div` Tag

A division or segment is created in a document by the container tag known as <div>.

<Div> tag is used to organize HTML elements so that they can be styled with CSS without changing its original content or layout.

A div tag has the flexibility to contain any HTML tag, including another <div>.

`Span` Tag

The HTML tag <span> is a general inline container for information that does not automatically denote anything.

It can be used to group items that needs to be styled using the class or id attribute because they have similar attribute values, like <lang>.

Note that; It can only be used when other sematic tag is not appropriate for the purpose.

Sematic Elements

An element is a part of an HTML file that instructs a web browser how to organize and interpret a particular section of the HTML file.

In the case of sematic elements, they are elements that surround the html tags. They give an HTML page content rather than just presentation. It clarifies the many sections and page layouts of HTML, making it easier to understand.

Also they consist of an opening tag, content, and closing tag like container tags. They are: <header>, <nav>, <section>, <article>, <aside>, and <footer>

`Header`

It defines a header for a web page.

A collection of introductory or navigational aids is often represented by the HTML element known as <header>. In addition to some heading components, it might also have a logo, a search form, the author's name, among other things.

<header>
    <h2>Nigeria</h2>
  </header>

`Nav`

It is the semantic element that designates a portion of a page whilst providing smooth navigation links, either within the current content or to other documents.

Tables of contents, menus, and indexes are examples of sections that can be navigated using the <nav> tag.

<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

`Section`

Chapters, headers, footers, and other sections are all defined using the <section> tag.

<section>
<a href="#">My blog</a>
<a href="#">My LinkedIn profile</a>
</section>

`Article`

It is a container element that is meant to be independently distributed within a document, page, application, or website.

This element contains the main part which has the major information about the web page.

<article class="Container tag">
  <h2>examples of container tag</h2>
</article>

`Aside`

In an HTML document, the <aside> element is majorly used to indicate the sidebar of a webpage.

<article>
  <aside>
    <p>I am a young man</p>
</aside>
  <p>More about me...</p>
</article>

`Footer`

It defines a footer for a document or a section
And the footer contains major information relating to the author and the page.

<footer>
This is a footer
</footer>

Conclusion

The coherent statement, rules, ideas and guiding principles that sets the operation behind the HTML container is that it entails opening and closing tags and have been duly explained in this article.

Like other HTML attributes and qualities,
the explained parts that span through general html tags, types of containers and the sectioning semantic tags and their uses can't be overemphasized.

In subsequent articles, I shall continue to dissect more essential attributes of web coding.

Thank you and see you soon!

Basic Web Principles - HTML And CSS Explained

Oluwasegun Olatunji — Thu, 01 Sep 2022 21:11:05 +0000

According to widely agreed tale, getting started
in tech has always been difficult, on my path I had the same experience. I was practically confused finding what to learn, starting out with courses I didn't understand its prerequisites and jostling from one online learning platform to the other.

In all, it felt like I was wasting my time until I spoke with a couple of friends and a mentor on adplist.com who told me that everything in programming revolves round the web and if I want to start off, I should start from the web.

Starting from the web apparently means learning HTML, CSS and Javascript which are the web development fundamentals. In this article, I'll explain the basic web principle, niching down HTML and CSS and how they make the web work.

Here’s a list of what we’ll cover in this article:

• The Web

• HTML

• CSS

The Web

For a basic understanding of web, it is a subset of the internet.

World Wide Web, is a portion of the Internet that consists of pages that can be accessed by a Web browser. In other words, the web is a collection of files and codes that are stored in a server that is divided into two; (web browser client and web server) and are connected to the internet.

Internet

This is a network of computers that communicate with each other to send and receive data (information), and each computer is identified by a unique number called the IP address.

IP Address

An IP address is a lengthy string of numbers linked to every device connected to a network that uses the Internet as the medium for communication.

To access a web on the internet, it loads through a browser which is known as the web client. For instance, someone sends you a link and when you click the link, your browser (web client) send a message to the website (web server) asking for the content of the link and the website's server receives the message and shows the link contents.

The client-side and server-side are referred to as the “front end” and the “back end", respectively. This whole process has to be constructed as lines of codes and that's where HTML, CSS and the whole web development process comes in.

What is HTML?

HTML stands for Hypertext Markup Language.
It was founded in 1989 and it's the first building block of a web page, core of every web page and starting point for anyone learning how to create content for the web.

How HTML works

Rather than using a programming language to perform functions, it uses a Markup language which uses tags end elements to create primary content of a web page. The browser then reads to understand the contents and purpose it serves in a webpage.

HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>

To define a page, each and every HTML 5 document uses a different set of component and element.

While an HTML 5 document is made up of various elements, the following components are always present on every page:

A declaration statement at the top stating that the document is an HTML 5 document
Header
Body

The <!DOCTYPE> tag in HTML is used to specify the version of HTML that a document is utilizing. This is also described as document type declaration(DTD).
Note that unlike other HTML tag, the <!DOCTYPE> tag does not have an end tag.

<html> tag is the second tag in an HTML document, all other tags are written in it and it closes as </html> By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.

The <head> tag which has its closing written as </head> expressly contain details about the body, the page's title, the labels, etc. of a web page. Only specific markup elements like meta, link, script, etc. are permitted in the HTML 5 head title.

The <body> is used to specify the primary content that will be shown on a website. Such content include: text, images, videos, links, etc.

What is CSS?

CSS stands for Cascading Style Sheet.
CSS is a stylesheet language created in late 1990s to make beautiful web designs. Adding CSS to a web page will make the web pages appear aestetically pleasing.

How CSS works

Like humans, we were created with skeleton which serves as a framework for the body, then we're covered with the skin which gives beauty and makes human beautiful

The same thing with CSS, it works as the skin that covers HTML, it is used to create background colors, layout, styling, padding and every other designs that makes a webpage smart and beautiful.

Presentation and ease of use are a couple of the main things that CSS has bought to web design by translating the way content looks on a webpage and what else goes on it to complement that content.

CSS Syntax
A selector, property, and its value are the components of a CSS Syntax. The HTML element where CSS style is applied is indicated by the selector. Semicolons are used to separate each CSS property.

selector { Property: value; }

The HTML element you want to style is indicated by the selector.
One or more declarations are contained in the declaration block and are separated by semicolons.
A comma separates the name of the CSS property from its value in each declaration.

Types of CSS

- Internal CSS

<!DOCTYPE html>
<html>
<head>

<style>
body {background-color: aliceblue;}
p    {color:yellow;}
</style>

</head>
<body>
<p>This is paragraph is set at yellow color.</p>
</body>

</html>

Internal or embedded CSS works by adding CSS codes into <style> tag in the <head>section of an HTML document.
A single page can be effectively styled with this CSS style but takes time to use this style for several pages because CSS rules must be added to each page of the website.

- External CSS

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

This type of CSS works by adding an external .css folder that contains the whole stylesheet into the <head> tag in an HTML document.

A large website can be styled more effectively using this CSS type. An entire website can be changed at once by making changes to the .css file.

- Inline CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <p style="color:yellow; font-size:40px;">Yellow</p>
  </body>
</html>

Typically, inline CSS is only used to style one type of HTML element, by adding the CSS style attribute to each HTML element.

Conclusion

The first step to understanding web programming and web development is learning and understanding HTML and CSS and the most common and extensive use of learning HTML and CSS is to code for the web. Even if programming has applications in a wide range of fields, from cybersecurity to design employment, webpages are still built using HTML and CSS, with HTML serving as the structure and CSS serving as the finishing touches.

Understanding and utilizing the alternatives provided by these two programming languages will not only put you in a strong position to build your own websites, but it will also open up numerous doors and opportunities for learning additional programming languages.

In subsequent articles I shall be dissecting structures of each language and continue to open up our minds to web development.

Thank you for reading and see you soon!

Forem: Oluwasegun Olatunji

Mastering CSS Sizing: A Guide to Responsive Design

CSS Units

Absolute

Relative Units

Viewport Units

Choosing the Right Units

CSS Sizing Properties

Width and Height

Padding, Margin, and Border

Box-sizing

Background-size and Background-position

Responsive Design Techniques

Media Queries:

Flexbox

Grid Layout

Transitions and Transforms in CSS

Conclusion

Understanding Container Theory And It's Application In Web Coding

HTML Tags

Empty Tags

Container Tags

Examples of Container Tags

Types of Container Tags

Styled Container Tags

Block Container Tags

Div Tag

Span Tag

Sematic Elements

Header

Nav

Section

Article

Aside

Footer

Conclusion

Basic Web Principles - HTML And CSS Explained

The Web

Internet

IP Address

What is HTML?

How HTML works

HTML Document

What is CSS?

How CSS works

Types of CSS

- Internal CSS

- External CSS

- Inline CSS

Conclusion

`Div` Tag

`Span` Tag

`Header`

`Nav`

`Section`

`Article`

`Aside`

`Footer`