Introduction of HTML & CSS

Leave a Comment / Blog, Web Technologies / By

HTML

HTML (HyperText Markup Language):
HTML is the standard language used to create and design web pages, utilizing tags and attributes to structure content.

Brief History of HTML:

  • HTML 4.0 (December 1997) – Introduced the basic structure and elements for web coding; published by the W3C.
  • XML 1.0 (February–March 1998) – Enabled structured data storage within web pages.
  • XHTML 1.1 (May 2001) – A reformulation of HTML using XML rules for stricter syntax and compatibility.
  • HTML5 (First released January 2008) – Introduced advanced features like multimedia integration, animations, and enhanced user interface capabilities; developed by the W3C, with ongoing updates.

Getting Started with HTML Development

What You’ll Need:

  1. Text Editors:
    You can create and edit HTML pages using a wide range of text editors. Popular choices include:
    • Visual Studio Code
    • IntelliJ IDEA
    • Notepad++
    • EditPlus
    • Any other free or open-source text editor of your choice
  2. Online HTML Editors:
    For quick testing and real-time rendering, you can use online tools such as:
    • Rendera – Online HTML5 Editor
    • HTML CSS JavaScript – Free online editors and tools at html-css-js.com
    • CodePen – Real-time HTML/CSS/JS editor at codepen.io

Getting Started: Creating Your First HTML Page

  1. Open Notepad (or any plain text editor).
  2. Copy and paste your HTML code into the editor.
  3. Go to File > Save As…
  4. Set the following options:
    • Filename: Myfirstpage.html
    • Save as type: All Files
  5. Click Save to store your HTML file.

Opening Your First HTML Page

  • Double-click the Myfirstpage.html file to open it in your default web browser.
  • Alternatively, you can right-click the file and select “Open with” to choose a specific browser.

Creating the same HTML page using a different IDE

HTML Tags: An Introduction

Key Facts About HTML Tags:

  • HTML tags usually consist of an opening tag and a closing tag.
    Example: <p> ... </p>
  • Tag names are often abbreviations that reflect their function (e.g., <p> stands for “paragraph”).
  • Many tags can include attributes — additional details that define or modify the tag’s behavior or appearance.
  • HTML tags focus solely on design and layout. Functionality and interactivity are introduced later through scripting languages like JavaScript.

Overview of HTML Tags: Paragraph Tag

<p> ... </p> – Paragraph Tag

  • Used to group sentences or blocks of text into paragraphs.
  • Automatically adds space above and below each paragraph, creating visual separation.
  • Can include the align attribute to control text alignment (HTML 4.01 only).

Example:

<p align="right">Hello</p>

Syntax:

<p align="left | right | center | justify"> ... </p>

🔔 Note: In HTML5, the align attribute is deprecated. Instead, text alignment should be controlled using CSS.
Example using CSS:

<p style="text-align: right;">Hello</p>

Overview of HTML Tags: Heading Tags

HTML provides six levels of headings, used to define the importance or hierarchy of content on a page. Headings help organize content and improve readability and accessibility.

Syntax:

htmlCopy code<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Details:

  • <h1> is the largest and most important heading (typically used for main titles).
  • <h6> is the smallest and least important heading.
  • Headings are block-level elements and automatically add spacing above and below the text.
  • It’s recommended to use headings in order for better structure and SEO.

Overview of HTML Tags: <blockquote> Tag

The <blockquote> tag is used to indent and highlight a block of text, typically for quoting content from another source or emphasizing a long passage.

Purpose:

  • Visually sets the quoted text apart from the rest of the content.
  • Adds indentation by default, making it useful for improved paragraph structure or emphasis.

Syntax:

htmlCopy code<blockquote>
  ...text here...
</blockquote>

Example:

htmlCopy code<blockquote>
  "The only way to do great work is to love what you do." – Steve Jobs
</blockquote>

📝 For short, inline quotes, use the <q> tag instead.

Overview of HTML Tags: <br> – Line Break Tag

The <br> tag is used to insert a line break, forcing the following content to appear on the next line.

Key Points:

  • Written as <br> (or <br /> in XHTML for self-closing style).
  • It is a void tag, meaning it does not require a closing tag.
  • Commonly used within paragraphs or blocks of text where a new line is needed without starting a new paragraph.

