gdg_workshop 4 on web development HTML & CSS

CSS: Styling The Website
Learn the foundation of web development
Organised by: GDG-SRGI & Coding Club

Harsh Agarwal
Speaker
(Web Dev Lead)
Er. Aman Saluja
Faculty Advisor

Session 2
• Introduction to CSS
• Basics of CSS

What We’ll Cover Today:
• Doubts
• Basic to CSS

What is CSS?
• Definition: CSS (Cascading Style Sheets) is a stylesheet language that describes the
presentation of HTML documents, enabling separation of content and design.
• Purpose: It enhances the visual appeal of web pages by styling elements like fonts,
colors, margins, and layouts.
• Types: CSS can be applied as Inline, Internal, or External stylesheets for flexibility
and reusability.
• Advantages: Ensures consistency, supports responsive design, and simplifies
web development.
Introduction to CSS

Types of CSS
Inline CSS
•Applied directly within an HTML element using the style attribute.
Internal CSS
•Written inside a <style> tag within the <head> section of an HTML document.
.

External CSS
•Stored in a separate .css file and linked using the <link> tag.

• The <link> tag is used to connect external files like stylesheets (CSS) to
your HTML document.
Attributes
• rel: Specifies the relationship between the current document and
the linked file. For CSS, use stylesheet.
• href: Specifies the URL or path to the file.
• type (optional): Defines the MIME type, usually text/css.
Adding a Link to a CSS File

gdg_workshop 4 on web development HTML & CSS

Adding a Hyperlink to Another Page
• The <a> tag creates clickable links to navigate to other pages or resources.
Adding a Favicon (Browser Tab Icon)
•Use <link> to add a small icon displayed on the browser tab.

Linking Other Resources (e.g., Fonts)
• You can use <link> to add external resources like fonts.

COMMENTS
• Comments in CSS are used to explain code, make notes, or disable lines
during debugging. They are ignored by browsers and improve code
readability.

CSS Colors:
Implementation
1. Named Colors: Use predefined color names.
2. Hexadecimal: Use hex codes for precision

3. RGB/RGBA: Specify colors using red, green, blue, and alpha
for transparency.
Gradient: Smooth color transitions.

Shadow: Adds depth to elements.
1.Text Shadow:
2.Box Shadow:

BACKGROUND AND
BACKGROUND IMAGE
CSS background allows styling of elements' backgrounds with color, images,
gradients, or patterns.
• Background Color:
• Background Image

Box Model
The CSS box model consists of:
•Content: The actual element content.
•Padding: Space between content and border.
•Border: Edge around the padding.
•Margin: Space outside the border
Diagram:
This defines spacing and layout control for elements

BORDER AND ITS SHORTCUT
CSS Border:
The border property defines the edge around an element,
controlling its style, width, and color.
Individual Properties:
•border-width: Thickness of the border.
•border-style: Type of border (solid, dotted, dashed, etc.).
•border-color: Color of the border.
•Shortcut Syntax:
•Combine all properties in one line.
This creates a black, solid border with a width of 2 pixels. Simplifies code for clean layouts.

MARGINS ALL 4 AND THEIR
SHORCUT
CSS Margins:
The margin property defines the space outside an element's border, creating
separation between elements. Margins can be set for each side individually or
using a shorthand.
Individual Margin Properties
1. margin-top: Sets the top margin.

2.margin-right: Sets the right margin.
3.margin-bottom: Sets the bottom margin

4.margin-left: Sets the left margin.
Shorthand Syntax
Combine all margins into one property. The values are applied
in clockwise order: top, right, bottom, left.Syntax:

Auto Margin
Set margin: auto for automatic horizontal centering, commonly used with block
elements. Margins are essential for creating balanced layouts and controlling
spacing between elements effectively.

PADDING ALL 4 AND THEIR
SHORCUT
CSS Padding:
Padding refers to the space between an element's content and its border, ensuring proper
spacing inside the element. You can set padding for each side individually or use a
shorthand for convenience.
Individual Padding Properties:
1. padding-top: Sets the space above the content.

2.padding-right: Sets the space to the right of the content.
3.padding-bottom: Sets the space below the content.

4.padding-left: Sets the space to the left of the content.
Shorthand Syntax:
Combine all padding values into a single property. The values
are applied in clockwise order: top, right, bottom, left.Syntax:

HEIGHT AND WIDTH
CSS Height and Width:
The height and width properties are used to define the size of an element. These
properties determine how much space an element occupies in a web layout,
either fixed, flexible, or relative to its container.
Types of Values
1. Fixed Values: Use specific units like px, em, rem, or cm to
set a precise size.

2.Percentage (%):The size is relative to the parent element's dimensions.
3.Auto:Automatically adjusts size based on content.

