DEV Community: Brendan

Understanding CSS: Advantages and Disadvantages of Inline, Internal, and External Styles

Brendan — Sat, 22 Jun 2024 12:56:48 +0000

Introduction

What is CSS

CSS, also known as cascading style sheet, is one of the core technologies of the web.
CSS is used to describe the visual style and presentation of the page. It consists of countless properties that developers can use to format (edit) the content of a web page.

You can write CSS in three places: inline CSS, internal CSS, and external CSS. Today, we'll look at their advantages and disadvantages.

Inline CSS

Inline CSS applies CSS styles directly into the HTML code using the style attribute. For example:

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

Advantages of Inline CSS

An advantage of using inline CSS is the ease with which you can style a particular web page component, or, in other words, specificity. This ability to change the styling of any specific element ties into its next advantage.
Inline CSS makes testing a style or changing a particular style on a webpage effortless.
One of the most significant advantages of inline CSS is that it doesn't require external files or links. This advantage means you can streamline the development process as all the code is within the HTML code. This feature makes it very useful when working on small projects.

Disadvantages of Inline CSS

A significant disadvantage of using inline CSS is managing the code as a project gets bigger and bigger. With different styles scattered throughout the HTML, editing the webpage or making global changes becomes more complicated and bug-prone because each element that needs a style change/update must be searched for and changed manually.
Another disadvantage is increased repetition when multiple elements in the HTML need the same styling. Since developers have to style each component manually, they repeat the same CSS code, making the code large and complex to read, increasing the likelihood of bugs.

Internal CSS

Internal CSS is a way of applying CSS to a webpage that involves using a style tag in the head section of the HTML file. For example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Internal CSS Example</title>  
<style>  
body {  
font-family: Arial, sans-serif;  
}  
h1 {  
color: blue;  
}  
p {  
font-size: 14px;  
}  
</style>  
</head>  
<body>  
<h1>Welcome to My Website</h1>  
<p>This is an example of internal CSS.</p>  
</body>  
</html>

This method allows you to edit and modify the style and feel of the page without needing an external file for the CSS.

Advantages of Internal CSS

When using internal CSS, the styles are confined to the specific page, which helps avoid conflicts with styles on other pages. This approach guarantees that the CSS rules defined within the style tag in the head section apply only to that document. As a result, developers can specify the styling of individual pages without worrying about unintended side effects on other parts of the website, making internal CSS a convenient choice for page-specific customizations.
Another advantage of internal CSS that ties into the previous one is it provides greater control and customization of the individual pages of a website.
Another advantage of internal CSS is that it can contribute to faster page loading times, as no additional HTTP requests are needed to fetch an external stylesheet.

Disadvantages of Inline CSS

A significant disadvantage of internal CSS is the duplication of styles across multiple HTML files. Each HTML file must have a separate style section with the same CSS code when different pages need the same style. This repetition not only increases the overall size of the website but also complicates maintenance since any changes to the styles must be done manually in every file. This disadvantage can lead to inconsistencies and a higher chance of errors, making internal CSS less efficient for larger websites that require uniform styling across multiple pages.
Another notable disadvantage of internal CSS is the increased HTML file size. Adding styles directly within the style tag in each HTML document's head section increases the overall file size, especially if there are large or complex styles. This disadvantage can lead to longer load times for users with slower internet connections.

External CSS

External CSS involves styling in a separate .css file and linking it to an HTML document using the link tag in the head section. This way of writing CSS promotes the reusability of styles and better organization across multiple pages. An example of what your HTML code will look like is:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>External CSS Example</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
<h1>Welcome to My Website</h1>  
<p>This is an example of external CSS.</p>  
</body>  
</html>

An example of the CSS is :

body {  
font-family: Arial, sans-serif;  
}  
h1 {  
color: blue;  
}  
p {  
font-size: 14px;  
}

Advantages of external CSS

A significant advantage of external CSS is its reusability, as a single stylesheet can be linked across multiple web pages, significantly reducing repetition and redundancy. This means that common styles only need to be defined once in an external .css file, which you can then link to any number of HTML documents. This advantage makes development more streamlined and makes things like site-wide updates much more straightforward and efficient.
A vital performance advantage of external CSS is that it uses browser caching to improve loading times after the initial visit. When a user first visits a website, the external stylesheet is downloaded and stored in the browser cache. On subsequent visits, the browser can quickly retrieve the cached CSS file rather than downloading it again, significantly reducing load times.

