๐ฅWhy use CSS
We use Cascading Style Sheets (CSS) to control the presentation of web pages written in HTML. Think of HTML as the structure and content of a house โ the walls, doors, and furniture. CSS is like the interior designer. It tells the browser how that content should look:
Styling: CSS allows us to define the visual appearance of elements, such as colors, fonts, sizes, spacing, and layout. Instead of writing styling information directly into each HTML element, we can centralize it in CSS rules. This makes our code cleaner and easier to manage.
Separation of Concerns: CSS separates the presentation (how things look) from the structure and content (what things are). This separation makes websites easier to develop, maintain, and update. If you want to change the look of your entire website, you only need to modify the CSS files, not touch the HTML.
Consistency: By using CSS, we can ensure a consistent look and feel across all the pages of a website. This creates a better user experience and strengthens brand identity.
Responsiveness: CSS enables us to create websites that adapt to different screen sizes and devices (desktops, tablets, phones). Techniques like media queries allow us to apply different styles based on the device's characteristics.
Efficiency: External CSS files are cached by the browser, meaning that once a user visits one page of your website, their browser won't have to download the same styling information again for other pages. This makes websites load faster.
Accessibility: Well-structured CSS can contribute to better website accessibility by ensuring that content is presented in a clear and understandable way for all users, including those with disabilities.
๐ฅCssแ แแแแตแแ แแแ แแแ
แซแตแฌแฒแแ แตแณแญแ แบแตแต (CSS) แ แคแฝแฒแคแแคแ (HTML) แจแฐแปแ แจแตแจ-แแพแฝแ แ แแซแจแฅ แแแแฃแ แญ แฅแแ แแแ แณแแแข แคแฝแฒแคแแคแแ แฅแแฐ แคแต แ แแแแญ แฅแ แญแแต โ แแตแแณแแฝแฃ แ แฎแฝ แฅแ แจแคแต แฅแแแฝ โ แฅแแ แซแตแกแตแข แฒแคแตแคแต แฐแแ แฅแแฐ แจแแตแฅ แฒแแญแแญ แแแข แญแแฑ แ แ แณแน แฅแแดแต แแณแจแต แฅแแณแแ แต แญแแแจแแแก-
แแตแแฅ (Styling ): แฒแคแตแคแต แฅแแฐ แแแแฝแฃ แ แญแธ-แแแแแฝ (fonts)แฃ แแ แแฝแฃ แญแแฐแถแฝ แฅแ แ แแแแฅ แซแ แจแแฅแจ แแแฎแฝแ (elements) แจแฅแญแณ แแฝแณ แฅแแตแแแแฝ แซแตแฝแแแแข แจแแตแแขแซ แแจแแ แ แแฅแณ แ แฅแซแแณแแฑ แจแคแฝแฒแคแแคแ แคแแแแต แแตแฅ แจแแปแ แญแแ แ แฒแคแตแคแต แ แแฝ แแตแฅ แฅแแแญแแแ (centralize). แญแ แฎแณแฝแแ แแนแ แฅแ แแแตแฐแณแฐแญ แแแ แซแฐแญแแแแข
แจแแแแแต แแแซแจแต (Separation of concern ): แฒแคแตแคแต แ แแซแจแฅแ (แแแฎแฝ แฅแแดแต แฅแแฐแแณแฉ) แจแ แแแแญ แฅแ แญแแต (แแแฎแฝ แแ แฅแแฐแแ) แญแแซแแข แญแ แแแซแจแต แตแจ-แแพแฝแ แแแณแ แญแฃ แแแ แแ แฅแ แแแแแ แแแ แซแฐแญแแแแข แจแ แ แแ แตแญ แฃแขแซแแ แแฝแณ แแแแแฅ แจแแแ แจแฒแคแตแคแต แแญแแฝแ แฅแป แแตแฐแซแจแ แซแตแแแแแณแแฃ แคแฝแฒแคแแคแแ แณแญแแฉแข
แฐแฃแฃแแแต (consistency ): แฒแคแตแคแตแ แ แแ แแ แ แแแ แจแตแญ แฃแขแซแ แแพแฝ แแญ แแฅ แจแแ แแแญ แฅแ แตแแต แแจแแแฅ แฅแแฝแแแแข แญแ แจแฐแปแ แจแฐแ แแ แฐแแญแฎ แญแแฅแซแ แฅแ แจแแญแต แแแแตแ แซแ แแญแซแแข
แแแฝ แฐแชแแต (Responsive ): แฒแคแตแคแต แจแฐแแซแฉ แจแตแญแชแ แแ แแฝ แฅแ แแณแชแซแแฝ (แดแตแญแถแแฃ แณแฅแแถแฝแฃ แตแแฎแฝ) แแญ แจแแฃแฃแ แตแจ-แแพแฝแ แฅแแตแแแฅแญ แซแตแฝแแแแข แฅแแฐ แแฒแซ แแ แญแแฝ (media queries) แซแ แดแญแแฎแฝ แ แแณแชแซแ แฃแ แชแซแต แแญ แ แแแตแจแต แจแฐแแซแฉ แ แฆแฝแ แฅแแตแแฐแแฅแญ แซแตแฝแแแแข
แแคแณแแแต (Efficiency ): แแซแ แจแฒแคแตแคแต แแญแแฝ แ แ แณแน แญแแแฃแ (cached)แฃ แญแ แ แแแต แ แแต แฐแ แแ แจแตแญ แฃแขแซแแ แ แแต แแฝ แจแแ แ แ แแ แ แณแน แแแแฝ แแพแฝ แฐแแณแณแญ แจแแตแแขแซ แแจแแ แฅแแฐแแ แแแจแต แ แญแแญแ แตแแข แญแ แจแตแญ แฃแขแซแแฝแ แจแแซแ แแฅแแต แซแปแฝแแแข
แฐแฐแซแฝแแต (accessibility ): แ แฐแแฅ แจแฐแแแจ แฒแคแตแคแต แจแ แซแ แแณแฐแแฝแ แจแแฎ แแแแ แฐแ แแแแฝ แญแแฑ แแแฝ แฅแ แแแจแณแต แ แแซแตแฝแ แแแแต แฅแแฒแแญแฅ แ แแตแจแ แจแฐแปแ แจแตแญ แฃแขแซ แฐแฐแซแฝแแตแ แแแจแแแฅ แ แตแฐแแ แฆ แซแฐแญแแแข
We use Cascading Style Sheets (CSS) to control the presentation of web pages written in HTML. Think of HTML as the structure and content of a house โ the walls, doors, and furniture. CSS is like the interior designer. It tells the browser how that content should look:
Styling: CSS allows us to define the visual appearance of elements, such as colors, fonts, sizes, spacing, and layout. Instead of writing styling information directly into each HTML element, we can centralize it in CSS rules. This makes our code cleaner and easier to manage.
Separation of Concerns: CSS separates the presentation (how things look) from the structure and content (what things are). This separation makes websites easier to develop, maintain, and update. If you want to change the look of your entire website, you only need to modify the CSS files, not touch the HTML.
Consistency: By using CSS, we can ensure a consistent look and feel across all the pages of a website. This creates a better user experience and strengthens brand identity.
Responsiveness: CSS enables us to create websites that adapt to different screen sizes and devices (desktops, tablets, phones). Techniques like media queries allow us to apply different styles based on the device's characteristics.
Efficiency: External CSS files are cached by the browser, meaning that once a user visits one page of your website, their browser won't have to download the same styling information again for other pages. This makes websites load faster.
Accessibility: Well-structured CSS can contribute to better website accessibility by ensuring that content is presented in a clear and understandable way for all users, including those with disabilities.
๐ฅCssแ แแแแตแแ แแแ แแแ
แซแตแฌแฒแแ แตแณแญแ แบแตแต (CSS) แ แคแฝแฒแคแแคแ (HTML) แจแฐแปแ แจแตแจ-แแพแฝแ แ แแซแจแฅ แแแแฃแ แญ แฅแแ แแแ แณแแแข แคแฝแฒแคแแคแแ แฅแแฐ แคแต แ แแแแญ แฅแ แญแแต โ แแตแแณแแฝแฃ แ แฎแฝ แฅแ แจแคแต แฅแแแฝ โ แฅแแ แซแตแกแตแข แฒแคแตแคแต แฐแแ แฅแแฐ แจแแตแฅ แฒแแญแแญ แแแข แญแแฑ แ แ แณแน แฅแแดแต แแณแจแต แฅแแณแแ แต แญแแแจแแแก-
แแตแแฅ (Styling ): แฒแคแตแคแต แฅแแฐ แแแแฝแฃ แ แญแธ-แแแแแฝ (fonts)แฃ แแ แแฝแฃ แญแแฐแถแฝ แฅแ แ แแแแฅ แซแ แจแแฅแจ แแแฎแฝแ (elements) แจแฅแญแณ แแฝแณ แฅแแตแแแแฝ แซแตแฝแแแแข แจแแตแแขแซ แแจแแ แ แแฅแณ แ แฅแซแแณแแฑ แจแคแฝแฒแคแแคแ แคแแแแต แแตแฅ แจแแปแ แญแแ แ แฒแคแตแคแต แ แแฝ แแตแฅ แฅแแแญแแแ (centralize). แญแ แฎแณแฝแแ แแนแ แฅแ แแแตแฐแณแฐแญ แแแ แซแฐแญแแแแข
แจแแแแแต แแแซแจแต (Separation of concern ): แฒแคแตแคแต แ แแซแจแฅแ (แแแฎแฝ แฅแแดแต แฅแแฐแแณแฉ) แจแ แแแแญ แฅแ แญแแต (แแแฎแฝ แแ แฅแแฐแแ) แญแแซแแข แญแ แแแซแจแต แตแจ-แแพแฝแ แแแณแ แญแฃ แแแ แแ แฅแ แแแแแ แแแ แซแฐแญแแแแข แจแ แ แแ แตแญ แฃแขแซแแ แแฝแณ แแแแแฅ แจแแแ แจแฒแคแตแคแต แแญแแฝแ แฅแป แแตแฐแซแจแ แซแตแแแแแณแแฃ แคแฝแฒแคแแคแแ แณแญแแฉแข
แฐแฃแฃแแแต (consistency ): แฒแคแตแคแตแ แ แแ แแ แ แแแ แจแตแญ แฃแขแซแ แแพแฝ แแญ แแฅ แจแแ แแแญ แฅแ แตแแต แแจแแแฅ แฅแแฝแแแแข แญแ แจแฐแปแ แจแฐแ แแ แฐแแญแฎ แญแแฅแซแ แฅแ แจแแญแต แแแแตแ แซแ แแญแซแแข
แแแฝ แฐแชแแต (Responsive ): แฒแคแตแคแต แจแฐแแซแฉ แจแตแญแชแ แแ แแฝ แฅแ แแณแชแซแแฝ (แดแตแญแถแแฃ แณแฅแแถแฝแฃ แตแแฎแฝ) แแญ แจแแฃแฃแ แตแจ-แแพแฝแ แฅแแตแแแฅแญ แซแตแฝแแแแข แฅแแฐ แแฒแซ แแ แญแแฝ (media queries) แซแ แดแญแแฎแฝ แ แแณแชแซแ แฃแ แชแซแต แแญ แ แแแตแจแต แจแฐแแซแฉ แ แฆแฝแ แฅแแตแแฐแแฅแญ แซแตแฝแแแแข
แแคแณแแแต (Efficiency ): แแซแ แจแฒแคแตแคแต แแญแแฝ แ แ แณแน แญแแแฃแ (cached)แฃ แญแ แ แแแต แ แแต แฐแ แแ แจแตแญ แฃแขแซแแ แ แแต แแฝ แจแแ แ แ แแ แ แณแน แแแแฝ แแพแฝ แฐแแณแณแญ แจแแตแแขแซ แแจแแ แฅแแฐแแ แแแจแต แ แญแแญแ แตแแข แญแ แจแตแญ แฃแขแซแแฝแ แจแแซแ แแฅแแต แซแปแฝแแแข
แฐแฐแซแฝแแต (accessibility ): แ แฐแแฅ แจแฐแแแจ แฒแคแตแคแต แจแ แซแ แแณแฐแแฝแ แจแแฎ แแแแ แฐแ แแแแฝ แญแแฑ แแแฝ แฅแ แแแจแณแต แ แแซแตแฝแ แแแแต แฅแแฒแแญแฅ แ แแตแจแ แจแฐแปแ แจแตแญ แฃแขแซ แฐแฐแซแฝแแตแ แแแจแแแฅ แ แตแฐแแ แฆ แซแฐแญแแแข
๐3๐ฅฐ2โค1
แขแต แแฃแจแญ แethio coders แตแแ
แ แฃแแต แ แแ! แญแ
แจแฐแตแณ แ แแ แแแแฝแแ แฐแตแณแแฃ แฐแแแ แฅแ แตแแญ แแฅแญ แจแแแธแแ แ แจแจแถแฝ แซแแฃแแฝแแข แ แแแต แฅแ แ แ แแตแแต แจแฐแแ แจแฐแฃแจแจ แขแต แฅแแแแแข ุชูุจู ุงููู ู
ูุง ูู
ููู
(แฐแแ แแแ แแ แแแแฉแ) - แ แแ
แจแฅแแ แจแฅแแแฐแ แพแแ แแแซแ แตแซแแฝแ แญแแ แแแแข
๐2โค1
๐ Big News, Ethio Coders! ๐
Alhamdulillah! Weโve reached 3,000 subscribers! ๐โจ
A huge THANK YOU to every member of this amazing community. Your support, engagement, and passion for coding have made this possible! ๐๐ป
This is just the beginningโmore tutorials, projects, and coding resources are coming soon! Letโs continue growing and learning together.
Keep supporting Ethio Coders and invite your friends to join! ๐ก๐ฅ
#EthioCoders #3KSubscribers #KeepCoding
Alhamdulillah! Weโve reached 3,000 subscribers! ๐โจ
A huge THANK YOU to every member of this amazing community. Your support, engagement, and passion for coding have made this possible! ๐๐ป
This is just the beginningโmore tutorials, projects, and coding resources are coming soon! Letโs continue growing and learning together.
Keep supporting Ethio Coders and invite your friends to join! ๐ก๐ฅ
#EthioCoders #3KSubscribers #KeepCoding
๐3โค1๐1๐1
TEYPS OF CSS
CSS (Cascading Style Sheets) has three main types:
1. Inline CSS
Used inside an HTML tag.
Good for quick styling but not recommended for large projects.
Example:
2. Internal CSS
Written inside the <style> tag in the HTML file.
Good for single-page styling but not reusable.
Example:
3. External CSS
Written in a separate .css file and linked to the HTML file.
Best for large projects and reusable styles.
Example:
HTML file:
Which One to Use?
Use external CSS for big projects.
Use internal CSS for a single-page website.
Use inline CSS only for quick fixes.
CSS (Cascading Style Sheets) has three main types:
1. Inline CSS
Used inside an HTML tag.
Good for quick styling but not recommended for large projects.
Example:
<p style="color: red; font-size: 20px;">This is an inline CSS example.</p>
2. Internal CSS
Written inside the <style> tag in the HTML file.
Good for single-page styling but not reusable.
Example:
<html> <head> <style> p { color: blue; font-size: 25px; } </style> </head> <body> <p>This is an internal CSS example.</p> </body> </html> 3. External CSS
Written in a separate .css file and linked to the HTML file.
Best for large projects and reusable styles.
Example:
CSS file (style.css):
p { color: green; font-size: 30px; }
HTML file:
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>This is an external CSS example.</p> </body> </html>
Which One to Use?
Use external CSS for big projects.
Use internal CSS for a single-page website.
Use inline CSS only for quick fixes.
Code Spark
TEYPS OF CSS CSS (Cascading Style Sheets) has three main types: 1. Inline CSS Used inside an HTML tag. Good for quick styling but not recommended for large projects. Example: <p style="color: red; font-size: 20px;">This is an inline CSS example.</p> 2.โฆ
แจ CSS แ แญแแถแฝ
CSS (แซแตแฌแฒแแ แตแณแญแ แบแตแต) แถแตแต แแ แแ แ แญแแถแฝ แ แแตแข
แ แแตแฅ แแตแแญ CSS (Inline CSS)
๐ฅแ HTML แแแซ แแตแฅ แจแแปแ แแแข
๐ฅแแ แแฃแ แ แฆแฝ แฅแฉ แแแฃ แแ แแตแแแ แแฎแแญแถแฝ แ แญแแจแญแแข
แแณแแก
แแตแฃแ CSS (Internal CSS)
๐ฅแ HTML แแญแ แแตแฅ แฃแแ <style> แแแซ แแตแฅ แจแแปแ แแแข
๐ฅแแ แแต แแฝ แฅแป แฅแฉ แแแฃ แแ แฅแแฐแแ แแ แแ แ แญแปแแแข
แแณแแก
แแซแ CSS (External CSS)
๐ฅแ แฐแแจ .css แแญแ แแตแฅ แจแแปแ แฅแ แจHTML แแญแ แแญ แจแแแแ แแแข
๐ฅแแตแแแ แแฎแแญแถแฝ แฅแ แฅแแฐแแ แฅแ แ แแญ แแแแ แ แฆแฝ แ แฃแ แฅแฉ แแแข
แแณแแก
แจ CSS แแญแ (style.css):
แจ HTML แแญแ:
แจแตแแแ แแ แแ แ แแฅแ?
๐ฅแแตแแแ แแฎแแญแถแฝ แแซแ CSS แ แญแ แแแข
๐ฅแ แแต แแฝ แแแ แตแญ แฃแขแซ แแตแฃแ CSS แ แญแ แแแข
๐ฅแ แแตแฅ แแตแแญ CSS แ แแ แแฃแ แแแฆแฝ แฅแป แญแ แแแข
CSS (แซแตแฌแฒแแ แตแณแญแ แบแตแต) แถแตแต แแ แแ แ แญแแถแฝ แ แแตแข
แ แแตแฅ แแตแแญ CSS (Inline CSS)
๐ฅแ HTML แแแซ แแตแฅ แจแแปแ แแแข
๐ฅแแ แแฃแ แ แฆแฝ แฅแฉ แแแฃ แแ แแตแแแ แแฎแแญแถแฝ แ แญแแจแญแแข
แแณแแก
<p style="color: red; font-size: 20px;">แญแ แจแแตแฅ แแตแแญ CSS แแณแ แแแข</p>
แแตแฃแ CSS (Internal CSS)
๐ฅแ HTML แแญแ แแตแฅ แฃแแ <style> แแแซ แแตแฅ แจแแปแ แแแข
๐ฅแแ แแต แแฝ แฅแป แฅแฉ แแแฃ แแ แฅแแฐแแ แแ แแ แ แญแปแแแข
แแณแแก
<html>
<head>
<style>
p {
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<p>แญแ แจแแตแฃแ CSS แแณแ แแแข</p>
</body>
</html>
แแซแ CSS (External CSS)
๐ฅแ แฐแแจ .css แแญแ แแตแฅ แจแแปแ แฅแ แจHTML แแญแ แแญ แจแแแแ แแแข
๐ฅแแตแแแ แแฎแแญแถแฝ แฅแ แฅแแฐแแ แฅแ แ แแญ แแแแ แ แฆแฝ แ แฃแ แฅแฉ แแแข
แแณแแก
แจ CSS แแญแ (style.css):
p {
color: green;
font-size: 30px;
}แจ HTML แแญแ:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>แญแ แจแแซแ CSS แแณแ แแแข</p>
</body>
</html>
แจแตแแแ แแ แแ แ แแฅแ?
๐ฅแแตแแแ แแฎแแญแถแฝ แแซแ CSS แ แญแ แแแข
๐ฅแ แแต แแฝ แแแ แตแญ แฃแขแซ แแตแฃแ CSS แ แญแ แแแข
๐ฅแ แแตแฅ แแตแแญ CSS แ แแ แแฃแ แแแฆแฝ แฅแป แญแ แแแข
Css Syntax
CSS (Cascading Style Sheets) is used to style web pages.
๐แฒแคแตแคแต (Cascading Style Sheets) แจแตแจ-แแพแฝแ แแฝแณ แแแแจแญ แญแ แ แแแข
The CSS syntax consists of three main parts:
๐แจแฒแคแตแคแต แ แแฃแฅ แถแตแต แแ แแ แญแแแฝ แ แแตแก-
๐ฅSelector โ The HTML element you want to style.
๐แแซแญ โ แแตแแฅ แจแแตแแแแต แจแคแฝแฒแคแแคแ แคแแแแตแข
๐ฅProperty โ The type of style you want to apply (e.g., color, font size).
๐แฃแ แช โ แจแแตแ แแแ แต แจแ แฅ แ แญแแต (แแแณแ แแแแฃ แจแแฐแ แแ แ)แข
๐ฅValue โ The specific setting for the property.
๐แฅแดแต โ แแฃแ แชแ แจแฐแแฐแแ แแผแตแข
Example:-
Explanation:
แแฅแซแชแซแก-
๐ฅp โ Selector (targets all <p> tags in HTML).
๐p โ แแซแญ (แ แคแฝแฒแคแแคแ แแตแฅ แซแแตแ แแแแ <p> แณแแฝ แซแแฃแ แซแแข)
๐ฅcolor โ Property (sets the text color).
๐color โ แฃแ แช (แจแฝแแแ แแแ แญแแตแแแข)
๐ฅred โ Value (text color will be red).
๐red โ แฅแดแต (แจแฝแแ แแแ แแญ แญแแแแข)
๐ฅfont-size โ Property (sets the size of the text).
๐font-size โ แฃแ แช (แจแฝแแแ แแ แ แญแแตแแแข)
๐ฅ20px โ Value (text size will be 20 pixels).
๐20px โ แฅแดแต (แจแฝแแ แแ แ 20 แแญแตแ แญแแแแข)
๐ฅEach style rule is written inside curly braces {}, and every property-value pair ends with a semicolon ;.
๐แฅแซแแณแแฑ แจแ แฅ แ แแแ แ แแแต แจแฐแ แแแ แแแแแฝ {} แแตแฅ แจแฐแปแ แฒแแ แฅแซแแณแแฑ แจแฃแ แช-แฅแดแต แฅแแต แ แฐแแฎแแ ; แซแ แแแข
CSS (Cascading Style Sheets) is used to style web pages.
๐แฒแคแตแคแต (Cascading Style Sheets) แจแตแจ-แแพแฝแ แแฝแณ แแแแจแญ แญแ แ แแแข
The CSS syntax consists of three main parts:
๐แจแฒแคแตแคแต แ แแฃแฅ แถแตแต แแ แแ แญแแแฝ แ แแตแก-
๐ฅSelector โ The HTML element you want to style.
๐แแซแญ โ แแตแแฅ แจแแตแแแแต แจแคแฝแฒแคแแคแ แคแแแแตแข
๐ฅProperty โ The type of style you want to apply (e.g., color, font size).
๐แฃแ แช โ แจแแตแ แแแ แต แจแ แฅ แ แญแแต (แแแณแ แแแแฃ แจแแฐแ แแ แ)แข
๐ฅValue โ The specific setting for the property.
๐แฅแดแต โ แแฃแ แชแ แจแฐแแฐแแ แแผแตแข
Example:-
p { color: red; font-size: 20px; }Explanation:
แแฅแซแชแซแก-
๐ฅp โ Selector (targets all <p> tags in HTML).
๐p โ แแซแญ (แ แคแฝแฒแคแแคแ แแตแฅ แซแแตแ แแแแ <p> แณแแฝ แซแแฃแ แซแแข)
๐ฅcolor โ Property (sets the text color).
๐color โ แฃแ แช (แจแฝแแแ แแแ แญแแตแแแข)
๐ฅred โ Value (text color will be red).
๐red โ แฅแดแต (แจแฝแแ แแแ แแญ แญแแแแข)
๐ฅfont-size โ Property (sets the size of the text).
๐font-size โ แฃแ แช (แจแฝแแแ แแ แ แญแแตแแแข)
๐ฅ20px โ Value (text size will be 20 pixels).
๐20px โ แฅแดแต (แจแฝแแ แแ แ 20 แแญแตแ แญแแแแข)
๐ฅEach style rule is written inside curly braces {}, and every property-value pair ends with a semicolon ;.
๐แฅแซแแณแแฑ แจแ แฅ แ แแแ แ แแแต แจแฐแ แแแ แแแแแฝ {} แแตแฅ แจแฐแปแ แฒแแ แฅแซแแณแแฑ แจแฃแ แช-แฅแดแต แฅแแต แ แฐแแฎแแ ; แซแ แแแข
โค2๐2
Hey Ethio Coders Subscribers,
Learning HTML, CSS, and JavaScript is the key to unlocking the world of web development! ๐ Whether you have a laptop or just a phone, you can start coding today!
โ Laptop Users โ Use VS Code or any text editor to write and test your code.
โ Phone Users โ Download the SPCK Code Editor and turn your phone into a powerful coding tool!
๐ก Why Learn HTML, CSS & JS?
๐น Create stunning websites ๐
๐น Build amazing user interfaces ๐จ
๐น Develop interactive and dynamic web apps โก
๐น Start freelancing or get a tech job ๐ผ
๐ฏ No Excuses! Start Small & Stay Consistent.
๐ข "The best programmers are not the ones with expensive devices, but those with dedication and practice!"
๐ ๐ Table of Content: Click here to access structured learning materials.
Join us, ask questions, and let's build amazing projects together! ๐๐ฅ
#EthioCoders #LearnToCode #HTML #CSS #JavaScript
Learning HTML, CSS, and JavaScript is the key to unlocking the world of web development! ๐ Whether you have a laptop or just a phone, you can start coding today!
โ Laptop Users โ Use VS Code or any text editor to write and test your code.
โ Phone Users โ Download the SPCK Code Editor and turn your phone into a powerful coding tool!
๐ก Why Learn HTML, CSS & JS?
๐น Create stunning websites ๐
๐น Build amazing user interfaces ๐จ
๐น Develop interactive and dynamic web apps โก
๐น Start freelancing or get a tech job ๐ผ
๐ฏ No Excuses! Start Small & Stay Consistent.
๐ข "The best programmers are not the ones with expensive devices, but those with dedication and practice!"
๐ ๐ Table of Content: Click here to access structured learning materials.
Join us, ask questions, and let's build amazing projects together! ๐๐ฅ
#EthioCoders #LearnToCode #HTML #CSS #JavaScript
๐5
Main CSS Selectors
CSS selectors are patterns used to select and style HTML elements. Below are the main types of CSS selectors, along with their explanations and examples:
1. Universal Selector (*)
The universal selector selects all elements on a webpage.
It is used when we want to apply styles to every element.
Example:
This will make all the text in the document red.
2. Element (Type) Selector
The element selector applies styles to all instances of a particular HTML tag.
It is useful when styling headings, paragraphs, or divs.
Example:
This will make all <p> elements have a font size of 18px.
3. Class Selector (.)
The class selector is used to select elements with a specific class.
It allows multiple elements to share the same styles.
Example:
Any element with class="highlight" will have a yellow background.
4. ID Selector (#)
The ID selector targets a single, unique element with a specific ID.
Each ID should be used only once per page.
Example:
The element with id="title" will have centered text.
CSS selectors are patterns used to select and style HTML elements. Below are the main types of CSS selectors, along with their explanations and examples:
1. Universal Selector (*)
The universal selector selects all elements on a webpage.
It is used when we want to apply styles to every element.
Example:
* {
color: red;
}This will make all the text in the document red.
2. Element (Type) Selector
The element selector applies styles to all instances of a particular HTML tag.
It is useful when styling headings, paragraphs, or divs.
Example:
p {
font-size: 18px;
}This will make all <p> elements have a font size of 18px.
3. Class Selector (.)
The class selector is used to select elements with a specific class.
It allows multiple elements to share the same styles.
Example:
.highlight {
background-color: yellow;
}Any element with class="highlight" will have a yellow background.
4. ID Selector (#)
The ID selector targets a single, unique element with a specific ID.
Each ID should be used only once per page.
Example:
#title {
text-align: center;
}The element with id="title" will have centered text.
This media is not supported in your browser
VIEW IN TELEGRAM
Inline and internal css from Udacity
๐6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
.signup-container {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
}
.signup-container h2 {
color: #333;
margin-bottom: 20px;
font-size: 28px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
color: #555;
margin-bottom: 8px;
font-size: 14px;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #ff6b6b;
}
button {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #ff6b6b, #ff8e53);
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.signup-container p {
margin-top: 20px;
color: #555;
font-size: 14px;
}
.signup-container a {
color: #ff6b6b;
text-decoration: none;
font-weight: bold;
}
.signup-container a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.signup-container {
padding: 20px;
margin: 20px;
}
}
</style>
</head>
<body>
<div class="signup-container">
<h2 class="sin">Ethio coder</h2>
<form>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
</div>
<button type="submit">Sign Up</button>
</form>
<p>Already have an account? <a href="#" onclick="display()">Log in</a></p>
</div>
<script >
var sinUp=document.querySelector('.sin');
function display(){
alert('Please first Sign up then you can login ')
}
</script>
</body>
</html>
๐7โค1
What is a CSS comment?
A CSS comment is a note you write inside your CSS code. It is not shown on the website and does not affect how the page looks.
You use it to:
๐Explain what your code does
๐Leave reminders for yourself or others
How to write a CSS comment:
๐ฅYou start with
๐Example:
Important:
๐ฅCSS comments can be on a line by themselves or next to code.
๐ฅThe browser ignores anything inside /* ... */.
A CSS comment is a note you write inside your CSS code. It is not shown on the website and does not affect how the page looks.
You use it to:
๐Explain what your code does
๐Leave reminders for yourself or others
How to write a CSS comment:
๐ฅYou start with
/* and end with */.๐Example:
/* This is a comment */
body { background-color: lightblue;
/* This sets the background color */
}
Important:
๐ฅCSS comments can be on a line by themselves or next to code.
๐ฅThe browser ignores anything inside /* ... */.
แ แแแ แ แแญแ แแตแจแณแ
แค แจ CSS แฎแแแต แแแต แ CSS แฎแตแ
แแตแฅ แจแแตแฝแแ แแตแณแแป/แแฅแซแชแซ แแแต แแแข
แญแ แแตแณแแป/comment แ แตแจ แแน แแญ แ แญแณแญแแค แจแตแจ แแนแ แแฝแณแ แแแ แ แญแแญแญแแข
แแแ แฅแแ แแแแแ แซแแจแแก-
๐แฎแฑ แแ แฅแแฐแแฐแซ แแแตแจแณแต
๐แแซแตแ แแญแ แแแแฝ แแตแณแแป แแแฐแ
แฅแแดแต แฅแแฝแแแ แซแแจแ แฐแแแก-
๐ฅแ /* แแแญแต แตแแแซแแ แ */ แแแญแต แฐแแ แตแจแญแณแแ แข
แแณแ แก-
๐ฅแแแ แแแญ แญแ แแแค แฎแแแต แ แฎแตแ แแตแฅ แจแแตแฝแแ แแแญ แฒแแ แจแตแจ แแนแ แ แฐแซแญ แแแ แ แญแแซแแข แ แ แแฐแ แ แแแฝ แฎแฑแ แ แแซแฉ แฐแแฝ แแซแจแ แฅแแฐ แแแฃแขแซ แฅแแ แแแแแแข
๐ฅแตแจ แแน /websitu แฎแฑแ แ แแซแแฅ
แญแ แแตแณแแป/comment แ แตแจ แแน แแญ แ แญแณแญแแค แจแตแจ แแนแ แแฝแณแ แแแ แ แญแแญแญแแข
แแแ แฅแแ แแแแแ แซแแจแแก-
๐แฎแฑ แแ แฅแแฐแแฐแซ แแแตแจแณแต
๐แแซแตแ แแญแ แแแแฝ แแตแณแแป แแแฐแ
แฅแแดแต แฅแแฝแแแ แซแแจแ แฐแแแก-
๐ฅแ /* แแแญแต แตแแแซแแ แ */ แแแญแต แฐแแ แตแจแญแณแแ แข
แแณแ แก-
/* แญแ แฎแแแต แแ */
body {
background-color: lightblue;
/* แญแ background color/แแแ แซแตแแแฃแ */
}
๐ฅแแแ แแแญ แญแ แแแค แฎแแแต แ แฎแตแ แแตแฅ แจแแตแฝแแ แแแญ แฒแแ แจแตแจ แแนแ แ แฐแซแญ แแแ แ แญแแซแแข แ แ แแฐแ แ แแแฝ แฎแฑแ แ แแซแฉ แฐแแฝ แแซแจแ แฅแแฐ แแแฃแขแซ แฅแแ แแแแแแข
๐ฅแตแจ แแน /websitu แฎแฑแ แ แแซแแฅ
๐3
แตแ coding แจแฐแแจแแ แแแฎแฝ
Watch by pressing the following link๐๐๐
https://t.me/+1F-gkmYE38w0OTA0
Betelay jemari kehonachu ๐๐๐๐
Watch by pressing the following link๐๐๐
https://t.me/+1F-gkmYE38w0OTA0
Betelay jemari kehonachu ๐๐๐๐
๐2
Forwarded from Coding Era
To be successful person
You can be successful. Just donโt give up.
Work a little every day.
Believe in yourself.
Learn from your mistakes.
Stay strong, even when life is hard.
Keep dreaming big.
Be kind and honest.
Never stop learning.
Step by step, you will reach your goal. Success takes time, but you can do it!
Join:https://t.me/+1F-gkmYE38w0OTA0
You can be successful. Just donโt give up.
Work a little every day.
Believe in yourself.
Learn from your mistakes.
Stay strong, even when life is hard.
Keep dreaming big.
Be kind and honest.
Never stop learning.
Step by step, you will reach your goal. Success takes time, but you can do it!
Join:https://t.me/+1F-gkmYE38w0OTA0
๐5๐ฅ1
Introduction to JavaScript (JS)
What is JavaScript?
JavaScript (JS) is a programming language used to make websites interactive.
It works with HTML and CSS.
JavaScript runs in the browser (like Chrome, Firefox).
Why Use JavaScript?
Read More๐
What is JavaScript?
JavaScript (JS) is a programming language used to make websites interactive.
It works with HTML and CSS.
JavaScript runs in the browser (like Chrome, Firefox).
Why Use JavaScript?
Read More๐
๐10๐3โค2
Main Uses of JavaScript
1. Web Development (Frontend)
JS makes websites interactive and dynamic.
Show/hide elements
Validate forms
Handle user actions (click, scroll, etc.)
Change content without reloading the page
Example: Clicking a button to display a message
2. Web Development (Backend)
With Node.js, JS can also run on the server:
Handle requests and responses
Connect to databases
Build APIs
Power full-stack apps
Example: Chat applications like WhatsApp Web
3. Mobile App Development
JS is used to build mobile apps using:
Read More ๐
1. Web Development (Frontend)
JS makes websites interactive and dynamic.
Show/hide elements
Validate forms
Handle user actions (click, scroll, etc.)
Change content without reloading the page
Example: Clicking a button to display a message
2. Web Development (Backend)
With Node.js, JS can also run on the server:
Handle requests and responses
Connect to databases
Build APIs
Power full-stack apps
Example: Chat applications like WhatsApp Web
3. Mobile App Development
JS is used to build mobile apps using:
Read More ๐
โค2๐ฅ2๐1
Forwarded from Birhan Nega
แแแ แตแแ
แญแต แจแตแแ แแ แฅแแฝแ แ แตแแฉแข แ แแแ แแฐ แตแซ แจแแซแตแแฃแ แฅแแฝแแ แ แณแตแกแข if you want to succeeded, get ready for the challenge, you have to pay what it takes to achieve the goal.
แฅแ แฐแแชแแฝ แขแแแแชแแ แแแญ แฅแแแแแ แแ Mathematics แจแฃแต แแ แตแแแ แถแปแ แแแฃแต แ แแฅแ แฒแ แญแฐแแแข
แณแแ แฅแฅแต แแฅแแต แฅแจแฐแปแ แตแซแแฝแแ แแแธแฝ แซแตแ แ แ แถ แแธแแแ แฐแแข แ แญแฐแแแข
แฅแ แฐแแชแแฝ แขแแแแชแแ แแแญ แฅแแแแแ แแ Mathematics แจแฃแต แแ แตแแแ แถแปแ แแแฃแต แ แแฅแ แฒแ แญแฐแแแข
แณแแ แฅแฅแต แแฅแแต แฅแจแฐแปแ แตแซแแฝแแ แแแธแฝ แซแตแ แ แ แถ แแธแแแ แฐแแข แ แญแฐแแแข