Introduction to CSS

  • CSS : It stands for Cascading Style Sheets
    • It describes how the HTML elements, background,text, and web page layout are displayed on the web page.
    • A single Cascading Style Sheet can control the styles of multiple pages, which allows for easier maintenance.
    • Click here for the Introduction to CSS
      • The Assignment is on the last page of the PDF file
  • CSS Implementation
    • Click here for the full notes and the assignment #1
      Download the file for assignment #1 : FILE
    • There are three ways of implementing the CSS code:
      • Inline Styles
        • It is an HTML style attribute that is placed only in the starting tags.
        • The styles only effects that specific tag that has the inline style.
        • Examples:
          <p style=“color:#FF0000;”> This Text is Red </p>

          <a href="menu.html" style=“color:#000000;text-decoration:none;”> This is a link </a>
      • Embedded (Internal) Style Sheets
        • The CSS is placed in the the head element
        • These styles are applied to the entire web page. But, it will only effect that specific web page that contains the Embedded Style Sheets
        • Example:
          <head>
          <meta charset="utf-8">
          <title> My Web Page </title>
          <style>
          p{color:#ff0000;} 
          </style>
          </head>
      • External Style Sheets
        • The CSS code is saved on a separate file with the file extension, *.*css
          • For an example:mystyles.css
        • A single external style sheet can control the styles and layout of multiple web pages at once.
        • Using external style sheets makes the maintenance of web sites easier because you can make the required changes once.
        • <link> tag is used to link the external style sheet to the web pages.
          This is placed inside the head section (<head>.. </head>
        • Example:
          <head>
          <meta charset="utf-8">
          <title> My Web Page </title>
          <link href="style.css" rel="stylesheet" type="text/css"> 
          </head>