Exploring HTML: Navigation, Linking, Images, Multimedia, and CSS Concepts

Welcome HTML Part 3

Welcome to Part 3 of our HTML tutorial! You’ve come a long way, and now it’s time to level up your HTML skills. In this chapter, we’ll explore exciting topics that will enhance your web development abilities. From Hyperlinks and Images to JavaScript integration and CSS, you’ll have the tools to create dynamic and interactive web pages. Let’s embark on this learning journey and unlock the full potential of HTML!

Hyperlinks and Navigation

Hyperlinks and navigation play a vital role in connecting web pages and facilitating seamless browsing experiences for users. In this section, we will explore various aspects of hyperlinks and navigation in HTML. These topics cover the basics of hyperlinks and navigation in HTML. However, there may be additional topics to consider, such as styling links or incorporating navigation in responsive designs. These advanced techniques can be explored in upcoming modules or chapters dedicated to more advanced HTML and CSS concepts.

Linking to Other Pages

Linking to other pages is a fundamental aspect of web development. By using the <a> (anchor) element, we can create links that direct users to different web pages.


EXAMPLE
<a href="https://www.ESHOPPERHUB.COM"   target="_blank" >Visit ESHOPPERHUB.COM</a>
                                        
OUTPUT
Visit ESHOPPERHUB.COM

Relative and Absolute URLs

URLs can be specified as relative or absolute. Relative URLs are relative to the current page, while absolute URLs provide the complete web address.


EXAMPLE
<!-- Relative URL -->
<a href="/about-us"  target="_blank" >About-us</a>

<!-- Absolute URL -->
<a href="https://www.ESHOPPERHUB.COM/about-us"   target="_blank" >Visit ESHOPPERHUB.COM/About-Us</a>
                                        
OUTPUT

About-us


Visit ESHOPPERHUB.COM/About-Us

Relative URLs are useful when linking to pages within the same website, while absolute URLs are used for external resources.

Linking within the Same Page (Anchor Links)

Anchor links allow users to navigate within the same page by targeting specific sections or elements. To create an anchor link, we use the <a> element with a href attribute referencing an ID within the page.


EXAMPLE
<a href="#section1">Go to Section 1</a>
<!-- ... -->

<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>
                                        
OUTPUT
Go to Section 1


Section 1

This is the content of Section 1.

Clicking on the "Go to Section 1" link will scroll the page to the corresponding section.

Creating Navigation Menus

Navigation menus are essential for helping users navigate through different sections or pages of a website. We can create navigation menus using HTML lists <ul> and <li>.


EXAMPLE
<ul>
  <li><a href="https://topicdepth.com/"   target="_blank" >Home</a></li>
  <li><a href="https://topicdepth.com/about-us/"    target="_blank" >About-US</a></li>
  <li><a href="https://topicdepth.com/contact-us"    target="_blank" >Product Review</a></li>
</ul>
                                        
OUTPUT

Each <li> element represents a menu item, and clicking on the respective link will take the user to the corresponding page.

HTML Links – The target Attribute

In HTML, the target attribute is used to specify where a linked document should be opened. By default, a linked page opens in the current browser window, but the target attribute allows us to change this behavior. Here are some commonly used target attribute values:

_self (Default): Opens the linked document in the same window/tab where it was clicked.
_blank : Opens the linked document in a new window or tab.
_parent: Opens the linked document in the parent frame, if the current window is within a frame.
_top : Opens the document in the full body of the window.


EXAMPLE
<a href="https://www.ESHOPPERHUB.COM" target="_self">Visit ESHOPPERHUB.COM    In Current Tab</a>
<a href="https://www.ESHOPPERHUB.COM" target="_blank">Visit ESHOPPERHUB.COM   In New Tab</a>
<a href="https://www.ESHOPPERHUB.COM" target="_parent">Visit ESHOPPERHUB.COM  In Parent Tab </a>
<a href="https://www.ESHOPPERHUB.COM" target="_top">Visit ESHOPPERHUB.COM  In full body of the window </a>
                                        
OUTPUT
Visit ESHOPPERHUB.COM    In Current Tab
Visit ESHOPPERHUB.COM   In New Tab
Visit ESHOPPERHUB.COM  In Parent Tab 
Visit ESHOPPERHUB.COM  In full body of the window 

