HTML CSS

Till now we learn the HTML let learn jow we style using css.
CSS stands for Cascading Style Sheets.
Used to describe the form of a HTML or XML pages.
CSS saves a lot of work.
It allows designers and developers to create and control multiples layout of all webpages at a time.
CSS allows wide range of properties and methods.

It applies styles like fonts, color, size, etc.
Different styles can be applied to a web page in multiple ways.
Control's the layout of a webpage.
We can create high animations and transitions.
bulids a responsive and attrative web pages.

Types in CSS

There are 3 main types to apply css in a webpage

Inline CSS - We add styles in style attribute inside HTML elements.
Internal CSS - declares styles in the <head> section with <style> element.
External CSS - we add an external CSS file to the webpage with <link> element.

Inline CSS

Used to apply a unique style to a particular HTML element.
style attribute is used for an HTML element.
It is typically usefull for small, one-off style changes to specific elements.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Example</title>
</head>
<body>
  <p style="color:orange;">This Paragraph uses inline CSS </p>
<p style="background-color: green;border-radius:5px;padding:5px;">This Paragraph uses inline CSS </p>
</body>
</html>

Run

Internal CSS

Used to apply styles to a specific HTML page.
It is defined in the head section of an HTML page, within a style element.
it is typically usefull to set same styles to different elements in a webpage

Example

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <style>
      body {
        background-color: grey;
      }
      h1 {
        background-color: white;
        padding:10px;
        border-radius:5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>A paragraph text.</p>
  </body>
</html>

Run

External CSS

Used to define the style for many HTML pages.
Add a link to it in the <head> section of each HTML page to use an external style sheet.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Run

Example

body {
    background-color: grey;
}
h1 {
    background-color: white;
    padding:10px;
    border-radius:5px;
    text-align: center;
}

Run

Quick Recap - Topics Covered

CSS

Inline CSS

Internal CSS

External CSS

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

HTML CSS

Types in CSS

Inline CSS

Internal CSS

External CSS

Example

Quick Recap - Topics Covered

Practice With Examples in Compilers

Quiz