MAQ Learning

HTML Styles

HTML allows you to add styles to your web content to change its appearance, such as colors, fonts, spacing, and more. Styles make your webpage visually appealing and engaging.

What are HTML Styles?

HTML styles are used to modify the appearance of HTML elements. Styles can change text color, font size, background color, and more.

How we can apply styles in HTML

There are three ways to apply styles in HTML 5.

  1. HTML Inline Styles: Applied directly within the HTML element using the style attribute.
  2. Internal Style Sheet: The <style> element can be included inside the <head>   </head> of the html document.
  3. External Style Sheet: Created in external style sheets(.css files) and linked to the HTML document.

HTML Inline Styles

One of the simplest methods to apply styles is through inline styles. Inline styles allow you to apply styling directly within individual HTML tags.

Syntax of HTML Inline Style

The syntax for adding inline styles involves adding a styleattribute to an HTML tag.

<tagname style="property: value;">
   Content
</tagname>

Examples of HTML Inline Style:

Here's a simple example using an inline style to change the color of a paragraph:

<p style="color: blue;">This is a blue paragraph.</p>

Explanation:

  1. <p>: This is an HTML tag representing a paragraph. The opening <p> tag indicates the beginning of the paragraph.
  2. style="color: blue;": This is the inline style applied to the paragraph. The style attribute is used to define the visual appearance of the element. In this case, it sets the text color of the paragraph to blue.
    • color: This is a CSS property that controls the text color.
    • blue: This is the value assigned to the color property, specifying that the text should be displayed in the color blue.

    So, the style attribute essentially says "apply the color blue to the text inside this paragraph."

  3. This is a blue paragraph.: This is the content of the paragraph, the text that will be displayed within the <p> tags.
  4. </p>: This is the closing tag for the paragraph, indicating the end of the paragraph section.

Changing Text Color

<p style="color: red;">This is a red text.</p> 

Setting Font Size

<p style="font-size: 18px;">This text has a font size of 18 pixels.</p> 

Background Color

<div style="background-color: #f2f2f2;">This has a light gray background.</div> 

Font Family

<p style="font-family: 'Arial', sans-serif;">This text uses the Arial font.</p> 

Adding Padding

<div style="padding: 20px;">This content has 20 pixels of padding.</div> 

Applying Multiple Styles to HTML Element

You can apply multiple styles to HTML element by separating each declaration with a semicolon. For instance, if you want to set both the font size and color of a paragraph:

<p style="font-size: 16px; color: green;">Styled paragraph.</p>

Pros and Cons of Inline Styles

Pros:

  1. Quick Application: Inline styles are easy to apply directly within the HTML tag, making them a quick solution for small-scale styling.
  2. Element-Specific Styling: Each element can have its own unique styles, providing granular control.

Cons:

  1. Code Maintainability: For larger projects, managing styles directly within HTML tags may become challenging and less maintainable compared to using external stylesheets.
  2. Limited Reusability: Styles applied inline are specific to individual elements and can't be reused across multiple HTML elements.

Best Practices for Using Inline Styles

  1. Use Sparingly: Inline styles can make HTML markup cluttered. Consider using external stylesheets for larger projects.
  2. Separation of Concerns: Reserve inline styles for quick, specific style changes on individual elements.

Internal Style Sheet

An Internal Style Sheet is a set of CSS (Cascading Style Sheets) rules embedded directly within an HTML document. These rules define how the HTML elements should be presented on the page.

Adding an Internal Style Sheet to HTML

Inside the <head> element, you can add a <style> tag to define your Internal Style Sheet.

<html>

<head>
  <!-- Internal Style Sheet goes here -->
  <style>
      /* Your CSS rules go here */
  </style>
</head>

<body>
    <!-- Your HTML content goes here -->
</body>

</html>

Applying Styles using Internal Style Sheet

>Now, let's apply styles to HTML elements within the Internal Style Sheet.

Example: Changing Text Color of Paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Define a style for the paragraph element */
        p {
            color: blue;
        }
    </style>

</head>
<body>
    <!-- Use the styled paragraph -->
    <p>This is a blue paragraph.</p>
</body>
</html>

Result:

[Image]

Explanation:

  • <style> tags are used to enclose the CSS rules.
  • The rule p { color: blue; } targets the <p> (paragraph) element and sets its text color to blue.

Applying Styles to Multiple Elements With Internal Style Sheet

You can apply styles to multiple HTML elements in an internal style sheet. 

Example: Setting H1 to Align Center and Changing Text Color of Paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Define a style for the h1 element */
        h1 {
            text-align: center;
        }
        /* Define a style for the paragraph element */
        p {
            color: blue;
        }
    </style>

</head>
<body>
    <!-- Use the styled heading h1 and paragraph -->
    <H1>This is Heading 1</H1>
    <p>This is a blue paragraph.</p>