In the above example, clicking on the link "Visit ESHOPPERHUB.COM In New Tab" will open the "https://www.ESHOPPERHUB.COM" page in a new window or tab.

Use an Image as a Link

To use an image as a link, simply place the <img> tag inside the <a> tag. This allows users to click on the image to navigate to a specific URL.


EXAMPLE
<a href="https://www.ESHOPPERHUB.COM"    target="_blank" >
  <img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Description of the image">
</a>
                                        
OUTPUT

  Description of the image

In the above example, when the image is clicked, the user will be redirected to "https://www.ESHOPPERHUB.COM".

Link to an Email Address

To create a link that opens the user's email program and pre-fills the recipient's email address, we can use the mailto: protocol inside the href attribute.


EXAMPLE
<a href="mailto:EXAMPLE@YAHOO.COM">Send Email</a>
                                        
OUTPUT
Send Email

When the user clicks on the link, their default email program will open with a new email addressed to "EXAMPLE@YAHOO.COM".

Button as a Link

If you want to use an HTML button as a link, you can achieve it by adding JavaScript code. JavaScript allows you to define actions for various events, such as a button click.


EXAMPLE
<button onclick="window.open('https://www.ESHOPPERHUB.COM', '_blank')">Visit ESHOPPERHUB.COM</button>

                                        
OUTPUT

In the above example, when the button is clicked, it will navigate to the specified URL.

Link Titles

The title attribute provides additional information about an element. When the mouse hovers over the element, the title text is displayed as a tooltip. This can be useful for providing context or descriptions for links.


EXAMPLE
<a href="https://www.ESHOPPERHUB.COM" title="Visit ESHOPPERHUB.COM"  target="_blank" >Click Here</a>
                                        
OUTPUT
Click Here

In the above example, when the user hovers over the link, a tooltip will display the text "Visit ESHOPPERHUB.COM".

Link Color

The color property in CSS allows you to specify the color of links. This gives you the ability to make links stand out or match your overall design. It's important to consider accessibility and ensure that link colors provide sufficient contrast with the surrounding text for easy readability.


EXAMPLE
  <style>
    /* Styles for normal link */
    #myLink {
      color: blue; /* Sets the link color to blue */
      text-decoration: none; /* Removes the default underline from links */
    }

    /* Styles for link when hovering */
    #myLink:hover {
      color: red; /* Sets the link color to red when hovering */
      text-decoration: underline; /* Underline the link when hovering */
    }
  </style>

  <h1>Link Styling Example</h1>
  <p>
    <a id="myLink" href="https://www.ESHOPPERHUB.com"  target="_blank" >This is a link</a> <!-- Normal link with id -->
  </p>

                                        
OUTPUT
  

  

Link Styling Example

This is a link

For the normal state, we set the color of the link text to blue using color: blue;. We also remove the default underline from links using text-decoration none;.
For the hover state, we use the : hover pseudo-class to target the link when the user hovers over it. We set the color of the link text to red using color red;. We also add an underline to the link text using text-decoration underline.

The result is that the link will appear blue with no underline in its normal state. When you hover over the link, it will change to red and get underlined, providing visual feedback to the user.

The a selector targets all anchor elements in the HTML document. By applying CSS styles to the a selector, you can modify the appearance of links throughout your webpage. This selector allows you to define properties like color, font-size, text-decoration, and more, to create a consistent and visually appealing link style across your website. Using the a:hover selector, you can also specify styles that should be applied when the user hovers over a link, such as changing the color, underlining the link, or adding other visual effects.

Images And Multimedia

Images and multimedia elements are powerful tools for enhancing the visual appeal and interactivity of web pages. In this section, we will delve into the world of images and multimedia in HTML. We will cover topics such as adding images to web pages, optimizing image formats and sizes for optimal performance, and incorporating multimedia elements like videos and audio. While this section focuses on the fundamentals of working with images and multimedia, keep in mind that there are advanced techniques to explore in upcoming modules or chapters that delve into more advanced HTML and CSS concepts.

Inserting Images (src Attribute)

The <img> tag in HTML is used to display images on web pages, and the src attribute specifies the source or location of the image file. In addition to the src attribute, we can also use other attributes to provide additional information about the image.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image3.jpg" alt="see what"      width="400" height="500">
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Girl in a jacket"  width="400" height="500">
                                        
