Class 9 | Cascading Style Sheet | Website Design Notes

Class 9 | Cascading Style Sheet | Website Design Notes

CSS and Website Styling

Introduction to CSS

CSS stands for:

Cascading Style Sheets

CSS is used to control the appearance and layout of HTML webpages.

HTML mainly defines the structure of a webpage, while CSS controls how that webpage looks.

CSS can be used to control:

  • Colors
  • Fonts
  • Backgrounds
  • Borders
  • Spacing
  • Width and Height
  • Position
  • Navigation Bars
  • Shadows
  • Gradients
  • Responsive Layouts

Types of CSS

There are three common ways to apply CSS to an HTML document:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

Syntax

<tag style="property: value;">
    Content
</tag>

Example

<!DOCTYPE html>

<html>

<body>

    <h1 style="color: blue;">
        A Blue Heading
    </h1>

    <p style="color: red;">
        A Red Paragraph
    </p>

</body>

</html>

Advantages of Inline CSS

  • Easy for small changes
  • Applied directly to one element
  • Useful for quick testing

Limitation of Inline CSS

It becomes difficult to manage when many elements or webpages require the same styling.

2. Internal CSS

Internal CSS is written inside a <style> element in the <head> section of an HTML document.

Example

<!DOCTYPE html>

<html>

<head>

    <style>

        body {
            background-color: powderblue;
        }

        h1 {
            color: blue;
        }

        p {
            color: red;
        }

    </style>

</head>

<body>

    <h1>This is a Heading</h1>

    <p>This is a Paragraph.</p>

</body>

</html>

Advantages of Internal CSS

  • Useful for styling a single webpage
  • Keeps styles separate from most HTML content
  • Allows several elements to share styles

3. External CSS

External CSS stores CSS rules in a separate .css file.

The external stylesheet is connected to an HTML page using the <link> element.

HTML File

<!DOCTYPE html>

<html>

<head>

    <link
        rel="stylesheet"
        href="styles.css">

</head>

<body>

    <h1>This is a Heading</h1>

    <p>This is a Paragraph.</p>

</body>

</html>

styles.css

body {
    background-color: powderblue;
}

h1 {
    color: blue;
}

p {
    color: red;
}

Advantages of External CSS

  • One stylesheet can control many webpages.
  • Easier to maintain.
  • Reduces repeated CSS code.
  • Useful for larger websites.
  • Helps maintain consistent design.

Difference Between Inline, Internal and External CSS

Inline CSSInternal CSSExternal CSS
Written inside an HTML element.Written inside <style> in <head>.Written in a separate .css file.
Affects a specific element.Usually affects one webpage.Can affect many webpages.
Uses style="".Uses <style>.Uses <link>.
Good for small changes.Good for a single page.Best for multi-page websites.

CSS Selector

A CSS selector is used to select one or more HTML elements that will receive CSS styles.

CSS can select elements using:

  • ID
  • Class
  • Element Name
  • Grouping
  • Universal Selector

Types of CSS Selectors

The main selectors discussed in this chapter are:

  1. ID Selector
  2. Class Selector
  3. Element Selector
  4. Grouping Selector
  5. Universal Selector

1. ID Selector

The ID selector selects an HTML element using its id attribute.

An ID should normally be unique on a webpage.

The ID selector uses the # symbol.

HTML

<p id="intro">
    Welcome to CSS.
</p>

CSS

#intro {
    color: blue;
    text-align: center;
}

2. Class Selector

A class selector selects elements having a particular class value.

The class selector begins with a period ..

Example

<!DOCTYPE html>

<html>

<head>

    <style>

        .center {
            text-align: center;
            color: red;
        }

    </style>

</head>

<body>

    <h1 class="center">
        Red and Center-Aligned Heading
    </h1>

    <p class="center">
        Red and Center-Aligned Paragraph
    </p>

</body>

</html>

3. Element Selector

An element selector, also called a tag selector, selects HTML elements by their tag name.

Example:

<!DOCTYPE html>

<html>

<head>

    <style>

        body {
            background-color: red;
        }

        p {
            text-align: center;
            font-size: 20px;
            color: blue;
        }

    </style>

</head>

<body>

    <p>
        Hello World! This is a paragraph.
    </p>

</body>

</html>

4. Grouping Selector

The grouping selector applies the same CSS rules to multiple selectors.

Selectors are separated using commas.

