HTML With CSS

Prev Next

CSS (Cascading Style Sheets) is used to style and format the layout of web pages. It enhances the appearance of HTML elements by applying various styles like colors, fonts, spacing, and more.

Basic Structure of CSS

CSS consists of selectors and declaration blocks. A selector points to the HTML element you want to style. A declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon(;).

Syntex:

selector {
    property: value;
    property: value;
    }

Three Ways to Apply CSS

CSS can be applied to HTML documents in three different ways: Inline CSS, Internal CSS, and External CSS. Each method has its own use case and benefits.

    Inline CSS: Define CSS properties using style attribute in the HTML elements

    Internal or Embedded CSS: Define CSS using <style> tag in <head> section.

    External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. The CSS property is added directly within the style attribute of the HTML tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h3 style="color: blue; text-align: center;">WAY TO CODE TECHNOLOGIES</h3>
<p style="color: red; font-size: 20px;">This is a development company.</p>
</body>
</html>

Output:

WAY TO CODE TECHNOLOGIES

This is a development company.

Internal CSS (Embedded CSS)

Internal CSS is used to define styles for a single HTML document. The CSS rules are added within the <style> tag, inside the <head> section of the HTML file.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h3 {
color: blue;
text-align: center;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h3>WAY TO CODE TECHNOLOGIES</h3>
<p>This is a development company.</p>
</body>
</html>

External CSS

External CSS is used to apply styles to multiple HTML documents. The CSS rules are defined in a separate .css file, which is then linked to the HTML document using the <link> tag in then <head> section.

Example:

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>WAY TO CODE TECHNOLOGIES</h1>
<p>This is a development company.</p>
</body>
</html>

CSS File (styles.css):

body {
font-family: Arial, sans-serif;
}
h1 {
color: blue; text-align: center;
}
p {
color: red; font-size: 20px;
}

Commonly used CSS properties:

Property Name Syntax Description
background-color background-color: red; Sets the background color of the element.
color color: lightgreen; Sets the text color within the element.
padding padding: 20px; Adds space inside the element, between its content and border.
margin margin: 30px;
margin-left: 10px;		 Adds space outside the element, separating it from other elements.
font-family font-family: cursive; Specifies the typeface to be used for the element's text.
font-size font-size: 50px; Sets the size of the font for the element's text.
text-align text-align: left; Aligns the text within the element to the left.

Example:

.example {
background-color: red;
color: lightgreen;
padding: 20px;
margin: 30px;
font-family: cursive;
font-size: 50px;
text-align: left;
}

Prev Next