4.Max/Min Properties:
Control the maximum and minimum dimensions of an element.
Importance
•Helps create responsive layouts.
•Defines proportions for elements.
•Ensures proper alignment and spacing.
•Height and width are crucial for controlling design structure
and maintaining a user-friendly layout.

TEXT
CSS Text Properties:
CSS provides various text properties to style and control text appearance,
enhancing readability and aesthetics.
Common Text Properties
1.color: Sets the text color.

2. font-size: Specifies text size in units like px, em, %, etc.
3.font-family: Defines the font style

4.text-align: Aligns text (left, right, center, or justify).
5.line-height: Adjusts the space between lines.

6.text-decoration: Adds or removes effects like underline, overline, or
strike-through.
7.text-transform: Changes text case (uppercase, lowercase,
capitalize).
Text properties help create visually appealing and readable
content, aligning with design goals.

FONT
CSS Font Properties:
CSS font properties control the appearance and style of text, allowing designers to
create visually appealing typography.
Common Font Properties
1. font-family: Specifies the font type, using a primary font and
fallback options.

2. font-size: Sets the size of the font, using units like px, em, %,
or rem.
3.font-weight: Defines the thickness of text (e.g., normal, bold,
lighter, or numeric values like 400, 700).

4.font-style: Sets the font to normal, italic, or oblique.
5.font-variant: Controls small-caps text.

6.Shorthand Property: Combines multiple font properties.
Font properties enhance text appearance, improving readability and aligning with
the design's tone and style.

LINKS
Common Link Properties
1. color: Sets the color of the link text.
CSS Links Properties:
CSS offers several ways to style and control the appearance of links (<a> elements),
improving the user experience and design.

2. text-decoration: Controls text effects like underline, overline, or none.
3.hover: Changes link appearance when hovered.

4. active: Styles the link when clicked.
5. visited: Alters the color of a link once it has been visited.
By applying these properties, you can create visually appealing and interactive
links that provide better navigation and design.

DISPLAY:RELATIVE AND ITS ALL TYPES
AND DETAILS WITH EXAMPLE
CSS Display Property: Relative and Its Types
The display property in CSS controls the layout behavior of an element. It
determines how the element behaves in the document flow, either as a block,
inline, or other layout types
position: relative
Definition: The relative position property allows an element to be positioned
relative to its normal position in the document flow. It does not remove the
element from the flow, so other elements are positioned around it as though it
hasn't been moved.

Usage:
In this example, the element will be shifted 20px down and 30px to the right from
where it would normally be placed. The space originally allocated for it
remains unchanged.

Types of display Property:
1.block:
Makes an element a block-level element, occupying the full width and starting on a
new line.
Example:
2. inline:
Makes an element inline, so it only takes up as much width as necessary and does not
start on a new line.
Example:

3. inline-block:
Combines properties of both block and inline. Elements behave like inline elements
but can have width and height values.
Example:

4. none:
Hides the element completely, removing it from the document flow.
Example:
5. flex:
Defines a flex container, making its children flexible and aligned
according to the flex model.
Example:

6.grid:
Defines a grid container, enabling a grid-based layout for its children.
Example:
By using these display types, you can control how elements are displayed, allowing
for responsive and dynamic layouts.

POSITION
The position property determines how an element is positioned within the document.
Types:
static (default):
Elements are positioned in the normal document flow.relative:
Positioned relative to its normal position
absolute: Positioned relative to the nearest positioned ancestor.fixed: Positioned
relative to the viewport, not scrolling with the page.sticky: Toggles between
relative and fixed based on scroll position

CSS Z-Index
The z-index property controls the stack order of elements on the web page, determining
which element appears in front or behind others.Higher Values: Elements with higher z-
index appear on top.Default: The default value is auto.Usage:
It works only on positioned elements (relative, absolute, fixed). Useful for overlapping
content like modals, tooltips, or banners.

Overflow
CSS Overflow
The overflow property manages how content exceeding an element's
dimensions is displayed.
Values:
•visible (default): Content spills outside the element.
•hidden: Hides overflowing content.
•scroll: Adds scrollbars for overflowing content.
•auto: Adds scrollbars only if content overflows

FLOAT
CSS Float
The float property is used to position elements to the left or right of their container,
allowing other elements to flow around them.
Values:
left: Floats the element to the left.
right: Floats the element to the right.
none: Default; no floating.

INLINE,BLOCK
CSS Inline and Block Elements
HTML elements are categorized as inline or block based on their display behavior.
Inline Elements
Do not start on a new line.
Take up only as much width as necessary.
Cannot have width or height applied directly.
Examples: <span>, <a>, <strong>

gdg_workshop 4 on web development HTML & CSS

Recommended

More Related Content

Similar to gdg_workshop 4 on web development HTML & CSS (20)

More from SaniyaKhan484230 (7)

Recently uploaded (20)

gdg_workshop 4 on web development HTML & CSS