Example:

h1,
h2,
p {
    text-align: center;
    color: red;
}

5. Universal Selector

The universal selector uses the * symbol.

It selects all elements.

Example:

* {
    text-align: center;
    color: blue;
}

CSS Background

CSS background properties control the background of HTML elements.

Important background properties include:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

The background-color property sets the background color of an element.

Example

body {
    background-color: lightblue;
}

Background Image

The background-image property sets an image as the background.

Example

body {
    background-image: url("paper.gif");
}

Background Repeat

The background-repeat property controls whether a background image repeats.

Common values include:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

Example:

body {
    background-image: url("gradient_bg.png");
    background-repeat: no-repeat;
}

Background Attachment

The background-attachment property determines whether the background scrolls with the page.

Example:

body {

    background-image: url("img_tree.png");

    background-repeat: no-repeat;

    background-position: right top;

    background-attachment: fixed;
}

Common values:

  • scroll
  • fixed

Background Position

The background-position property specifies the starting position of a background image.

Example:

body {

    background-image: url("background.gif");

    background-repeat: no-repeat;

    background-position: center;
}

CSS Borders

CSS border properties control the border around an element.

Important properties include:

  • border-style
  • border-width
  • border-color

Border Style

The border-style property specifies the appearance of a border.

Examples include:

  • solid
  • dotted
  • dashed
  • double
  • none

Example:

h1 {
    border-style: dotted;
}

Border Width

The border-width property specifies the thickness of the border.

Example:

p {
    border-style: solid;
    border-width: 2px;
}

Other values include:

border-width: thin;
border-width: medium;
border-width: thick;

Border Color

The border-color property sets the color of a border.

Example:

p {
    border-style: solid;
    border-color: red;
}

The border style should normally be defined before the border can be clearly displayed.

Border Shorthand Property

Several border properties can be written together:

p {
    border: 2px solid black;
}

This represents:

2px   → Width
solid → Style
black → Color

CSS Margin

Margin creates space outside an element’s border.

Main margin properties are:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Margin Example

div {

    border: 1px solid black;

    margin-top: 100px;

    margin-right: 150px;

    margin-bottom: 100px;

    margin-left: 80px;

    background-color: lightblue;
}

Margin Values

Margins can use values such as:

  • auto
  • Pixels
  • Percentage
  • Other CSS length units

Example:

div {
    margin: auto;
}

Margin Shorthand

div {
    margin: 20px;
}

This applies 20px margin to all sides.

Example:

div {
    margin: 10px 20px;
}

This means:

Top & Bottom → 10px
Left & Right → 20px

CSS Padding

Padding creates space between the content and the border of an element.

The main padding properties are:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Padding Example

div {

    border: 1px solid black;

    background-color: lightblue;

    padding-top: 50px;

    padding-right: 30px;

    padding-bottom: 50px;

    padding-left: 80px;
}

Difference Between Margin and Padding

MarginPadding
Space outside the border.Space inside the border.
Separates an element from other elements.Separates content from the element border.
Uses margin.Uses padding.

CSS Text Formatting

CSS provides many properties for controlling text.

Important properties include:

  • color
  • text-decoration
  • text-transform
  • text-shadow
  • text-align
  • letter-spacing
  • line-height
  • text-indent
  • white-space
  • word-spacing

Text Color

The color property sets the color of text.

Example:

h1 {
    color: blue;
}

p {
    color: green;
}

Text Decoration

The text-decoration property adds or removes text decoration.

Examples:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

a {
    text-decoration: none;
}

Text Transform

The text-transform property controls capitalization.

Common values:

  • uppercase
  • lowercase
  • capitalize

Example:

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

Text Shadow

The text-shadow property adds a shadow to text.

Example:

h1 {
    text-shadow: 2px 3px;
}

A shadow color can also be added:

h1 {
    text-shadow: 2px 2px 4px gray;
}

Text Alignment

The text-align property controls horizontal text alignment.

Values include:

  • left
  • right
  • center
  • justify

Example:

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

CSS Text Spacing

Important text-spacing properties include:

PropertyPurpose
letter-spacingSpace between characters
line-heightSpace between lines
text-indentIndentation of first line
white-spaceControls whitespace handling
word-spacingSpace between words

Letter Spacing

h2 {
    letter-spacing: 5px;
}

h3 {
    letter-spacing: -2px;
}