OUTPUT
see what
Girl in a jacket

HTML supports various image formats, including JPEG, PNG, and GIF. You can use these formats based on your requirements and the type of image you want to display.

Alt Attribute

The alt attribute specifies alternative text for the image. It is displayed


EXAMPLE
<img src="https://topicdepth.com/image.jpg" alt="Flowers in Chania">
                                        
OUTPUT
Flowers in Chania

Size Attributes (Width and Hight)

We can specify the width and height of the image using either the width and height attributes or the style attribute with CSS.

Here is example using width and height attributes.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Girl in a jacket" width="500" height="600">
                                        
OUTPUT
Girl in a jacket

Using style attribute with CSS:


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
                                        
OUTPUT
Girl in a jacket

Vedio

HTML provides tags for embedding videos and audio files into web pages. The <video> tag is used for embedding videos, while the <audio> tag is used for embedding audio files. You can specify the source of the video or audio using the src attribute.


EXAMPLE
<video width="640" height="360" controls>
        <source src="https://topicdepth.com/wp-content/uploads/MYPIC/vedio.mp4" controls>
        Your browser does not support the video tag.
</video>
                                        
OUTPUT

The fallback message "Your browser does not support the video tag" is utilized to provide an informative message in scenarios where the browser lacks support for the <video> tag or is unable to play the specified video file format. By including this fallback message, users are informed about the inability to play the video content and can explore alternative options, such as using a different browser or device, to access the video. This ensures a better user experience and helps users understand the reason behind the unavailability of video playback.

Audio

Embedding audio:


EXAMPLE
<audio src="https://topicdepth.com/wp-content/uploads/MYPIC/audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>
                                        
OUTPUT

The fallback message "Your browser does not support the Audio tag" is utilized to provide an informative message in scenarios where the browser lacks support for the <audio> tag or is unable to play the specified audio file format. By including this fallback message, users are informed about the inability to play the audio content and can explore alternative options, such as using a different browser or device, to access the audio. This ensures a better user experience and helps users understand the reason behind the unavailability of audio playback.

Video and Audio Controls:
By adding the controls attribute to the <video> or <audio> tag, you enable the default playback controls for the media element. These controls allow users to play, pause, adjust volume, and seek through the media content.

More Control on Images

Images in Another Folder

When your images are stored in a sub-folder, include the folder name in the src attribute to correctly reference the image.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Image in a Folder">
                                        
OUTPUT
Image in a Folder

Images on Another Server/Website

To display an image from another server or website, provide the absolute (full) URL in the src attribute.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/2023/06/fallback-image.png" alt="External Image">
                                        
OUTPUT
External Image

EXAMPLE
<img src="https://www.casevera.com/cdn/shop/files/ultra-thin-casevera-slim-iPhone-14-Plus-solid-black-case_1024x1024.webp?v=1682844796" alt="External Image-2">
                                        
OUTPUT
External Image-2

Animated Images

GIF images can be used to create animations.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/gif.gif" alt="Animated Image">
                                        
OUTPUT
Animated Image

Image as a Link

Wrap the <img> tag inside an <a> tag to make an image clickable.


EXAMPLE
<a href="/contact-us"    target="_blank" >
  <img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Image Link">
</a>
                                        
OUTPUT

  Image Link

Image Floating

Use CSS float property to make an image align to the left or right of surrounding text.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg" alt="Floating Image" style="float: left;">

In this example, the image will float to the left, 
and the text will wrap around it on the right side.
Remember that when using image floating, it's
crucial to consider the overall  design and 
layout of your webpage to ensure that it remains
visually appealing and user-friendly. Additionally,
 you should test the layout on different devices,
such as mobile phones and tablets, to ensure that 
it works well across various screen sizes.
                                        
OUTPUT
Floating Image

In this example, the image will float to the left, 
and the text will wrap around it on the right side.
Remember that when using image floating, it's
crucial to consider the overall  design and 
layout of your webpage to ensure that it remains
visually appealing and user-friendly. Additionally,
 you should test the layout on different devices,
such as mobile phones and tablets, to ensure that 
it works well across various screen sizes.

Image Map, Background Image and Picture Element

Image Map

An image map allows you to define clickable areas within an image. Each area can be linked to different destinations.


