Cascading Style Sheets(CSS)

Dhanush P — Fri, 15 May 2026 17:30:43 +0000

Introduction to CSS

CSS stands for Cascading Style Sheets.
CSS used to describe the presentation of a HTML document.
It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing and positioning.
CSS styles are applied to the HTML element using selectors.

CSS Syntax

CSS syntax consists of a selector and a declaration block.
The selector targets an HTML element, and the declaration block contains property value pairs.

selector {
   property: value;
}

Example:

p {
  color: red;
}

Types of CSS

There are three major ways to apply CSS to web pages: Inline, Internal and External CSS.

1. Inline CSS

It is used to apply CSS styles directly to the HTML tags by using the “style” attribute.
The style attribute is a global attribute that can be used with all HTML tags.
Inline CSS is used to apply a unique style to a single HTML element.

Example: Using Inline Style to Apply CSS
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

2. Internal CSS

It uses the <style> tag, placed under the <head> section, and all the CSS properties are written under the <style> tag.
It is used to define a style for a single HTML page.
This styles affects all matching elements in that document.

Example: Using Internal Style to Apply CSS

<!DOCTYPE html>
<html>
<head>
    <title>Internal Style</title>
    <style>
        body {
           background-color: lightblue;
        }
        h1 {
           font-size: 40px;
           color: navy;
           text-align: center;
        }
    </style>
</head>
<body>
    <h1>Example for Internal Style Sheet</h1>
</body>
</html>

3. External CSS

External CSS is written in a separate file, which is saved with a .css extension, and linked to the HTML file by using the <link> tag in the <head> section.
CSS file must not contain any HTML code.

Example: Use External Style to Apply CSS
// index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Example for External Style Sheet</h1>
</body>
</html>

// style.css

body {
  background-color: lightcoral;
}
h1 {
  font-size: 50px;
  text-align: center;
}

What is Selectors?

Selectors are used to target the HTML elements on our web pages that we want to style.
Used to select HTML elements based on tag name, class, id, or attributes.
It helps apply styles like color, font, spacing, and layout.

Selector Types(Basic)
1.Element selector h1, p, body
2.Class Selector .class-name
3.Id selector #id-name
4.Global selector * (apply this for entire website)

CSS Properties:

border: 2px solid blue; - Allows you to define an outline around an HTML element.
margin: 5px; - Used to create space outside of element's border.
padding: 5px; - Used to create space inside of element's border.
text-align: center; - Specifies the horizontal alignment of text in an element.
text-decoration: none; - Specifies the decoration added to text.
border-radius: 10px; - Defines the radius of the element's corners.
display: grid; - How an element is displayed on a webpage.
grid-template-columns: 1fr 2fr; - Defines the number and size of columns in a grid layout.
justify-content: space-around; Aligns the flexible container's items

Day 1: HTML Learning

Dhanush P — Tue, 12 May 2026 10:21:38 +0000

HTML

HTML stands for Hypertext Markup Language.
It is used to create structure and layout of web pages.
It defines basic structure of web pages and contains meta-data about the page.
It uses predefined tags such as <body>, <table>, <form> etc.
It consist of a series of elements.
We can save html files using two ways. file extension .html or .htm

<!DOCTYPE html>
<html>
     <head>
        <title>HTML Learning</title>
     </head>
     <body>
        <h1>Heading 1</h1>
        <p>Html stands for hypertext markup language</p>
     </body>
</html>

META-DATA

Metadata means data about data.
It is data that provides information about other data, offering context and meaning to raw information.

Examples: For a photograph, metadata includes camera settings, date/time taken, GPS location, and file format. For a document, it includes author, creation date, and document type.

ELEMENT

Each element requires starting tag and ending tag with content inside it. Example: <h2>This is example for element</h2>

MARKUP LANGUAGE

A markup language is a system of annotating a document to describe its structure and presentation.
Markup languages are used to structure, format, or define relationships between different parts of text documents with the help of tags inserted in the document.
It uses tags or codes to define elements such as headings, paragraphs, lists, images, links, and more.
More readable than usual programming.
Example: HTML, XML, XHTML, SGML

FILE EXTENSION

A file extension is a suffix at the end of a computer filename.
It usually three or four letters preceded by a dot.
That identifies the file type and indicates which application should open it. Example: .pdf, .txt, .jpg, .java, .html, .css

DEV Community: Dhanush P

Cascading Style Sheets(CSS)

Day 1: HTML Learning