Line Height

The line-height property controls the vertical space between lines of text.

Example:

.small {
    line-height: 0.7;
}

.big {
    line-height: 1.8;
}

Text Indent

The text-indent property indents the first line of a text block.

Example:

p {
    text-indent: 50px;
}

White Space

The white-space property determines how spaces and line breaks are handled.

Example:

p {
    white-space: nowrap;
}

nowrap prevents the text from automatically wrapping to the next line.

Word Spacing

The word-spacing property changes spacing between words.

Example:

.one {
    word-spacing: 10px;
}

.two {
    word-spacing: -2px;
}

CSS Height and Width

The height and width properties control the dimensions of an element.

Example:

div {

    height: 100px;

    width: 500px;

    background-color: powderblue;
}

Maximum Width

The max-width property limits the maximum width of an element.

Example:

div {
    max-width: 800px;
}

This is useful when creating responsive layouts.

CSS Position

The position property controls how an element is positioned.

Common values include:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

Static Position

static is the default position.

.box {
    position: static;
}

The element follows the normal document flow.

Relative Position

A relatively positioned element is moved relative to its original position.

.box {

    position: relative;

    top: 20px;

    left: 20px;
}

Absolute Position

An absolutely positioned element is positioned relative to its nearest positioned ancestor.

.box {

    position: absolute;

    top: 50px;

    left: 50px;
}

Fixed Position

A fixed element stays in the same position relative to the browser viewport even when the page scrolls.

.box {

    position: fixed;

    top: 10px;

    right: 10px;
}

Sticky Position

A sticky element behaves like a relative element until it reaches a specified scroll position.

Example:

.navbar {

    position: sticky;

    top: 0;
}

CSS Float

The float property allows an element to move to the left or right, allowing surrounding content to wrap around it.

Common values include:

  • left
  • right
  • none
  • inherit

Float Left

.left {
    float: left;
}

Float Right

.right {
    float: right;
}

Clear Property

The clear property controls whether an element can appear beside floated elements.

Example:

.clear {
    clear: both;
}

CSS Overflow

The overflow property controls what happens when content is larger than an element’s defined box.

Common values include:

  1. visible
  2. hidden
  3. scroll
  4. auto

Overflow: Visible

.box {
    overflow: visible;
}

Content may extend outside the element.

Overflow: Hidden

.box {
    overflow: hidden;
}

Content extending beyond the box is hidden.

Overflow: Scroll

.box {
    overflow: scroll;
}

Scrollbars are provided.

Overflow: Auto

.box {
    overflow: auto;
}

Scrollbars are displayed only when necessary.

Overflow X and Y

Horizontal and vertical overflow can be controlled separately.

.box {
    overflow-x: auto;
    overflow-y: hidden;
}

CSS Box Model

The CSS Box Model describes how every HTML element is represented as a rectangular box.

The box model contains four main parts:

  1. Content
  2. Padding
  3. Border
  4. Margin

Structure of CSS Box Model

Margin
┌─────────────────────────────┐
│ Border                      │
│ ┌─────────────────────────┐ │
│ │ Padding                 │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Content             │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Content

The content area contains:

  • Text
  • Images
  • Other Elements

Its dimensions can be controlled using:

width:
height:

Padding

Padding creates space between the content and border.

Border

The border surrounds the content and padding.

Margin

Margin creates space outside the border.

Box Model Example

.box {

    width: 200px;

    height: 100px;

    padding: 20px;

    border: 5px solid black;

    margin: 10px;

    background-color: lightblue;
}

Total Width in Box Model

Using the default content-box sizing:

Total Width =
Width
+ Left Padding
+ Right Padding
+ Left Border
+ Right Border
+ Left Margin
+ Right Margin

Total Height

Total Height =
Height
+ Top Padding
+ Bottom Padding
+ Top Border
+ Bottom Border
+ Top Margin
+ Bottom Margin

CSS Navigation Bar

A navigation bar contains links that help users move between different parts of a website.

Common navigation bar types include:

  • Horizontal Navigation Bar
  • Navigation Bar with Dividers
  • Fixed Navigation Bar
  • Sticky Navigation Bar
  • Dropdown Navigation Bar

Horizontal Navigation Bar

Example:

<!DOCTYPE html>

<html>

