top of page

How to link style sheets to webpages:INLINE,INTERNAL &EXTERNAL ;Fixed Codes for dynamic Navigation Bar Buttons in Headers.

Sep 7, 2024

5 min read

0

4

0



SECTION1: Types of CSS

SECTION 2: Codes of fixed header and dynamic functional Navigation bar/buttons.

SECTION 1

There are three methods to add styles on web pages, these are – Inline, Internal, and External. 

Inline CSS:

Inline CSS is a way of defining the styling of an HTML element by adding CSS rules directly to the element’s tag using the “style” attribute. It is used for quick and simple styling changes to specific elements, without creating a separate CSS file. 

Inline CSS Syntax:

<p style="css_styles">    // Content

</p>

Here style is an attribute( meaning -QUALITY FOR AN ELEMENT).

We have containers,Headings,Divs,Sections etc, these are all elements and to these elements , we often give them special qualities of categories and we can give those qualities a unique name based on our choice , such that

<section class=”ANUSHKA-SHARMA-MERI-BANDI”></section>.

Or

<section id=”GANDU”></section>.

So, in the above two examples class and id are the two qualities/categories with name of your own choice so that you can call them by their names when you want to use them in css and javascript files to apply style and functionality upon them.


In other words, in a group of cats and dogs , if your dog’s name is “VINNU”, then shouting Dog won’t bring your own dog’s attention , you need to shout “VINNU” to make it hear you as calling it.

 

Let’s come back to Use of Inline CSS:

<!DOCTYPE html>

<html>

 

<head>

               <title>

                              Inline CSS

               </title>

</head>

 

<body>

               <h2 style="color: green;font-size: 18px;">

                              Welcome To GFG

               </h2>

               <p style="color: red; font-size: 14px;">

                              This is some text. style by inline CSS

               </p>

</body>

</html>

Hand to hand css is applied to the element and no other extra file is created.But this method is not feasible if the web codes are large and heavy level of styling needs to be done to web page.

Inline CSS Example Explanation:

Here is the basic explanation of the above code example.

  • The style attribute is added directly to the <p> tag.

  • Within the style attribute, CSS rules like color and font-size are specified.

  • These rules affect only the specific paragraph where the style attribute is used.

 

INTERNAL CSS

Internal CSS:

Internal CSS, also known as embedded CSS, involves adding CSS rules directly within the <style> element in the <head> section of an HTML document. It allows styling specific to that document.

Internal CSS Syntax:

<style> 

   // CSS Properties

</style>

Internal CSS Example:

Here i s the basic implementation of internal CSS.

<!DOCTYPE html>

<html>

 

<head>

               <title>

                              Internal CSS

               </title>

              

               <style>

                              h1 {

                                             color: blue;

                                             font-size: 24px;

                                             font-weight: bold;

                              }

 

                              p {

                                             color: green;

                                             font-size: 16px;

                              }

               </style>

</head>

 

<body>

               <h1>GeeksForGeeks</h1>

               <p>GeeksForGeeks</p>

</body>

 

</html>

Internal CSS Example Explanation:

Here is the explanation of the above-code example.

  • CSS rules are enclosed within the <style> element.

  • CSS rules target the <h1> and <p> elements, styling them with specific colors, font sizes, and weights.

  • Internal CSS applies only to this HTML file and cannot be reused elsewhere.

External CSS:

External CSS is used to place CSS code in a separate file and link to the HTML document. To use external CSS, create a separate file with the .css file extension that contains your CSS rules. You can link this file to your HTML document using the “link” tag in the head section of your HTML document. 

External and Internal CSS both syntax inside <head></head>.

External CSS Syntax:

<head>

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

</head>

In this case, the “link” tag specifies :

  • the type of the file (CSS),

  • the relationship between the HTML document and the CSS file (“stylesheet”), and

  • the location of the CSS file (“href” attribute).

The href attribute points to the URL or file path of your external CSS file.

External CSS Example:

Here is the basic example of using external css file.

<!DOCTYPE html>

<html>

 

<head>

    <title>External Style</title>

    <link rel="stylesheet"

           type="text/css" href="style.css">

</head>

 

<body>

    <h1>GeeksForGeeks</h1>

    <p>GeeksForGeeks</p>

</body>

</html>

 

 

CSS File:

h1 {

    color: blue;

    font-size: 24px;

    font-weight: bold;

}

 

p {

    color: green;

    font-size: 16px;

}

 