EXAMPLE
<img src="https://topicdepth.com/wp-content/uploads/MYPIC/image6.jpg" alt="Image Map" usemap="#map" width="1200" height="1500">
<map name="map">
  <area shape="rect" coords="0,0,400,1500" href="https://topicdepth.com/elearning/" alt="Area 1"  target="_blank">
  <area shape="rect" coords="400,0,800,1500" href="https://topicdepth.com/blogs" alt="Area 2"    target="_blank">
  <area shape="rect" coords="800,0,1200,1500" href="https://topicdepth.com/review/" alt="Area 3" target="_blank">
</map>
                                        
OUTPUT
Image Map

  Area 1
  Area 2
  Area 3

Background Image

You can set an image as the background of an element using CSS.


EXAMPLE
  <style>
    .container300 {
      background-image: url("https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg");
      background-size: 100% auto; /* Adjust the background image size */
      background-repeat: no-repeat;
      width: 400px; /* Set a fixed width for the container */
      height: 400px; /* Set a fixed height for the container */
      border: 2px solid black; /* Add a border for visualization */
    }

    .container300 h1 {
      color: blue; /* Change text color to make it visible against the background */
    }
  </style>
  <div class="container300">
    <h1>Content with Background Image</h1>
  </div>
                                        
OUTPUT
  
  

Content with Background Image

Picture Element

The <picture> element allows you to provide different image sources for different scenarios, such as different screen sizes or resolutions.


EXAMPLE
<picture>
  <source media="(min-width: 768px)" srcset="https://topicdepth.com/wp-content/uploads/MYPIC/image.jpg">
  <source media="(min-width: 480px)" srcset="https://topicdepth.com/wp-content/uploads/MYPIC/image2.jpg">
  <img src="https://topicdepth.com/wp-content/uploads/MYPIC/image3.jpg" alt="Responsive Image">
</picture>
                                        
OUTPUT

  
  
  Responsive Image

In above example, the <picture> element includes two <source> elements with different media queries. The first <source> element specifies that if the minimum screen width is 768 pixels or more, the image source will be set to “image.jpg”. The second <source> element states that if the minimum screen width is 480 pixels or more, the image source will be set to “image2.jpg”.

If none of the <source> conditions match, the <img> element serves as a fallback. It specifies the default image source as “image3.jpg” and includes the alt attribute for accessibility purposes.

This approach ensures that the appropriate image source is selected based on the device’s capabilities, providing a responsive and optimized image experience for different scenarios.

Embedding External Content (iframes)

HTML iframes

HTML iframes:
HTML iframes (Inline Frames) are used to embed another HTML document within the current document. They allow you to display external web pages or documents, videos, maps, or other content from different sources seamlessly within your web page. Iframes provide a way to integrate content from external websites without redirecting users away from the current page.

The syntax to create an iframe is as follows:

<iframe src=”url” width=”width” height=”height” frameborder=”0″ scrolling=”auto”> </iframe>


Explanation of the attributes:
src: Specifies the URL of the content you want to embed in the iframe. It can be an absolute or relative URL.
width: Sets the width of the iframe in pixels or percentage.
height: Sets the height of the iframe in pixels or percentage.
frameborder: Specifies whether to display a border around the iframe. Use “0” to remove the border and “1” to display it.
scrolling: Determines if the iframe should have a scrollbar. Use “auto” to display a scrollbar when needed, “yes” to always display a scrollbar, or “no” to hide the scrollbar.

Let’s say you want to embed a Google Map in your web page using an iframe:


EXAMPLE
<!DOCTYPE html>
<html>
<head>
  <title>Embedded Google Map</title>
</head>
<body>
  <h1>Embedded Google Map</h1>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387598.16830916114!2d-
122.41941550000002!3d37.7749295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e0eb
f0bcb9f%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1622038677506!5m2!
1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>

                                        
OUTPUT



  Embedded Google Map


  

Embedded Google Map

In this example, the iframe displays a Google Map of San Francisco, CA. The src attribute contains the URL provided by Google Maps for embedding their maps. The width and height attributes determine the size of the iframe, and frameborder is set to “0” to remove the border.


