OIM3690 - Web Technologies

contain

External and Inline Styles

Ways to Insert Styles

  • Internal CSS
    • Used this in previous classes
    • Styles are written within the HTML file using the <style> tag inside head.
  • Inline CSS
    • Used to apply a unique style for a single element
    • style attribute is added to the relevant element.
  • External CSS
    • Used to separate styles from HTML content
    • Styles are written in a separate .css file and linked to the HTML file using the <link> tag.

Inline Styles

  • Syntax:
    <tagname style="property: value; property: value; …">
  • Example:
    <p style="font-size:1.2em; color:blue">...</p>

Pros and Cons of Using Inline Styles

  • Pros:
    • It puts style near the element it modifies.
    • It avoids creating id selector.
  • Cons:
    • All styles are no longer in one place, making it difficult to maintain and update the overall design of the website.
    • Not a good alternative when same style is used multiple times
      • class should be used instead.
    • Harder to manipulate with JavaScript, as the style information is embedded within the HTML structure.
  • It is generally recommended to avoid using inline styles in favor of more maintainable and scalable CSS methodologies.

Exercise: ex07-1.html

  • Download ex07-1.html from GitHub (resources/templates).
  • View the page in web browser.
  • Use inline style on one of the paragraphs:
    • Add a background color
    • Change font-size to 18pt
      • It should override the internal style for the paragraph which was 12pt.
  • Update sitemap.html and commit/push to GitHub.

External Styles

  • Uses the same syntax as internal CSS
  • Styles appear in separate file.
    • The file extension is .css.
    • <style> tag is not needed in the .css file.
  • Why use external CSS?
    • It keeps website design and content separate for better organization
    • It enssures consistency across the website.
    • It is easier to change the overall look and feel of the website.

Applying External CSS

  • Insert one or more <link> tags into the <head> section:
    <head>
  <link rel="stylesheet" href="styles/xxx.css" />
</head>
    • styles/xxx.css (or css/xxx.css) is the path of the external stylesheet
  • If multiple external style sheets are used, later <link> tags override and add to earlier <link> tags.
  • See demos
    • lec07-demo-2.html with different .css files

Exercise: ex07-2.html

  • Download ex07-2.html from GitHub (resources/templates)
  • View the page in web browser.
  • Create an external style sheet, ex07.css, under styles folder
    • Cut internal style (inside style of ex07-2.html) and paste them into ex07.css
    • Add a <link> element to head of ex07-2.html.
    • View the page again - its appearance should not have changed.
  • Modify the external CSS file, ex07.css, by adding:
    • One id
    • One class
    • One advanced CSS selector
  • View the page again. Update sitemap.html and commit/push to GitHub.

Questions?

global styles