Disadvantages of Inline CSS

A disadvantage of external CSS is its reliance on additional HTTP requests to load the stylesheet. Each time a web page is accessed, the browser must fetch the external CSS file, which can cause a delay, especially on slower networks or if the server hosting the stylesheet is under heavy load. The webpage may render without styles if the CSS file fails to load due to network issues or server errors.

Choosing The Right Approach

There are multiple factors to consider when considering what CSS type to use when working on a project, as there is no one-size-fits-all way of looking at it. Some of these factors are

Project Size:

More extensive projects benefit from external CSS for better management and scalability.
Complexity:

Complex designs are easier to handle with external CSS due to all the styling taking place in one place.
Performance Needs:

Inline and internal CSS can be quicker for small, simple pages, while external CSS leverages caching for repeated visits.

The appropriate type of CSS depends on the project's size and specific needs. For small web pages, inline or internal CSS is enough. External CSS, however, is best for large, multi-page websites.

Implementing a Responsive Navigation Menu for an E-commerce Website with CSS Flexbox

Brendan — Fri, 29 Dec 2023 22:09:46 +0000

Prerequisites

To follow along with this tutorial, you need to have:

An understanding of how to set up a html file.
An understanding of class names and pseudo-selectors.
An understanding of the four states of a link.

Introduction: An Overview of CSS Flexbox

Before we get started on how to build responsive navigation, we need to define what Flexbox is, some of its essential terminologies, and finally, a critical overview of some of its properties.

Flexbox is a set of related CSS properties used in building one-dimensional layouts. The main idea is that the space inside of a container element can be automatically divided by its child elements. Flexbox makes it easy to align items inside a parent container vertically and horizontally. With this, it solves some widespread CSS problems, such as:

vertical centering
creating equal-height columns

Some Important Terminologies in Flexbox:

Flex Container:

This is the element on which we want to use Flexbox. All that’s needed to turn an element into the flex container is to set its display properties to flex, i.e., display: flex.. When this is done, all the direct child components are elements within the flex container. It will become flex-items. Also, it is essential to note that the flex container and flex items have different properties that can be applied to them.

Main Axis:

This is referred to as the direction in which the flex items are laid out. It is usually in a horizontal direction, going from left to right.

Cross Axis:

It is the alignment of flex items perpendicular to the central axis. For context, it goes from top to bottom. It is important to remember these names and their definitions since the direction of the central and cross-axis can be changed.

Before we move to creating the Nav, I'll give you an overview of some properties of both the flex container and the flex items.

Flex Container Properties:

Gap: This is to create space between the flex items without using a margin.
Justify-content: This is to align flex items along the main axis (horizontally by default).
Align-items: This aligns items along the cross-axis (vertically by default).
Flex direction: This defines the direction of the main axis.

Flex items properties:

Align-self: is to overwrite align items for individual flex items
Flex grow: This is used to allow an element to grow.
Flex-shrink: It is used to make an element shrink.

HTML Structure of the Navigation bar

You must do a few things in HTML to create a navigation menu. The first thing is to use the nav elements <nav></nav> (with class name “main-nav”) as this is where your navigation menu would be found. Then, the next step and the most semantically sound way of building a navigation would be to use a list with the navigation links side to side. So for the list, we will create an unordered list using the ul element ( <ul></ul> ) with the class name main-nav-list.

If done correctly, it would look like this: <ul class="main-nav-list"></ul>. After this is done, you will fill the list element with list item elements (<li></li>), each containing an anchor element (<a></a>). To understand, it would look like <ul class="main-nav-list"> <li> <a href="#"> <a/> Section 1 </li></ul>

The # in the previous code indicates that the link leads nowhere, and the content of section one is for a single navigation item; more often than not, the navigation usually has multiple links.

After writing the first li item, you would copy and paste the code as often as needed. when done, your list will look like this:

<li><a class="main-nav-link" href="#"> Section 1</a></li>

<li><a class="main-nav-link" href="#"> Section 2</a></li>