Additional Topics:
<iframe> Accessibility: When using iframes, consider adding alternative content within the <iframe> element, which will be displayed if the iframe cannot be loaded or accessed. This is helpful for accessibility purposes, allowing users with screen readers to understand the content of the iframe even if they cannot interact with it.


EXAMPLE
<iframe src="https://www.example.com" title="Embedded Content" width="400" height="300">
  <p>Your browser does not support iframes or has disabled them.</p>
</iframe>

                                        

Nested iframes: It is possible to nest iframes within other iframes. However, be cautious about the complexity and performance impact of nesting iframes, as it can affect page load times and user experience.


EXAMPLE
<iframe src="iframe1.html" width="600" height="400">
  Your browser does not support iframes.
</iframe>

                                        

Responsive Iframes: To ensure that iframes are responsive and adapt to different screen sizes, use CSS techniques like setting the width to a percentage or using CSS media queries.


EXAMPLE
<iframe src="https://www.example.com" width="100%" height="450" style="border:0;"></iframe>

                                        

Remember to use iframes responsibly and avoid embedding content from untrusted sources, as it can potentially introduce security risks to your website. Always validate and sanitize the URLs used in iframes to prevent any possible malicious activities.

JavaScript with HTML

JavaScript with HTML

avaScript with HTML:
JavaScript is a powerful programming language that enables dynamic and interactive behavior on web pages. When combined with HTML, it allows developers to create dynamic content, handle user interactions, and add advanced functionalities to websites. In this section, we’ll explore how to use JavaScript in conjunction with HTML to create engaging and interactive web pages.

The <script> Tag:
To include JavaScript code in an HTML document, you use the <script> tag. This tag can be placed in the <head> or <body> section of the HTML document, and it can contain either inline JavaScript code or reference an external JavaScript file.

Example of Inline JavaScript using the <script> tag:


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript with HTML</title>
    <script>
        // Inline JavaScript code
        function greetUser() {
            var name = prompt("Enter your name:");
            alert("Hello, " + name + "!");
        }
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button onclick="greetUser()">Click Me</button>
</body>
</html>

                                        
OUTPUT



    JavaScript with HTML
    


    

Welcome to My Website

In this example, we have an inline JavaScript function greetUser() that prompts the user for their name and displays a greeting using alert(). The function is called when the user clicks the button.

External JavaScript File:
To keep your HTML document clean and organized, you can also link an external JavaScript file using the <script> tag’s src attribute.

Example of External JavaScript File:
index.html:


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript with HTML</title>
    <script src="scripts.js"></script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button onclick="greetUser()">Click Me</button>
</body>
</html>

                                        

scripts.js:


EXAMPLE
// External JavaScript file: scripts.js
function greetUser() {
    var name = prompt("Enter your name:");
    alert("Hello, " + name + "!");
}

                                        

In this example, the JavaScript code is moved to an external scripts.js file, which is linked to the HTML document using the <script> tag.

The HTML <noscript> Tag:
The HTML <noscript> tag is a unique and useful element that provides an alternative content or message for users who have disabled or are unable to execute JavaScript in their web browsers. When a web page contains JavaScript code, it is executed by default if JavaScript is enabled in the user’s browser. However, some users might have JavaScript disabled due to personal preferences, security concerns, or limitations in their browser or device.

The purpose of the <noscript> tag is to allow web developers to provide fallback content or instructions for users who cannot view or interact with the JavaScript-powered features of the page. This ensures that users with JavaScript disabled can still access essential information or use basic functionality.

Example of <noscript> Tag:


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>Using the noscript Tag</title>
</head>
<body>
    <h1>Welcome to My Website</h1>

    <p>This paragraph contains some JavaScript-powered content:</p>
    <script>
        document.write("This text is generated by JavaScript.");
    </script>

    <noscript>
        <p>This paragraph is shown when JavaScript is disabled or not supported.</p>
        <p>Without JavaScript, you may not see the dynamically generated content above.</p>
    </noscript>
</body>
</html>

                                        
OUTPUT



    Using the noscript Tag


    

Welcome to My Website

This paragraph contains some JavaScript-powered content:

In this example, the <noscript> tag contains a fallback message that will be displayed only if JavaScript is disabled or not supported by the user’s browser. The <script> tag contains JavaScript code that uses document.write() to generate dynamic content. If JavaScript is enabled, the dynamically generated content will replace the content within the <noscript> tag. However, if JavaScript is disabled, the content within the <noscript> tag will be displayed instead.