Syntax:

htmlCopy codeThis is the first line.<br>
This starts on a new line…

🔔 Use <br> sparingly. For larger content separation, consider using paragraphs (<p>) or block elements.

Overview of HTML Tags: Text Style Tags – Bold, Italic, Underline

HTML provides tags to style text for emphasis, importance, or visual formatting.

Bold Text

  • Use either <strong> or <b> to make text bold.
  • <strong> is semantic, indicating importance.
  • <b> is presentational, focusing only on appearance.

Example:

htmlCopy code<strong>Our First Lesson</strong>
<b>This is bold text</b>

Italic Text

  • Use <em> or <i> to italicize text.
  • <em> adds emphasis (semantic), while <i> is purely stylistic.

Example:

htmlCopy code<em>HTML 5</em>
<i>This text is italic</i>

Underlined Text

  • Use the <u> tag to underline text.
  • <u> is presentational and should be used sparingly in modern HTML, as underline is often associated with links.

Example:

htmlCopy code<u>Read the lecture slides today</u>

📝 Tip: In HTML5, it’s better to use CSS for styling (e.g., font-weight, font-style, or text-decoration) for more control and cleaner code.

Overview of HTML Tags: Creating Hyperlinks

In HTML, you can create hyperlinks (or links) using the <a> (anchor) tag, which enables navigation to different pages, email addresses, or other resources.

Creating a Link:

  • The anchor tag <a> is used to define a hyperlink.
  • The href attribute specifies the destination of the link.

Syntax for a Basic Link:

htmlCopy code<a href="http://www.uel.ac.uk">Click here to visit UEL</a>
  • In this example, the text “Click here to visit UEL” will appear as a clickable link that navigates to the URL http://www.uel.ac.uk.

Creating an Email Link:

  • To make a link open the user’s default email client, use the mailto: protocol within the href attribute.

Syntax for an Email Link:

htmlCopy code<a href="mailto:N.Chooramun@uel.ac.uk">Click here to send an email</a>
  • Clicking this link will open an email draft to the specified address.

Tip: You can use any text or HTML elements inside the anchor tag to create descriptive or styled links.

Overview of HTML Tags:

overview of HTML Tags:

Class Activity: Understanding HTML Tags and Attributes

1. <p>

  • Meaning: Defines a paragraph of text.
  • Usage: Used to group sentences or blocks of text into a single unit for better readability.
  • Example: htmlCopy code<p>This is a paragraph of text.</p>

2. <b>

  • Meaning: Makes the enclosed text bold.
  • Usage: Primarily used for styling purposes (less commonly used in modern HTML since <strong> is preferred for indicating importance).
  • Example: htmlCopy code<b>This text is bold.</b>

3. <i>

  • Meaning: Italicizes the enclosed text.
  • Usage: Used for stylistic purposes, though <em> is better for indicating emphasis.
  • Example: htmlCopy code<i>This text is italicized.</i>

4. <a>

  • Meaning: Creates a hyperlink (anchor).
  • Usage: Used for linking to other web pages, email addresses, or resources. The href attribute specifies the destination.
  • Example: htmlCopy code<a href="http://www.example.com">Visit Example</a>

5. <h2>

  • Meaning: Defines a heading at level 2 (for subheadings).
  • Usage: Used to define hierarchical headings, with <h1> being the highest level (most important).
  • Example: htmlCopy code<h2>This is a level 2 heading</h2>

6. <br>

  • Meaning: Inserts a line break, moving content to the next line.
  • Usage: Often used inside paragraphs to create line breaks without starting a new paragraph.
  • Example: htmlCopy codeLine 1<br>Line 2

7. <blockquote>

  • Meaning: Indents and formats a block of text as a quotation.
  • Usage: Used to highlight or emphasize longer quotes.
  • Example: htmlCopy code<blockquote>"This is a quoted text."</blockquote>

8. <u>

  • Meaning: Underlines the enclosed text.
  • Usage: Used to underline text, although CSS is generally recommended for styling instead.
  • Example: htmlCopy code<u>This text is underlined.</u>

9. href

  • Meaning: Hypertext Reference – an attribute used in <a> tags to specify the destination of a link.
  • Usage: Defines the URL (Uniform Resource Locator) that the link points to.
  • Example: htmlCopy code<a href="http://www.example.com">Visit Example</a>

