Course : Web Design
Group : Team 10
Generation : 10
Date : August 26, 2025
Prepare by: Ith Youdy
Week 4 – The World of CSS
Contents
1. What is CSS?
2. Syntax and selectors
3. CSS properties
4. Box model and element positioning
What is CSS?
• CSS (Cascading Style Sheets) is a style sheet language used for
describing the presentation (visual appearance and formatting) of
a document written in a markup language such as HTML.
CSS RULE
Everything you do in CSS follows this basic pattern:
Syntax:
selector {
property: value;
}
Basic Properties
Property – Color
There are 2 type of colors property, Colors and Background Colors
• Color
• Background-Color
Color System:
• RGB
• Named Colors
• Hexadecimal
Property – Text
These control how text looks and behaves in a webpage:
• text-align
• font-weight
• font-family
• text-decoration
• line-height
• latter-spacing
Universal Selector
Select Everything, Apply global style
Syntax:
* {
color: black;
}
Use Case:
Set up to be default for a web page such as, Color background of a web page, Font, space between
The element.
Element selector
Select all image
img {
max-width: 300px;
height: 300px;
}
Descendant Selector
the descendant selector is used to select elements that are nested (descendants)
inside a specified element.
A B {
property: value;
}
A : Parent
B : Child
Adjacent selector
The Adjacent selector is used to select an element that is immediately next to
(right after) another element.
A + B {
property: value;
}
A : First element
B : the element that comes immediately after A (same parent)
Direct Child Selection:
The direct child selector (>) selects only the elements that are immediate children of a specified parent.
A > B {
property: value;
}
A : First element
B : the element that comes immediately after A (same parent)
Attribute Selector
The attribute selector is used to style elements based on the presence, value, or partial value of an attribute.
Element [ Attribute= “value”]{
property: value;
}
Inline Style
An inline style is CSS that is applied directly to an element using the style attribute inside the
HTML tag.
<tagname style="property: value;">
Content
</tagname>
Use Attribute “style ” in a specific element
Box Model
Width & Height
property:
• width
• heigh
Example: Output:
#second-p {
height: 100px;
width:50px;
}
Border
Border properties:
To display border for HTML element, We should use these
properties:
• Border Style: Control the line style – dashed, solid, etc.
• Border Color (optional) : Control the Color of the border
• Border width (optional) : Control the thickness of border
Example:
border-width: 2px;
border-color: red;
border-style: solid;
Border Shorthand (One property to go):
User only “border” to display and style
Example:
border: 2px solid black;
Border-Radius
#example1 {
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
Padding & :
Property:
padding-top
padding-right
padding-left
padding-bottom
Padding shorthand
padding: 10px; all sides
padding: 10px, 20px; top & bottom | left & right
padding: 10px, 20px, 30px; top | left & right | bottom
padding: 10px, 20px, 30px, 40px; top | right | bottom | left
Margin
Margin in CSS works almost the same way as padding, but instead of creating space inside
an element’s border, it creates space outside (between the element and its neighbors).
• margin-top: 20px; space above the element
• margin-bottom: 30px; space below the element
• margin-left: 15px; space to the left
• margin-right: 25px; space to the right
Margin shorthand
• margin: 20px; all sides
• margin: 10px 30px; top & bottom | left & right
• margin: 10px 20px 30px; top | left & right | bottom
• margin: 10px 15px 20px 25px; top | right | bottom | left
Display Property
vs
Block Elements vs Inline Elements
Thank Youu!!