It’s important to note that the <noscript> tag should be used sparingly and only for critical content or functionality that requires JavaScript. Overusing the <noscript> tag can lead to a cluttered and confusing user experience, especially if the alternative content is not relevant or helpful to users.

By using the <noscript> tag, web developers can ensure that all users, regardless of their browser settings or device capabilities, have access to important information and core functionality on their websites. It’s a valuable tool for creating inclusive and accessible web experiences for all users.

C S S (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a crucial component of web development that enables the styling and layout of HTML documents. It works in conjunction with HTML and JavaScript to create visually appealing and engaging web pages. CSS allows developers to control the appearance of HTML elements, apply colors, set fonts, adjust spacing, and arrange the layout of content on a webpage.

Introduction to CSS

CSS was introduced to the web development world in 1996 as a way to separate the presentation (style) from the content (structure) of a web page. Prior to CSS, developers had to use inline styles within HTML tags, leading to bloated and difficult-to-maintain code. CSS brought a revolution by allowing developers to apply styles externally and consistently across multiple HTML documents.

How CSS Works

CSS works by associating styles (e.g., colors, fonts, spacing) with HTML elements using selectors. A CSS rule consists of a selector and a set of properties and values. The selector specifies which HTML elements the styles should be applied to, and the properties define the appearance of those elements. The values assigned to properties determine how the styles are applied.
Basic Syntax of a CSS Rule:
selector {
property: value;
}

Linking CSS to HTML

CSS can be linked to an HTML document in several ways. The most common method is using an external CSS file.

External CSS:
In a separate file with a .css extension (e.g., style.css), the CSS styles are defined. The HTML document links to this external file using the <link> tag in the <head> section.


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content of the webpage -->
</body>
</html>

                                        

Internal CSS:
CSS can also be embedded directly within the HTML document using the <style> tag in the <head> section.


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <style>
        /* CSS styles here */
    </style>
</head>
<body>
    <!-- Content of the webpage -->
</body>
</html>

                                        

Inline CSS:
Individual HTML elements can have inline styles applied using the style attribute directly within the HTML tag:


EXAMPLE
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1 style="color: blue;">Hello, World!</h1>
    <p style="font-size: 16px;">Welcome to my website.</p>
</body>
</html>

                                        

CSS Selectors

CSS offers a wide range of selectors to target specific HTML elements. Some common selectors include.

Element Selector:
Targeting specific HTML elements by their name. See example


EXAMPLE
p {
    color: red;
}

                                        

Class Selector:
Targeting elements with a specific class attribute. See example


EXAMPLE
.button {
    background-color: blue;
    color: white;
}

                                        

ID Selector:
Targeting an element with a specific ID attribute. See example


EXAMPLE
#header {
    font-size: 24px;
}

                                        

Descendant Selector:
Targeting elements that are descendants of another element. See example


EXAMPLE
ul li {
    list-style-type: circle;
}

                                        

These are just a few examples of CSS selectors. CSS provides a wide range of options to precisely target and style HTML elements.

CSS Box Model:
The CSS box model is a fundamental concept that describes how elements are rendered on a webpage. Each HTML element is treated as a rectangular box with content, padding, borders, and margins. Understanding the box model is crucial for controlling the spacing and layout of elements on a webpage.

CSS Flexbox and Grid Layout:
CSS Flexbox and CSS Grid Layout are advanced CSS techniques that allow for more sophisticated and flexible layouts. Flexbox provides a one-dimensional layout model, while Grid Layout offers a two-dimensional layout model. These layout systems make it easier to create responsive and complex designs, align content, and create dynamic layouts that adapt to different screen sizes.

Conclusion:
CSS is an essential technology in web development, allowing developers to control the visual appearance of HTML elements and create visually appealing and responsive web pages. By mastering CSS, you’ll have the ability to design attractive and user-friendly websites that leave a lasting impression on your audience. As you delve deeper into web development, CSS will become a powerful tool in your arsenal for creating stunning and engaging web experiences.

Please also read about CSS Framework, CSS Float Layout, CSS Flexbox Layout, and CSS Grid Layout in our upcoming HTML Part 4.

Leave a Reply

Your email address will not be published. Required fields are marked *