<head>

    <style>

        body {
            font-family: Arial, sans-serif;
        }

        .navbar {
            overflow: hidden;
            background-color: #333;
        }

        .navbar a {

            float: left;

            display: block;

            color: white;

            text-align: center;

            padding: 14px 20px;

            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

    </style>

</head>

<body>

    <div class="navbar">

        <a href="#home">Home</a>

        <a href="#about">About</a>

        <a href="#services">Services</a>

        <a href="#contact">Contact</a>

    </div>

</body>

</html>

Navigation Bar with Border Divider

A divider can be added between links.

.navbar a {
    border-right: 1px solid #ddd;
}

.navbar a:last-child {
    border-right: none;
}

Fixed Navigation Bar

A fixed navigation bar remains visible while the user scrolls.

.navbar {

    position: fixed;

    top: 0;

    width: 100%;
}

Sticky Navigation Bar

A sticky navigation bar becomes fixed when it reaches a specified position.

.navbar {

    position: sticky;

    top: 0;

    width: 100%;
}

Dropdown Navigation Bar

A dropdown menu displays additional links when users interact with a menu item.

Example:

<div class="navbar">

    <a href="#home">
        Home
    </a>

    <a href="#about">
        About
    </a>

    <div class="dropdown">

        <button class="dropbtn">
            Services
        </button>

        <div class="dropdown-content">

            <a href="#service1">
                Service 1
            </a>

            <a href="#service2">
                Service 2
            </a>

            <a href="#service3">
                Service 3
            </a>

        </div>

    </div>

</div>

CSS:

.dropdown {
    float: left;
}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {

    display: block;

    color: black;

    padding: 12px 16px;

    text-decoration: none;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Advanced CSS Properties

The source discusses several additional CSS properties, including:

  • Rounded Corners
  • Border Images
  • Text Effects
  • Gradients
  • Shadows

CSS Rounded Corners

The border-radius property creates rounded corners.

Example:

.box {

    border-radius: 25px;

    background: #73AD21;

    padding: 20px;

    width: 200px;

    height: 150px;
}

Rounded Border Example

.box {

    border-radius: 25px;

    border: 2px solid #73AD21;

    padding: 20px;
}

CSS Border Image

The border-image property allows an image to be used as an element’s border.

Example:

.box {

    border: 20px solid transparent;

    border-image:
        url("border.png")
        30
        round;
}

Important related properties include:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS Text Effects

Important text-effect properties include:

  • text-overflow
  • overflow-wrap
  • word-break
  • writing-mode

Text Overflow

The text-overflow property controls how hidden overflowing text is shown.

Example using clipping:

.test1 {

    white-space: nowrap;

    width: 200px;

    overflow: hidden;

    text-overflow: clip;
}

Example using ellipsis:

.test2 {

    white-space: nowrap;

    width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;
}

Word Wrapping

Long words can be wrapped onto a new line using:

p {
    overflow-wrap: break-word;
}

The older word-wrap property name is also widely supported.

Word Breaking

The word-break property specifies line-breaking behaviour.

Examples:

.test1 {
    word-break: keep-all;
}

.test2 {
    word-break: break-all;
}

Writing Mode

The writing-mode property determines whether text flows horizontally or vertically.

Examples:

.horizontal {
    writing-mode: horizontal-tb;
}

.vertical {
    writing-mode: vertical-rl;
}

CSS Gradients

A gradient creates a smooth transition between two or more colors.

The source discusses:

  1. Linear Gradient
  2. Radial Gradient

Linear Gradient

A linear gradient changes colors along a straight line.

Syntax

background:
    linear-gradient(
        direction,
        color1,
        color2
    );

Example

.box {

    width: 300px;

    height: 200px;

    background:
        linear-gradient(
            to right,
            red,
            yellow
        );
}

Linear Gradient with Angle

.box {

    background:
        linear-gradient(
            45deg,
            blue,
            green
        );
}

Linear Gradient with Multiple Colors

.box {

    background:
        linear-gradient(
            to bottom,
            red,
            yellow,
            green,
            blue
        );
}

Radial Gradient

A radial gradient spreads colors outward from a central point.

Example:

.box {

    width: 300px;

    height: 200px;

    background:
        radial-gradient(
            circle,
            red,
            yellow
        );
}

Radial Gradient with Position

.box {

    background:
        radial-gradient(
            circle at left top,
            blue,
            green
        );
}

Radial Gradient with Multiple Colors

.box {

    background:
        radial-gradient(
            circle,
            red,
            yellow,
            green,
            blue
        );
}

CSS Shadows

CSS supports shadows for text and boxes.

Text Shadow

h1 {
    text-shadow: 2px 2px;
}

A more detailed example:

h1 {
    text-shadow: 2px 2px 5px gray;
}

Box Shadow

The box-shadow property adds shadow around an element.

Example:

div {
    box-shadow: 10px 10px;
}

Another example:

div {
    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.25);
}

CSS Measurement Units

CSS measurement units define:

  • Width
  • Height
  • Spacing
  • Font Size
  • Position

They can broadly be divided into:

  1. Absolute Units
  2. Relative Units

Absolute CSS Units

Examples include:

  • px
  • pt
  • cm
  • mm
  • in
  • pc

Pixels

.box {
    width: 200px;
    height: 100px;
}

px stands for pixels.

Points

p {
    font-size: 12pt;
}

1pt is traditionally defined as 1/72 of an inch.

Centimetres

.box {
    width: 5cm;
}

Millimetres

.box {
    width: 50mm;
}

Inches

.box {
    width: 2in;
}

Picas

.box {
    width: 2pc;
}

One pica equals:

1pc = 12pt

Relative CSS Units

Important relative units include:

  • %
  • em
  • rem
  • vw
  • vh
  • vmin
  • vmax
  • ch
  • ex

Percentage

.box {
    width: 50%;
}

The value is relative to another relevant dimension, commonly the containing block.

em

em is relative to font size.

Example:

.box {
    font-size: 2em;
}

rem

rem is relative to the font size of the root <html> element.

Example:

.box {
    font-size: 1.5rem;
}

Viewport Width

vw represents a percentage of viewport width.

.box {
    width: 50vw;
}

Viewport Height

vh represents a percentage of viewport height.

.box {
    height: 50vh;
}

vmin

vmin is based on the smaller viewport dimension.

.box {
    width: 50vmin;
}

vmax

vmax is based on the larger viewport dimension.

.box {
    width: 50vmax;
}

ch

ch is approximately based on the width of the 0 character in the selected font.

Example:

.box {
    width: 20ch;
}

ex

ex is based approximately on the x-height of the current font.

Example:

.box {
    height: 5ex;
}

CSS Website Design

CSS can be used to create the basic layout of a website.

Common website sections include:

  1. Header
  2. Navigation Bar
  3. Main Content
  4. Footer

Website Header

A header is generally located at the top of a webpage.

It may contain:

  • Logo
  • Website Name
  • Heading
  • Introduction

Example:

.header {

    background-color: #F1F1F1;

    text-align: center;

    padding: 20px;
}

Website Navigation Bar

A navigation bar provides links to important website pages.

Example:

.topnav {

    overflow: hidden;

    background-color: #333;
}

.topnav a {

    float: left;

    display: block;

    color: #f2f2f2;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;
}

.topnav a:hover {

    background-color: #ddd;

    color: black;
}

Website Content Layout

A webpage can use:

  • One-Column Layout
  • Two-Column Layout
  • Three-Column Layout

One-column layouts are particularly useful on smaller screens.

Multi-column layouts can be used when more screen space is available.

Three-Column Layout

.column {

    float: left;

    width: 33.33%;
}

.row::after {

    content: "";

    display: table;

    clear: both;
}

Responsive Layout

A responsive design adapts to smaller screens.

Example:

@media screen and (max-width: 600px) {

    .column {
        width: 100%;
    }

}

This changes the columns into a vertically stacked layout on smaller screens.

Website Footer

The footer is placed near the bottom of a webpage.

It may contain:

  • Copyright
  • Contact Information
  • Important Links
  • Company Information

Example:

.footer {

    background-color: #F1F1F1;

    text-align: center;

    padding: 10px;
}

Simple CSS Website Layout

<!DOCTYPE html>

<html>

<head>

    <title>Simple Website</title>

    <style>

        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .header {

            background-color: #f1f1f1;

            padding: 20px;

            text-align: center;
        }

        .topnav {

            background-color: #333;

            overflow: hidden;
        }

        .topnav a {

            float: left;

            color: white;

            padding: 14px 16px;

            text-decoration: none;
        }

        .topnav a:hover {

            background-color: #ddd;

            color: black;
        }

        .content {
            padding: 20px;
        }

        .footer {

            background-color: #f1f1f1;

            text-align: center;

            padding: 10px;
        }

    </style>

</head>

<body>

    <div class="header">

        <h1>My Website</h1>

    </div>

    <div class="topnav">

        <a href="#">Home</a>

        <a href="#">About</a>

        <a href="#">Contact</a>

    </div>

    <div class="content">

        <h2>Welcome</h2>

        <p>
            This is the main website content.
        </p>

    </div>

    <div class="footer">

        <p>
            Copyright © My Website
        </p>

    </div>

</body>

</html>

Quick Revision

CSS

CSS stands for:

Cascading Style Sheets

It is used to style HTML webpages.

Types of CSS

  • Inline CSS
  • Internal CSS
  • External CSS

CSS Selectors

  • ID Selector
  • Class Selector
  • Element Selector
  • Grouping Selector
  • Universal Selector

ID Selector

#name {
    color: red;
}