Overview of HTML Tags: Inserting Images

To insert an image into an HTML page, the <img> tag is used. This tag is self-closing and includes several important attributes to control the image’s source, size, appearance, and alternative text.

Attributes of the <img> Tag:

  1. src (Source):
    • Specifies the location of the image file.
    • Example: htmlCopy code<img src="sea.jpg">
    • You can also link to images stored in specific folders: htmlCopy code<img src="/images/sea.jpg">
    • Never link images using local file paths (e.g., C:/My Documents/Images/sea.jpg), as these will not work on other systems.
  1. border:
    • Adds a border around the image.
    • Example: htmlCopy code<img src="sea.jpg" border="1">
    • The value “1” creates a thin border around the image.
    • Note: In modern web design, borders are usually added through CSS for more flexibility.
  1. height & width:
    • Defines the fixed size of the image in pixels.
    • Example: htmlCopy code<img src="sea.jpg" width="500" height="400">
    • If the image’s aspect ratio is not maintained, this could distort the image.
    • It’s usually better to resize images in a graphics editor before uploading.
  1. alt (Alternative Text):
    • Provides alternative text for the image, which displays if the image fails to load or for accessibility purposes (screen readers).
    • Example: htmlCopy code<img src="sea.jpg" width="500" height="400" alt="Image of the beach and the sea">
    • This is important for SEO and accessibility.

Complete Example:

htmlCopy code<img src="sea.jpg" width="500" height="400" alt="Image of the beach and the sea">

📝 Note: Always provide alternative text (alt) for all images to improve accessibility.

Overview of HTML Tags:

Output of HTML Tags:

CSS

CSS stands for Cascading Style Sheets, and it is used to control the presentation and layout of a web page.

Key Points About CSS:

  • Created by Håkon Wium Lie at MIT in 1994.
  • CSS is typically written in a separate .css file, which is then linked to HTML files.
  • It is a W3C standard, meaning it’s an official specification for styling web pages.
  • Purpose: CSS allows you to define the visual style of HTML elements, including colors, fonts, spacing, layout, and more.
  • By using CSS, you can maintain consistency in the design across multiple web pages by applying a single stylesheet to all of them.

Advantages of CSS:

  • Separation of Content and Style: HTML handles the structure/content, while CSS handles the presentation.
  • Easier Maintenance: You only need to update one CSS file to change the design across multiple pages, making updates faster and easier

Advantages of CSS

1. Faster Page Production:

  • Reduces file size by separating style from content, resulting in quicker load times for web pages.

2. Improved Consistency:

  • Consistent Design: Using a single CSS file for styling ensures that all pages have a unified look and feel across the entire site.

3. Speeds Up Maintenance:

  • Global Control of Design: You can easily update the look and feel of your site by editing a single CSS file, instead of having to change the style on each individual HTML page.

4. Better Control:

  • Positioning: CSS provides advanced control over element positioning (e.g., using flexbox, grid, absolute, and relative positioning).
  • Consistent Layouts: Layouts can be defined and maintained across multiple pages, ensuring uniformity in design.

5. Better Search Rankings:

  • Cleaner Code: By separating HTML content from CSS styling, the code is simpler and more semantic, which improves the website’s indexing by search engines. This can contribute to better SEO performance.

Review of CSS Codes:

Review of CSS Codes: CSS Selectors

In CSS, selectors are used to target HTML elements and apply styles to them. These selectors are written in a way that allows you to define the appearance of different HTML tags (also called elements).

Example of Basic CSS Selectors:

  1. H1 Selector:
    This targets all <h1> tags in the HTML document and changes their text color to red. cssCopy codeh1 { color: red; }
  2. P Selector:
    This targets all <p> (paragraph) tags and changes their text color to blue. cssCopy codep { color: blue; }
  3. Body Selector:
    This targets the <body> tag and sets the background color of the entire page to red. cssCopy codebody { background-color: red; }

Next Steps:

