Class 021 — CSS Introduction
CSS (Cascading Style Sheets) is the language used to style and visually design HTML web pages. HTML creates the structure and content of a webpage, while CSS controls how that content looks.
With CSS, developers can control colors, fonts, backgrounds, spacing, borders, sizes, alignment, layouts, responsive designs, transitions and animations.
In this class, you will learn what CSS is, why it is important, basic CSS syntax, selectors, properties, values and the three main ways to add CSS to HTML.
LEARNING OBJECTIVES
After completing this class, you will be able to:
- Understand what CSS is.
- Know the full form of CSS.
- Understand why CSS is used.
- Understand the relationship between HTML and CSS.
- Understand basic CSS syntax.
- Identify selectors, properties and values.
- Use Inline CSS.
- Use Internal CSS.
- Use External CSS.
- Create a simple styled webpage.
WHAT IS CSS?
CSS stands for:
Cascading Style Sheets
CSS is a stylesheet language used to control the appearance and presentation of HTML documents.
HTML = Structure and Content
CSS = Style and Presentation
Example HTML:
Welcome to My Website
CSS:
h1 {
color: blue;
text-align: center;
}
The HTML creates the heading.
The CSS changes its color to blue and centers the text.
WHY DO WE NEED CSS?
HTML can create:
- Headings
- Paragraphs
- Images
- Links
- Forms
- Tables
- Lists
CSS controls how these elements look.
CSS can control:
- Text colors
- Background colors
- Font sizes
- Font families
- Width
- Height
- Margin
- Padding
- Borders
- Alignment
- Position
- Flexbox
- Grid
- Responsive design
- Transitions
- Animations
HTML AND CSS RELATIONSHIP
Think about a house.
HTML is the structure of the house.
CSS is the decoration and visual design of the house.
HTML:
Dinajpur IT Park
Welcome to our website.
CSS:
h1 {
color: darkblue;
}
p {
font-size: 18px;
}
HTML defines the content.
CSS defines how the content looks.
BASIC CSS SYNTAX
The basic CSS syntax is:
selector {
property: value;
}
Example:
h1 {
color: blue;
}
There are three important parts:
- Selector
- Property
- Value
SELECTOR
A selector identifies which HTML element should receive the CSS style.
Example:
h1
Here, h1 is the selector.
PROPERTY
A property defines what you want to change.
Example:
color
Other common properties include:
background-color
font-size
font-family
width
height
margin
padding
border
text-align
VALUE
A value defines the setting for a CSS property.
Example:
color: blue;
Property:
color
Value:
blue
COMPLETE CSS RULE
h1 {
color: blue;
font-size: 40px;
text-align: center;
}
Explanation:
h1 = Selector
color = Property
blue = Value
font-size = Property
40px = Value
text-align = Property
center = Value
CSS DECLARATION
A property and value pair is called a CSS declaration.
Example:
color: red;
Another example:
font-size: 20px;
Multiple declarations can be used:
p {
color: black;
font-size: 18px;
text-align: left;
}
THREE WAYS TO ADD CSS
There are three common ways to add CSS to HTML:
- Inline CSS
- Internal CSS
- External CSS
- INLINE CSS
Inline CSS is written directly inside an HTML element using the style attribute.
Example:
Hello World
Another example:
This is a paragraph.
Inline CSS is useful for quick or very small styling changes, but using it extensively can make larger projects difficult to maintain.
- INTERNAL CSS
Internal CSS is written inside a