Class Selector

.name {
    color: red;
}

Element Selector

p {
    color: red;
}

Universal Selector

* {
    margin: 0;
}

Background Properties

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Border Properties

  • border-style
  • border-width
  • border-color

Margin

Space outside a border.

margin: 20px;

Padding

Space inside a border.

padding: 20px;

Text Properties

  • color
  • text-align
  • text-decoration
  • text-transform
  • text-shadow
  • letter-spacing
  • word-spacing
  • line-height

Position Values

  • static
  • relative
  • absolute
  • fixed
  • sticky

Overflow Values

  • visible
  • hidden
  • scroll
  • auto

CSS Box Model

Margin
  ↓
Border
  ↓
Padding
  ↓
Content

Rounded Corners

border-radius: 20px;

Text Shadow

text-shadow: 2px 2px 5px gray;

Box Shadow

box-shadow: 5px 5px 10px gray;

Linear Gradient

background:
    linear-gradient(
        to right,
        red,
        yellow
    );

Radial Gradient

background:
    radial-gradient(
        circle,
        red,
        yellow
    );

Common CSS Units

Absolute

  • px
  • pt
  • cm
  • mm
  • in
  • pc

Relative

  • %
  • em
  • rem
  • vw
  • vh
  • vmin
  • vmax
  • ch
  • ex