<li><a class="main-nav-link" href="#"> Section 2</a></li>

<li><a class="main-nav-link" href="#"> Section 3</a></li>

<li><a class="main-nav-link" href="#"> Section 4</a></li>

<li><a class="main-nav-link nav-cta" href="#"> Section 5</a></li>

</ul>.

Now, you need to remove the bullet points and make each li element appear side by side.

CSS Structure of the Navigation bar

After setting up the HTML, it's time to code the CSS of the navigation bar. So the first thing to do in your CSS file is to select the class="main-nav-link. This is done by adding a dot to the class name, i.e., .main-nav-link. And now, to remove the list styling or the dots at the back of the nav list items, you simply use the list-style formatting in CSS and specify none. This should look like this:

.main-nav-list {

list-style: none;
}

After this, to make them appear side by side, you need to use flexbox, in this case, the display:flex property. This would look like this :

.main-nav-list {
list-style: none;
display: flex;
}

Now that the two major problems have been solved, it's time to focus on some styling. The first thing would be to use the gap property to create space between the list items. An ideal gap between the list items would be 32 px(pixels). The updated code should look like this:

.main-nav-list {
list-style: none;
display: flex;
gap: 32px;
}

And now, to style the link or anchor (a) elements in the list, you need to give each of them the same class name that would be used in CSS, which would be the ‘main-nav-link’. So the anchor elements would look like this:

<a class="main-nav-link" href="#"> Section 1</a>

After adding class names to the Li elements, the first step is to select the link and the visited states of the link using pseudo-classes:

.main-nav-link :link,
.main-nav-link :visited {}

Start by removing the text decorations, and do this by using text-decoration set to none. That is:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none; }

The next step would be to set the color of the text to any one of your choice using a "color" selector and then specify whatever color you want. Then, you choose the size of the fonts using the "font-size" selector:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
color: #333;
font-size: 18px;
}

Since you are building a navigation bar for an e-commerce website, you need it to be as appealing as possible. Thus, you need the navigation to draw some attention. An easy way to do this would be to bolden the text on the navigation using the "font-weight" selector and, from personal preference, set it to 500. That is:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
}

Another trick to increase the appeal of the navigation would be to use the "transition" selector to specify how long it would take to switch from the styling of the link and visited states to the styling of the hover and active state:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
transition: all 0.3s:
}

The 'all' used in the transition property indicates you want all elements with the class name where the transition property is put to transition in the stated amount of time.

After this is done, the next step is to select the hover and active states using pseudo-classes:

.main-nav-link:hover,
.main-nav-link:active{}

These states can then be styled depending on what you need for your projects. For example, we can give its hover state a different color entirely (basically, when the mouse hovers above the link, it changes color to what you set it to be). It would look something like this:

.main-nav-link:hover,
.main-nav-link:active {
color: #cf711f;
}

This is all you need to build a navigation, but for e-commerce websites, you should add this trick to push traffic, which is to add a call to action button in the navigation.

So, to do this, firstly, you will need to add a new class name to one of the links in the nav. It is advisable to make the last link the call to action button. So this would look something like:

<li><a class="main-nav-link nav-cta" href="#"> Section 5</a></li>

Now, in the CSS, you would select the nav-cta class and style it to be a button and to do that. You give it some padding, a background color, some border radius to make the edges look a little rounded (do this based on preference) and a few other things.

Here it is:

.nav-cta:link,
.nav-cta:visited {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #e67e22;
}

Since the padding needs to be applied, you must make the nav elements into in-line block elements. For this, you need to add the display:in-line block to the CSS code of the nav, basically:

.main-nav-link:link,
.main-nav-link:visited {
display:in-line;
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
transition: all 0.3s:
}

And lastly, as with the links in the nav, you need to style the hover and active states of the button.

.nav-cta:hover,
.nav-cta:active {
background-color: #cf711f;
}

As for the colors used, the two colors for the button are different shades of orange. The link and visited are lighter, and the hover and active states have darker shades.

Conclusion

In this tutorial, you created a navigation bar for an E-commerce website and learned a trick for making it generate more traffic by adding a call to action button on one of the links. If you follow through correctly, this will teach you everything you need to know about navigation bars.