Here is the explanation of the above code example.

  • Here we are using External CSS file style.css to provide styling to our HTML element.

  • CSS rules target the <h1> and <p> elements, styling them with specific colors, font sizes, and weights.


Inline CSS is used for quick and specific styling, internal CSS is used for multiple elements within the same HTML document, and external CSS is used for a more organized and scalable approach to styling, allowing for reusability and maintainability.

SECTION-2


 To achieve this, you can use JavaScript along with HTML and CSS to dynamically load different content when a user clicks on the "About," "Services," or "Contact" buttons. This technique is called client-side rendering, where the content is loaded or changed without refreshing the entire webpage.

Here's how you can update the code to accomplish this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Content Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header>
        <div class="container">
            <h1 class="logo">My Website</h1>
            <!-- Navigation Bar -->
            <nav>
                <ul class="nav-links">
                    <li><button onclick="loadContent('home')" class="nav-button">Home</button></li>
                    <li><button onclick="loadContent('about')" class="nav-button">About</button></li>
                    <li><button onclick="loadContent('services')" class="nav-button">Services</button></li>
                    <li><button onclick="loadContent('contact')" class="nav-button">Contact</button></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- Content Section -->
    <main id="content" class="content-section">
        <!-- Default content will be loaded here -->
        <h2>Welcome to My Website</h2>
        <p>Click on the buttons above to learn more about me, the services I offer, and how to get in touch.</p>
    </main>
    <!-- JavaScript to handle dynamic content loading -->
    <script src="script.js"></script>
</body>
</html>

CSS

/* styles.css */
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
/* Header Styling */
header {
    background-color: #333;
    color: white;
    padding: 15px 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Container for header elements */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Logo Styling */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
/* Navigation Bar Styling */
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}
/* Navigation Links Styling */
.nav-links button {
    color: white;
    background-color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.nav-links button:hover {
    background-color: #555;
}
/* Main Content Section */
.content-section {
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
}
/* Box/Container Styling for Services Section */
.service-box {
    background-color: pink;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    font-weight: bold;
}

JAVASCRIPT

// script.js

function loadContent(section) {
    const content = document.getElementById('content');
    if (section === 'about') {
        content.innerHTML = `
            <h2>About Me</h2>
            <p><strong>Name:</strong> Uddit Kant Sinha</p>
            <p><strong>College:</strong> MNIT Jaipur</p>
            <p><strong>Address:</strong> Jaipur, Rajasthan, India</p>
            <p><strong>CGPA:</strong> 6.33</p>
            <p><strong>Job Title:</strong> Machine Learning Engineer</p>
            <p><strong>Experience:</strong> Experience in web development, machine learning, and data analysis.</p>
            <p><strong>Profile Summary:</strong> Highly motivated and passionate about technology and innovation.</p>
            <p><strong>Skills:</strong> Web Development, Machine Learning, Data Analysis, Python, JavaScript, HTML, CSS.</p>
            <p><strong>Links:</strong>
                <a href="https://github.com/UDDITwork" target="_blank">GitHub</a>,
                <a href="http://linkedin.com/in/uddit-7258792ab" target="_blank">LinkedIn</a>,
                <a href="#" target="_blank">Personal Website</a>
            </p>
        `;
    } else if (section === 'services') {
        content.innerHTML = `
            <h2>Services Offered</h2>
            <div class="service-box">Application Development</div>
            <div class="service-box">Website Development</div>
            <div class="service-box">Data Analysis</div>
            <div class="service-box">Business Analysis</div>
        `;
    } else if (section === 'contact') {
        content.innerHTML = `
            <h2>Contact Me</h2>
            <p><strong>Email:</strong> udditkantsinha@gmail.com, udditkantsinh2@gmail.com</p>
            <p><strong>Phone Number:</strong> 7456886877</p>
        `;
    } else {
        content.innerHTML = `
            <h2>Welcome to My Website</h2>
            <p>Click on the buttons above to learn more about me, the services I offer, and how to get in touch.</p>
        ;
    }
}

Nav bar buttons are always written in list form <ul><li></li></ul>.

There is onLoad /Load Content function of JavaScript: button onclick loadContent

That's how easy it is to remember it.

<script src="script.js"></script> - That is for dynamic content loading.




That's all.

Good Bye ,Read out more of my blogs!

Email me @udditalerts247@gmail.com

Google Developer: g.dev/uddit

www.udditportfolio.online

Github: UDDITwork



Sep 7, 2024

5 min read

0

4

0

Comments
Share Your ThoughtsBe the first to write a comment.
bottom of page