Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
18 views

CSS - Part 1

Uploaded by

sonicmaster553
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

CSS - Part 1

Uploaded by

sonicmaster553
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Presentation 01

CSS Content Styling


01. CSS Basics

1
● Introduce Trainer

2
Agenda
Week 1st Week
Day
Duration 4hrs

TIME TOPIC & ACTIVITY COMPLETED-


30 Mins Introduction to CSS basics Yes/No
60 Mins Applying styles - The style Yes/No
attribute
15 Mins Break Yes/No
45 Mins CSS rules Yes/No
The style tag

30 Mins CSS in External Files Yes/No


30 Mins Q&A Session on lesson Yes/No
learnt
15 Mins Break Yes/No
60 Mins Teacher Demonstration on Yes/No
CSS styling
15 Mins Group Discussion Yes/No 3
Learning Objectives

● 1. Embedding CSS within an HTML document

● 2. Understand the CSS syntax

● 3. Add comments to CSS

● 4. Awareness of accessibility features and


requirements

4
Introduction

Web browsers display HTML pages using basic rules that may
not look very attractive. To make web pages visually appealing,
we use Cascading Style Sheets (CSS).

CSS allows developers to change the fonts, colors, and


arrangement of elements on the page. It ensures that the web
page looks good on different devices and screen sizes.
Introduction
1. Web browsers use default presentation rules for rendering HTML pages,
which may not be visually appealing.

2. HTML alone lacks features to create elaborate pages based on modern


user experience concepts.

3. To improve the visual appearance, CSS is used to define rules for


presentation, such as fonts, colors, and element placement.

4. HTML and CSS separate semantic (structure and function) content from
visual presentation, allowing greater flexibility in design.

5. Unlike fixed layouts in PDF files, HTML web pages are designed to be
adaptable to different screen sizes and devices.

6. CSS provides tunable options to ensure proper rendering of web pages


across various devices and applications.
Applying Styles
There are several ways to include CSS in an HTML document. Write directly in
element’s tage, in a separate section of the page’s source code or in an external file to
be referred by the HTML page.

Using the Style Attribute of element

<p style="color: purple; font-size: larger">


My first stylized paragraph
</p>

Using the Style tag inside the <head> or <body> section of the document
<style type="text/css">
p { color: purple; font-size: larger } .
</style>

CSS in External files. These .css files get cached by the browser

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


Break Time - 15 Mins
CSS Rule
Element placement (Inline / Block)
1. Every element in the page can be manipulated as a rectangle or box
using CSS.
2. Two basic standard concepts for element placement: block placement
and inline placement.
3. Block elements occupy all horizontal space of their parent element and
are placed sequentially from top to bottom.
4. Height of block elements generally depends on the amount of content
they have.
5. Inline elements follow left-to-right placement similar to Western written
languages.
6. Inline elements are placed horizontally from left to right until there is no
more space, then they continue on a new line below the current one.
7. Elements like p, div, and section are placed as blocks by default.
8. Elements like span, em, a, and single letters are placed inline.
9. CSS rules can fundamentally modify these basic placement methods.
Content, Padding, Margin and Border
Content, Padding, Margin and Border
Four fundamental properties in CSS that play a crucial role in shaping the layout and appearance of
elements are `content`, `padding`, `margin`, and `border`.

1. Content
a. content is not just a property; it represents the actual content within an HTML element,
such as text or images.
b. In CSS, the `::before` and `::after` pseudo-elements are often used to insert content
before or after an element's actual content.

p::before {
content: "Before text: ";
}

2. Padding
a. padding is the space between the content of an element and its inner edge (border). It
creates internal spacing within the element.
b. It can be set individually for each side (top, right, bottom, left) or using shorthand
properties like `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.

div {
padding: 20px;
}
Content, Padding, Margin and Border
3. Margin
a. margin is the space between an element's outer edge and adjacent elements. It controls
the spacing between elements on a webpage.
b. Like padding, margins can also be set individually for each side or with shorthand
properties (`margin-top`, `margin-right`, `margin-bottom`, `margin-left`).

h1 {
margin: 10px 0;
}

4. Border
a. border` is the line or border around an element's content and padding. It can be used to
create visual boundaries for elements.
b. You can define the border's width, style, and color using properties like `border-width`,
`border-style`, and `border-color`.

img {
border: 2px solid #333;
}

By adjusting the `content`, `padding`, `margin`, and `border` of elements, a precise control over the
spacing, borders, and overall presentation of the web content can be achieved.
CSS Rules

Structure
● The basic syntax of a CSS rule is ,
selector { property: value }

Grouping Properties
● Multiple properties can be grouped together within a rule, separated by
semicolons.
p { color: purple; font-size: larger }

Inheritance
● A CSS rule for a parent element automatically applies to its children
elements.
● Example: Styles applied to <body> would affect all text on the page, inside or
outside <p> tags.
The <Style> Tag

The <style> tag lets us write CSS rules inside the HTML page we want to style. It
allows the browser to differentiate the CSS code from the HTML code. The <style>
tag goes in the head section of the document
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS In External Files
Benefits of External CSS Files
● Enables sharing styling rules across multiple HTML documents.
● Browser caching improves loading times for subsequent visits.

File Extension and Editing


● CSS files have the .css extension and can be edited with any plain text editor.

File Structure
● Unlike HTML files, CSS files lack hierarchical tags like <head> or <body>.
● CSS files are simply lists of rules processed sequentially by the browser.

Linking CSS in HTML


● The <link> tag in the <head> section of HTML is used to define an external stylesheet for
the current document.

16
Placing CSS Rules in External File
● The CSS rules can be placed in the style.css file, yielding the same results for
webpage visitors.
● If the CSS file is not in the same directory as the HTML document, its relative or full
path should be specified in the href attribute of the <link> tag.

Relationship Definition in <link> Tag


● The <link> tag can refer to various types of external resources. For CSS files, the
relationship is established using rel="stylesheet".

17
Q&A Session
Questions

1. What methods can be used to change the appearance of HTML


elements using CSS?
2. Why is it not recommended to use the style attribute of the
tag if there are sibling paragraphs that should look the same?
3. What is the default placement policy for placing a div element?
4. What attribute of the tag indicates the location of an external CSS file?
5. What is the correct section to insert the link element inside an HTML
document?

18
Break – 15 Mins

19
Teacher Demonstration – 30 Mins

20
Group Discussion
1. Why is it not recommended to use a tag to identify a word in an
ordinary sentence?
2. What happens if you start a comment with /* in the middle of a CSS
file, but forget to close it with */?
3. Why is it not recommended to use the style attribute of the
tag if there are sibling paragraphs that should look the same?
4. How can you indicate that a stylesheet from a <style> or <link> tag
should be used only by speech synthesizers?

21
Learning Objectives

● 1. Embedding CSS within an HTML


document

● 2. Understand the CSS syntax

● 3. Add comments to CSS

● 4. Awareness of accessibility features and


requirements
22
• Thank you/Any questions/Don’t
forget to leave feedback

23

You might also like