Important Exam Points

  • CSS stands for Cascading Style Sheets.
  • CSS is used to style HTML webpages.
  • CSS can be inline, internal, or external.
  • Inline CSS uses the style attribute.
  • Internal CSS uses the <style> element.
  • External CSS uses a separate .css file.
  • The <link> element connects external CSS to HTML.
  • CSS selectors select HTML elements for styling.
  • # represents an ID selector.
  • . represents a class selector.
  • * represents the universal selector.
  • Grouping selectors are separated by commas.
  • background-color changes background color.
  • background-image adds a background image.
  • background-repeat controls image repetition.
  • background-position controls background image position.
  • border-style controls border appearance.
  • border-width controls border thickness.
  • border-color controls border color.
  • Margin creates space outside the border.
  • Padding creates space inside the border.
  • color changes text color.
  • text-align controls text alignment.
  • text-transform changes text capitalization.
  • text-shadow creates text shadow.
  • letter-spacing controls spacing between letters.
  • word-spacing controls spacing between words.
  • line-height controls spacing between text lines.
  • width and height control element dimensions.
  • CSS positioning includes static, relative, absolute, fixed, and sticky.
  • float can move an element to the left or right.
  • overflow controls content that exceeds an element’s box.
  • The CSS Box Model contains content, padding, border, and margin.
  • Navigation bars can be horizontal, fixed, sticky, or dropdown.
  • border-radius creates rounded corners.
  • border-image can use an image as a border.
  • text-overflow: ellipsis can indicate clipped text.
  • CSS supports linear and radial gradients.
  • box-shadow creates shadows around elements.
  • CSS uses both absolute and relative measurement units.
  • %, em, rem, vw, and vh are relative units.
  • Media queries can create responsive website layouts.
  • A basic website layout may contain a header, navigation bar, content section, and footer.
KEEP LEARNING View All Posts

Discussion

Share a helpful question, idea, or explanation with other students.

Leave a Comment

Write a clear question, answer, or helpful explanation.
Your email will not be published.

Download Our Offline App

Study class-wise notes even when internet is not available. Get the app from Play Store.

Nepal eNotes offline app preview
Get it on Google Play