</body>
</html>

Result:

[image]

Explanation:

  • <style> tags are used to enclose the CSS rules.
  • The rule h1 { text-align: center; } targets the <h1> (Heading 1) element and align it center.
  • The rule p { color: blue; } targets the <p> (paragraph) element and sets its text color to blue.

Multiple HTML <style> Elements in Internal Style Sheet

You can include two HTML <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      p {
        color: red;
        background-color: black;
        border: 1px solid black;
        }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>


</head>
<body>
    <!-- Use the styled paragraph -->
    <p>This is a blue paragraph.</p>
</body>
</html>

Result:

The styled paragraph will have blue text on a yellow background and a 1-pixel solid black border. The order of the style rules is important, and the last set of rules for a given property takes precedence.

[Image]

Explanation:

  • Internal Style Sheets: Inside the <head>, there are two <style> tags. Each <style> tag contains CSS rules for styling paragraphs (<p> elements).
  • The first set of rules (p { color: red; background-color: black; border: 1px solid black; }) specifies that paragraphs should have red text, a black background, and a black border with a thickness of 1 pixel.
  • The second set of rules (p { color: blue; background-color: yellow; }) overrides the color and background-color properties of the first set but does not specify a border.
  • <p>This is a blue paragraph.</p>: A paragraph element with the text "This is a blue paragraph." This paragraph will be styled according to the second set of rules, making the text blue with a yellow background. However, the border will be inherited from the first set of rules, so it will have a 1-pixel solid black border.

Including a Media Query in Internal style Sheet

You can include media attribute on the style element. In the following HTML code, there are two sets of style rules for the <p> (paragraph) element within an internal style sheet. Additionally, the second set of rules is specified to apply only when the viewport width is 500 pixels or less.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      p {
        color: red;
        background-color: black;
        }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>


</head>
<body>
    <!-- Use the styled paragraph -->
    <p>This is a test paragraph.</p>
</body>
</html>

Result:

The styled paragraph will have different styles based on the viewport width. When the viewport width is greater than 500 pixels, it will have red text on a black background. When the viewport width is 500 pixels or less, it will have blue text on a yellow background.

[images]

Explanation:

  1. Internal Style Sheets: Inside the <head>, there are two <style> tags. Each <style> tag contains CSS rules for styling paragraphs (<p> elements).
    • The first set of rules (p { color: red; background-color: black; }) specifies that paragraphs should have red text and a black background.
    • The second set of rules (p { color: blue; background-color: yellow; }) overrides the color and background-color properties of the first set but is limited to applying when the viewport width is 500 pixels or less.
  2. <p>This is a test paragraph.</p>: A paragraph element with the text "This is a test paragraph." This paragraph will be styled according to the first set of rules when the viewport width is greater than 500 pixels. When the viewport width is 500 pixels or less, it will be styled according to the second set of rules, making the text blue with a yellow background.

Pros and Cons of Internal Style Sheets

Pros:

  1. Ease of Use:
    • Simplicity: Internal Style Sheets are easy to implement, especially for beginners, as they are part of the HTML document itself.
    • Quick Styling: You can quickly apply styles to specific elements without creating separate external files.

  2. Element-Specific Styling:

    • Granular Control: Internal Style Sheets allow you to apply styles directly to specific HTML elements, providing granular control over the appearance of individual elements.

  3. Single Document Approach:

    • Single File: Styling information is contained within the same HTML file, making it convenient for small projects or simple web pages.

  4. Override Default Styles:

    • Priority: Internal styles have higher priority than external styles, which allows you to easily override default browser styles.

Cons:

  1. Limited Reusability:

    • Duplication: If you have similar styles for different elements across multiple pages, you may end up duplicating the CSS code within each HTML file, reducing reusability.

  2. Code Maintainability:

    • Complexity: As your project grows, maintaining styles within the HTML document can become challenging and may lead to code duplication.
    • Readability: Code readability might be affected, especially when dealing with extensive styles.

  3. Separation of Concerns:

    • Mixing Concerns: Combining HTML structure with styling information in the same document goes against the principle of separation of concerns, making it harder to manage and collaborate on larger projects.

  4. Limited Collaboration:

    • Collaboration Challenges: In collaborative development, having styles embedded in HTML may create challenges as developers working on different aspects of the project may need to navigate through the same file.

  5. Less Scalable for Large Projects:

    • Scalability: Internal Style Sheets are less scalable for large and complex projects where maintaining a consistent style across multiple pages is crucial.

Best Practices:

  • Use in Small Projects: Internal Style Sheets are suitable for small projects or simple web pages where the separation of concerns is less critical.
  • Consider External Styles: For larger projects, consider using external style sheets to maintain a cleaner structure and facilitate the separation of HTML and CSS.
  • Organize Styles: Even within internal style sheets, organize your styles logically and consistently to enhance maintainability.

