Lecture 4 – CSS Fundamentals, Layout & Positioning

Lecture 4 – CSS Fundamentals, Layout & Positioning

Introduction

In the previous lecture, we learned about:

  • HTML Links
  • Meta Tags
  • Lists
  • Tables
  • Introduction to CSS

In this lecture, we will learn:

  1. Inline CSS and Common CSS Properties
  2. HTML is a Game of Pixels
  3. The <div> Tag and Layered Technology
  4. Block Elements
  5. CSS Positioning
  6. CSS Comments
  7. Basic Website CSS Structure
  8. CSS & jQuery Selectors
  9. Difference Between ID and Class
  10. Margin, Padding and Float

1. Inline Style Sheet

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

Syntax

<tag style="property:value;">

Example

<h1 style="color:red;">
    Welcome to CSS
</h1>

Text Color

The color property changes text color.

Example

<p style="color:blue;">
    This text is blue.
</p>

Font Type

The font-family property changes the font style.

Example

<p style="font-family:Arial;">
    Welcome Students
</p>

Common Fonts

  • Arial
  • Verdana
  • Tahoma
  • Times New Roman
  • Georgia

Font Size

Used to control text size.

Example

<p style="font-size:20px;">
    Large Text
</p>

Line Height

Controls spacing between lines.

Example

<p style="line-height:30px;">
    This is line one.
    This is line two.
</p>

Text Align

Controls horizontal alignment.

Values

  • left
  • center
  • right
  • justify

Example

<p style="text-align:center;">
    Center Text
</p>

Text Decoration

Adds or removes text decoration.

Example

<p style="text-decoration:underline;">
    Underlined Text
</p>

Values

  • underline
  • overline
  • line-through
  • none

Text Transform

Changes letter case.

Example

<p style="text-transform:uppercase;">
    welcome students
</p>

Values

  • uppercase
  • lowercase
  • capitalize

Font Weight

Controls text thickness.

Example

<p style="font-weight:bold;">
    Bold Text
</p>

Values

  • normal
  • bold
  • 100–900

Border

Used to create borders around elements.

Example

<div style="border:1px solid black;">
    Content Here
</div>

Background Color

Changes element background color.

Example

<div style="background-color:yellow;">
    Welcome
</div>

Background Image

Adds an image as background.

Example

<div style="background-image:url(images/bg.jpg);">
</div>

Background Repeat

Controls image repetition.

Example

background-repeat:no-repeat;

Values

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

Background Position

Controls image placement.

Example

background-position:center center;

Other Values

  • top
  • bottom
  • left
  • right
  • center

2. HTML is a Game of Pixels

Everything displayed on a webpage is measured using pixels.

Examples:

width:300px;
height:200px;
font-size:14px;
margin:10px;

Why Pixels?

Pixels help developers control:

  • Width
  • Height
  • Position
  • Font Size
  • Layout

A good web designer understands measurements and spacing.

3. The DIV Tag

The <div> tag is one of the most important HTML elements.

DIV stands for:

Division

It is used to divide a webpage into sections or layers.

Example

<div>
    Header Area
</div>

Alternative Name of DIV

Developers often call DIV:

  • Container
  • Section
  • Layer
  • Box

Layered Technology

Websites are built using layers.

Example:

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

Each DIV creates a separate layer.

Overlapping Layers

One layer can overlap another layer.

Example

position:absolute;

Using positioning, one DIV can appear above another DIV.

4. Block Elements

Block elements occupy the full available width.

Examples:

<div></div>

<p></p>

<h1></h1>

<ul></ul>

Characteristics

  • Start on a new line
  • Have opening and closing tags
  • Occupy full width

Example

<div>
    Content
</div>

5. CSS Positioning

Positioning controls where elements appear on a webpage.

Static Position

Default position.

position:static;

Characteristics

  • Normal document flow
  • Default behavior

Relative Position

Moves element relative to its original position.

position:relative;
left:20px;
top:10px;

Absolute Position

Places element relative to its parent.

position:absolute;
left:100px;
top:50px;

Common Properties

left
right
top
bottom

Fixed Position

Element remains visible even when page scrolls.

position:fixed;
bottom:0;
right:0;

Example

.chat-box{
    position:fixed;
    bottom:20px;
    right:20px;
}

Important Note

The properties:

left
right
top
bottom

are commonly used with:

  • absolute
  • fixed

and can also be used with relative positioning.

6. CSS Comments

Comments help explain code.

They are ignored by browsers.

Syntax

/* This is a CSS Comment */

Example

/* Header Styling */

#header{
    background:#000;
}

7. Basic Website CSS Structure

Many developers start CSS with a reset.

Example

*{
    margin:0;
    padding:0;
}

Body Styling

body{
    background:#030303;
    font-size:12px;
    font-family:Arial, Verdana, sans-serif;
    color:#000000;
}

Explanation

PropertyPurpose
backgroundBackground color
font-sizeText size
font-familyFont style
colorText color

8. Selectors in CSS & jQuery

Selectors are used to target HTML elements.

Tag Selector

Targets HTML tags.

CSS

p{
    color:red;
}

HTML

<p>Hello</p>

Class Selector

Targets class attributes.

CSS

.box{
    background:yellow;
}

HTML

<div class="box">
    Content
</div>

ID Selector

Targets a unique element.

CSS

#header{
    background:black;
}

HTML

<div id="header">
</div>

jQuery Examples

Tag Selector

$("p")

Class Selector

$(".box")

ID Selector

$("#header")

9. Difference Between ID and Class

IDClass
UniqueReusable
Used once per pageUsed multiple times
Uses # symbolUses . symbol
Higher priorityLower priority

Example

<div id="header"></div>

<div class="box"></div>

<div class="box"></div>

10. Margin, Padding and Float

These are the most important layout properties in CSS.

Margin

Margin creates space outside an element.

Example

margin:20px;

Illustration

Outside Space
[ Element ]

Padding

Padding creates space inside an element.

Example

padding:20px;

Illustration

[  Content  ]

Float

Float is used to align elements left or right.

Example

float:left;

or

float:right;

Example Layout

<div style="float:left;">
    Left Column
</div>

<div style="float:right;">
    Right Column
</div>

Summary

In this lecture, we learned:

  • Inline CSS
  • Text Styling Properties
  • Background Properties
  • Pixel-Based Layout Concepts
  • DIV Tag and Layers
  • Block Elements
  • CSS Positioning
  • CSS Comments
  • CSS Reset and Body Styling
  • CSS & jQuery Selectors
  • Difference Between ID and Class
  • Margin
  • Padding
  • Float

In the next lecture, we will learn more advanced CSS concepts and start building complete webpage layouts.