We will now explore other CSS selectors and properties to style various HTML elements in more detail, such as:

  • Class selectors (e.g., .classname { ... })
  • ID selectors (e.g., #idname { ... })
  • Universal selectors (e.g., * { ... })
  • Pseudo-classes and pseudo-elements (e.g., :hover, ::before)

Review of CSS Codes

Today, we will cover how to control various aspects of an HTML page using CSS. These include backgrounds, font control, paragraph styling, headings, hyperlinks, and more.

What We Will Look At Today:

  1. Background:
    • Learn how to set background colors, images, and properties for different HTML elements.
  2. Font Control:
    • Control font family, size, style, weight, and other text-related properties.
  3. Paragraph Styling:
    • Adjust the appearance of paragraphs, including line height, text alignment, and margins.
  4. Headings & Other Elements:
    • Style headings (e.g., <h1>, <h2>, etc.) and other elements to maintain consistent design.
  5. Hyperlinks:
    • Style links using different states such as :hover, :visited, and :active.

CSS Placement and Consistency:

  • CSS can be applied in various places:
    • Inline (inside HTML tags)
    • Internal (within the <style> tag in the <head> section)
    • External (through an external .css file linked to the HTML)
  • Important: Regardless of where the CSS is placed, the syntax and rules remain the same.

Comments in CSS & HTML:

  • CSS Comments:
    In CSS, comments are written between /* and */. Comments are ignored by the browser and are useful for adding notes in the code. cssCopy code/* This is a CSS comment */ body { background-color: lightblue; }
  • HTML Comments:
    In HTML, comments are written between <!-- and -->. htmlCopy code<!-- This is an HTML comment -->

More Review of CSS Code: Background

The background property in CSS enhances the design of a webpage by controlling how backgrounds are displayed. Not only can you set a background for the <body> tag, but you can also apply backgrounds to other HTML elements like paragraphs, images, headings, and more.

CSS Background Properties:

  1. background-color:
    • Sets the background color of an element.
    • Example: cssCopy codebody { background-color: lightblue; }
  2. background-image:
    • Adds an image as the background of an element.
    • Example: cssCopy codebody { background-image: url('background.jpg'); }
  3. background-repeat:
    • Controls whether the background image repeats horizontally, vertically, or not at all.
    • Example: cssCopy codebody { background-image: url('background.jpg'); background-repeat: no-repeat; /* Prevents image from repeating */ }
    Other values for background-repeat:
    • repeat: The image repeats both horizontally and vertically (default).
    • repeat-x: The image repeats only horizontally.
    • repeat-y: The image repeats only vertically.

Example of Combining Background Properties:

cssCopy codebody {
  background-color: lightgray;
  background-image: url('beach.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Makes the image cover the whole page */
}

Applying Background to Other Elements:

You can apply these background properties to other elements such as paragraphs (<p>), headings (<h1>, <h2>), and images. Here’s how you can apply backgrounds to different elements:

cssCopy codep {
  background-color: yellow;
}

h2 {
  background-image: url('header-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

More Review of CSS Code: Background

In CSS, background properties are used to style the background of elements. Below are examples of how to use common background-related CSS properties:

1. background-color:

The background-color property sets the background color of an element.

  • Example: cssCopy codeh1 { background-color: red; }

This will set the background color of all <h1> tags to red.

2. background-image:

The background-image property allows you to set an image as the background for an element.

  • Example: cssCopy codebody { background-image: url('Background3.jpg'); }

This will set the background image of the entire webpage (i.e., the <body> element) to the image located at Background3.jpg.

3. background-repeat:

The background-repeat property defines whether the background image should repeat (tile) or not. The default behavior is to repeat both horizontally and vertically.

  • Example: cssCopy codebody { background-image: url('Background3.jpg'); background-repeat: no-repeat; }

In this example, the background image Background3.jpg will not repeat and will be shown only once.

Other Values for background-repeat:

  • repeat: The image will repeat both horizontally and vertically (this is the default).
  • repeat-x: The image will only repeat horizontally.
  • repeat-y: The image will only repeat vertically.
  • no-repeat: The image will not repeat.

Complete Example:

Here is an example of combining multiple background properties for styling:

cssCopy codebody {
  background-color: lightblue;
  background-image: url('background3.jpg');
  background-repeat: no-repeat;
  background-size: cover;  /* Makes the background image cover the entire page */
}

In this example:

  • The background-color is set to lightblue.
  • The background-image is set to background3.jpg.
  • The image does not repeat, and it is scaled to cover the entire page area.

CSS Font Control:

You can control various aspects of fonts using CSS. This includes the font style, size, weight, and color. These can be applied to most HTML tags that involve text, such as paragraphs, headings, and blockquotes.

  1. Font Style (font-family):
    • Controls the type of font used.
    • Example: cssCopy codep { font-family: "Arial"; }
    • You can also use font stacks, such as: cssCopy codep { font-family: "Times New Roman", "Serif"; }
  2. Font Size (font-size):
    • Controls the size of the text.
    • Example: cssCopy codep { font-size: 14px; }
  3. Font Weight (font-weight):
    • Controls the thickness of the text (e.g., bold, normal).
    • Example: cssCopy codep { font-weight: bold; }
  4. Font Color (color):
    • Controls the color of the text.
    • Example: cssCopy codep { color: red; }

Combining Multiple Font Declarations:

You can combine multiple CSS properties for an element in a single rule, separating each property with a semicolon (;).

  • Example: cssCopy codep { font-family: "Arial"; font-size: 14px; color: blue; }

Hyperlinks (a tag) States:

CSS allows you to style different states of hyperlinks using pseudo-classes. These include:

  • a:link – Normal, unvisited link.
  • a:visited – Link the user has already visited.
  • a:hover – Link when the mouse is hovering over it.
  • a:active – Link when it is clicked.

Example:

cssCopy codea:link {
  color: green; /* Color for normal links */
}

a:visited {
  color: yellow; /* Color for visited links */
}

a:hover {
  color: red; /* Color when mouse is over link */
}

a:active {
  color: blue; /* Color when link is clicked */
}

Writing Comments in HTML and CSS:

It’s a good practice to write comments in your code to help others (and yourself) understand it. Comments are ignored by the browser and do not affect the execution of the code.

  • HTML Comment: htmlCopy code<!-- This is a demo page -->
  • CSS Comment: cssCopy code/* This will color my links yellow */

Activity: Explain This CSS Code

Here’s the CSS code you need to explain:

cssCopy codeh1 {
  background-color: yellow;  /* Sets background color of <h1> to yellow */
  text-align: left;          /* Aligns the text in the <h1> tag to the left */
}

p {
  font-family: 'Arial';      /* Sets the font family for <p> to Arial */
  font-size: 12px;           /* Sets the font size of <p> to 12px */
  color: green;              /* Sets the text color of <p> to green */
}

a:link {
  color: blue;               /* Sets the color of unvisited links to blue */
}

a:visited {
  color: green;              /* Sets the color of visited links to green */
}

Explanation:

  • The h1 tag has a yellow background with text aligned to the left.
  • The p (paragraph) tag uses the Arial font, with a font size of 12px and green text.
  • The a:link selector sets the color of unvisited links to blue.
  • The a:visited selector sets the color of visited links to green.

How to Use CSS and HTML:

There are three primary ways to apply CSS styles to an HTML document:

  1. External Style Sheet:
    • This method completely separates the design (CSS) from the content (HTML).
    • The CSS rules are kept in a separate file, and the HTML file links to this external CSS file.
    • Advantages: It allows for easier maintenance, as you can update the design on all pages that use the same CSS file.
    Example: htmlCopy code<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>The style of this heading is determined by the style set in mystyle.css file</h1> </body> </html>
  2. Embedded Style:
    • The CSS is written within the HTML document, inside a <style> tag in the <head> section.
    • It overrides the external style sheet styles if they conflict.
    Example: htmlCopy code<html> <head> <style> h1 { color: blue; } </style> </head> <body> <h1>This heading will be blue due to the embedded style.</h1> </body> </html>
  3. Inline Style:
    • The CSS is applied directly within an HTML element, using the style attribute.
    • Inline styles override both external and embedded styles if they are specified for the same element.
    Example: htmlCopy code<h1 style="color: red;">This heading will be red due to the inline style.</h1>

How to Link HTML to CSS:

The most common method is to use an external style sheet. Here’s how you do it:

  1. Linking to an External Style Sheet: In your HTML file, use the <link> tag inside the <head> section to link to an external CSS file. Example HTML: htmlCopy code<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>The style of this heading is determined by the style set in mystyle.css file</h1> </body> </html>Explanation:
    • The href="style.css" specifies the path to the external CSS file. This file contains the styles that will be applied to the HTML document.
  2. Creating the CSS File: You will need to create a separate CSS file (e.g., style.css or textstyle.css) that contains the styles. Example CSS (textstyle.css): cssCopy codebody { background-image: url('Background3.gif'); } h1 { background-color: green; text-align: center; } p { font-family: 'Arial'; font-size: 14px; color: blue; } a:link { color: red; } a:visited { color: green; }Explanation:
    • The CSS file defines styles for different HTML elements:
      • body has a background image.
      • h1 has a green background and centered text.
      • p has Arial font, a font size of 14px, and blue text.
      • Links (a) have different colors depending on their state (link, visited).

Linking CSS to HTML:

In your HTML file, you need to link to the external CSS file in the <head> section:

htmlCopy code<link rel="stylesheet" type="text/css" href="textstyle.css" />

This will link the textstyle.css file, and the styles defined in that file will be applied to the HTML content.

Steps to Link and Use CSS in HTML:

  1. Create an External CSS File:
    Create a file named textstyle.css (or any other name you prefer) and add your CSS rules.
  2. Link the CSS File to Your HTML Document:
    In your HTML file, add the <link> tag inside the <head> section to link the external CSS file.
  3. Write Your HTML Content:
    Define your HTML structure, and the styles from the external CSS file will automatically be applied to the HTML elements.

Linking the CSS file

Applying the stylesheet

Before CSS
After CSS

How to Link HTML to CSS — Method 2: Embedded Style Sheets

An embedded style sheet allows you to include CSS directly within the <head> section of your HTML document using the <style> tag. This method overrides styles from an external CSS file if there are any conflicts.

When to Use:

  • Useful for small projects or when styling is only needed for a single HTML file.
  • Ideal when you want to customize or override styles locally without editing the external CSS.

✅ Example of Embedded CSS:

htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <title>Embedded CSS</title>
    <style type="text/css">
      h1 {
        color: green;
      }

      p {
        font-size: 14pt;
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Web Design with Embedded CSS</h1>
    <p>Did you expect the text to be 12pt and black?</p>
  </body>
</html>

🔍 Explanation:

  • <style> Tag: Defines CSS styles inside the HTML document.
  • CSS Rules:
    • h1 { color: green; } – Makes the heading text green.
    • p { font-size: 14pt; color: blue; } – Sets paragraph text to 14pt and blue.
  • This embedded CSS overrides any styles that might be coming from an external CSS file.

How to Link HTML to CSS — Method 3: Inline Style

Inline styles are applied directly to an HTML element using the style attribute. They override both embedded and external styles, making them the most specific form of CSS.

✅ When to Use:

  • For quick testing, one-off styling, or overriding other styles.
  • Not recommended for larger projects due to lack of reusability and cluttered HTML.

✅ Example of Inline CSS:

htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <title>I am an independent page!</title>
  </head>
  <body>
    <h1 style="color: green; font-size: 25px;">A Large Green Heading</h1>
  </body>
</html>

🔍 Explanation:

  • The style attribute is used inside the <h1> tag to directly apply CSS.
  • This sets:
    • color: green; → Text color of the heading.
    • font-size: 25px; → Size of the heading text.
  • This style overrides any h1 styles defined in embedded or external stylesheets.

Adding Comments to an HTML page

Adding comments to an CSS page

📚 Further Reading – Web Resources

Explore the following links to strengthen your understanding of HTML and CSS:

🏠 Personal Homework

✅ To prepare for the next lecture:

  1. Review the lecture slides thoroughly.
  2. Create your first HTML page at home using a text editor (e.g., Notepad, VS Code).
  3. Open the page in your web browser to test how it displays.
  4. If you encounter any issues, bring your work to your tutor next week for support.

✅ Are You Writing Valid HTML/CSS3?

Make sure your code is valid and error-free to ensure it displays correctly across all browsers.

🔍 Why Validate?

  • Ensures consistency across different web browsers.
  • Helps catch syntax errors early.
  • Encourages best coding practices.

🔗 Validation Tools:

***END OF THE TOPIC***

Leave a Comment

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