HTML External Style Sheet

An External Style Sheet is a separate file containing CSS (Cascading Style Sheets) rules that define the visual presentation of HTML elements. By keeping styles in an external file, you can apply consistent designs across multiple web pages.

Creating an External Style Sheet

  1. Create a New File:

    • Open your preferred text editor (e.g., Notepad, Visual Studio Code).
    • Create a new file and save it with a .css extension, such as styles.css.

  2. Writing CSS Rules:

    • In your .css file, write CSS rules as you would inside <style> tags. For example:

      /* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

h1 {
    color: #333;
}

/* Add more styles as needed */

  3. Linking External Style Sheet to HTML:

    • In your HTML file(s), link the external style sheet using the <link> tag within the <head> section:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <!-- Other head elements go here -->
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

Applying Styles Using External CSS

Now that you have an external style sheet linked to your HTML file, you can apply styles to HTML elements by referencing the CSS selectors defined in the external file.

Example: Styling Headings

styles.css:

h1 {
    color: #3366cc;
}

h2 {
    color: #990000;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>External Style Sheet Tutorial</title>
</head>
<body>
    <h1>This is a styled heading level 1</h1>
    <h2>This is a styled heading level 2</h2>
    <!-- Add more HTML content as needed -->
</body>
</html>

Benefits of External Style Sheets

  1. Consistency Across Pages:

    • Styles defined in an external file can be applied consistently across multiple HTML pages, ensuring a unified design.

  2. Ease of Maintenance:

    • Making changes to styles becomes more manageable since modifications only need to be done in one external file.

  3. Improved Collaboration:

    • External style sheets facilitate teamwork as developers can work on HTML and CSS independently, promoting a cleaner separation of concerns.

  4. Efficient Browser Caching:

    • External style sheets can be cached by the browser, resulting in faster page load times for subsequent visits.

What Happens When Multiple Styles Are Applied to HTML Document

When multiple styles are applied to an HTML document using inline styles, internal style sheets, and external style sheets, the order of application and precedence is determined by the CSS specificity and the order in which the styles are declared. Here's the general hierarchy of precedence:

  1. Inline Styles:

    • Styles applied directly to an HTML element using the style attribute.
    • Highest specificity.
    • Takes precedence over internal and external styles.

  2. Internal Style Sheets:

    • Styles defined within the <style> tag in the HTML document's <head>.
    • Medium specificity.
    • Takes precedence over external styles but is overridden by inline styles.

  3. External Style Sheets:

    • Styles defined in separate CSS files linked to the HTML document using the <link> tag.
    • Lowest specificity.
    • Takes precedence over internal styles if linked later in the document but is overridden by inline and internal styles with higher specificity.

Order of Precedence:

  • Inline Styles (Highest)
  • Internal Style Sheets
  • External Style Sheets (Lowest)

HTML Styles - Interview Questions and Answers

  1. Which HTML attribute is used to define inline styles?

    • Answer: The style attribute is used to define inline styles.

  2. What are inline styles in HTML?

    • Answer: Inline styles refer to the application of CSS styling directly within HTML tags using the style attribute. This allows specifying CSS properties for an individual HTML element.

  3. How are inline styles applied in HTML?

    • Answer:
      • Inline styles are incorporated into HTML tags by using the style attribute. It is which is followed by CSS property-value pairs enclosed within quotes.
      • Example: <p style="color: red; font-size: 16px;">Text here</p>
  4. Can you use multiple styles in an inline style?
    • Answer: Yes, you can use multiple styles by separating them with a semicolon.

  5. What are the advantages of using inline styles?

    • Answer: Advantages include:
      • Inline styles allow simple and quick styling for certain elements without impacting other elements or having to create distinct CSS files.
      • They can override external or internal CSS rules, providing immediate control over an element's appearance.

  6. What are the limitations of using inline styles?

    • Answer:
      • Inline styles can lead to code repetition and reduced maintainability when applied to multiple elements, as each element's style must be individually defined.
      • They make it harder to maintain consistency and reuse styles across multiple pages.

  7. When should inline styles be used?

    • Answer:
      • Inline styles are best suited for small-scale, one-off styling adjustments or for prototyping purposes.
      • They are useful when immediate style changes are needed or for testing purposes.

  8. How do inline styles impact performance?

    • Answer:
      • Inline styles do not significantly impact initial page load times, but they can increase HTML file sizes when used extensively, potentially affecting overall performance.
      • They can cause delays in caching and lower effectiveness when styles are repeated over multiple elements.

  9. Do inline styles override other CSS styles?

    • Answer: Yes, inline styles have higher specificity and usually override external and internal CSS rules unless overridden by another inline style or a more specific CSS selector.

  10. Can inline styles be combined with other CSS methods?

    • Answer: Yes, inline styles can complement external or internal CSS by providing temporary or unique styling adjustments to individual elements without affecting the global style.

  11. Are there any SEO implications of using inline styles?

    • Answer: Inline styles themselves do not have direct implications on SEO. However, a well-structured and organized codebase, including separation of concerns between content and presentation, can indirectly impact SEO positively.

  12. What is an internal style sheet in HTML?

    • Answer: An internal style sheet is a set of CSS rules defined within the <style> tag in the HTML document's <head>. It allows you to apply styles directly to the elements within that HTML file.

  13. How do you include an internal style sheet in an HTML document?

    • Answer: You can include an internal style sheet using the <style> tag within the <head> section.

  14. What are the advantages of using an internal style sheet?

    • Answer: Internal style sheets provide a way to apply styles directly within the HTML file, making it suitable for small to medium-sized projects. They offer a balance between quick styling and a more organized approach than inline styles.

  15. How do you select and style an HTML element using an internal style sheet?

    • Answer: You can use CSS selectors within the <style> tag to select HTML elements and apply styles. For example:

  16. Can you have multiple internal style sheets in a single HTML document?

    • Answer: Yes, you can have multiple <style> tags in the <head> section, and each can contain its set of CSS rules.

  17. How do you prioritize conflicting styles in an internal style sheet?

    • Answer: CSS follows the rule of specificity and the order of appearance. Styles defined later in the document or with higher specificity take precedence.

  18. What is the difference between an internal style sheet and an external style sheet?

    • Answer: An internal style sheet is defined within the HTML document, while an external style sheet is a separate CSS file linked to the HTML file using the <link> tag. External style sheets are often preferred for larger projects for better organization and reusability.

  19. How do you comment within an internal style sheet?

    • Answer: You can use CSS comment syntax within the <style> tag, like this: 
      <style> /* This is a comment */ p { color: red; } </style>

  20. Can you use media queries in an internal style sheet?

    • Answer: Yes, media queries can be used within the <style> tag to apply styles based on the characteristics of the device, such as screen width.

  21. Explain the concept of specificity in CSS and how it applies to internal style sheets.

    • Answer: Specificity refers to the weight of a CSS rule. In internal style sheets, more specific selectors or rules take precedence over less specific ones. Understanding specificity is crucial when dealing with conflicting styles.

  22. What is an external style sheet in web development?

    • Answer: An external style sheet is a separate CSS (Cascading Style Sheets) file that contains styling rules for HTML elements. It is linked to HTML documents using the <link> tag.

  23. How do you link an external style sheet to an HTML document?

    • Answer: You can link an external style sheet using the <link> tag within the <head> section of the HTML document. For example: 
      <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>

  24. What are the advantages of using an external style sheet?

    • Answer: Advantages include:
      • Consistency: Styles can be applied consistently across multiple HTML pages.
      • Maintainability: Styles can be centralized in one file, making it easier to manage and update.
      • Reuse: The same style sheet can be linked to multiple HTML files, promoting code reuse.

  25. Can an HTML document link to multiple external style sheets?

    • Answer: Yes, an HTML document can link to multiple external style sheets by using multiple <link> tags.

  26. How do you prioritize conflicting styles in external style sheets?

    • Answer: CSS follows the rule of specificity and the order of appearance. Styles defined later in the document or with higher specificity take precedence.

  27. What is the purpose of the type attribute in the <link> tag when linking to an external style sheet?

    • Answer: The type attribute specifies the type of the linked resource. For CSS, the type attribute should be set to "text/css".

  28. Explain the concept of specificity in CSS and how it applies to external style sheets.

    • Answer: Specificity refers to the weight of a CSS rule. In external style sheets, more specific selectors or rules take precedence over less specific ones. Understanding specificity is crucial when dealing with conflicting styles.

  29. How do you include media queries in an external style sheet?

    • Answer: Media queries can be included in an external style sheet to apply styles based on the characteristics of the device. For example: 
      @media screen and (max-width: 600px) { /* Styles for small screens go here */ }

  30. What are some common best practices for using external style sheets in web development?

    • Answer: Best practices include:
      • Organization: Organize styles logically within the external style sheet.
      • Comments: Use comments to document and explain sections of the style sheet.
      • Consistency: Follow consistent naming conventions and coding standards.

  31. How does browser caching impact the performance of web pages using external style sheets?

    • Answer: External style sheets can be cached by the browser, leading to faster page load times for subsequent visits as the styles are already stored locally.

Summary

This tutorial offers a beginner-friendly introduction to applying styles in HTML. Experimenting with these styles can help beginners understand how to effectively modify the appearance of HTML elements.

Start experimenting with inline styles to enhance the visual appeal of your web content!