Intro to CSS
Rupesh KumarWhat is CSS?
If you will look on MDN(Mozilla Developer Network) for the definition of CSS it will say Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML orXML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
But in laymen language CSS, or Cascading Style Sheets, is a tool used to style and arrange the content on a webpage. Think of it like decorating a room: while HTML provides the structure (the walls, furniture placement, etc.), CSS is responsible for how everything looks (the paint color, furniture styles, and decor).
Types of CSS
CSS in general can be written in three ways :-
Inline CSS
Internal CSS
External CSS
Inline CSS
It is a way to style an individual HTML element directly within the HTML code. Think of it like putting a quick note on a specific item in a list to make it stand out. Instead of writing all your styling rules in a separate CSS file or in a section of the HTML document, you attach the styles directly to the HTML elements using the "style" attribute.
<p style="color: blue; font-size: 20px;">Welcome to my website!</p>
Breakdown
HTML Tag:
<p>is the paragraph tag.Style Attribute:
style="color: blue; font-size: 20px;"is where the CSS is written.CSS Properties and Values:
color: blue;changes the text color to blue.font-size: 20px;changes the font size to 20 pixels.
Internal CSS
Internal CSS is a way to style your entire HTML document using CSS rules written directly within the HTML file. Think of it like writing all your decoration instructions in one place inside the same room you're decorating. Instead of attaching styles directly to each element (like inline CSS) or in a separate file (like external CSS), you write your styles within a <style> tag in the <head> section of your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
p {
color: blue;
font-size: 20px;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
Breakdown
HTML Document: Your entire HTML file.
Head Section:
<head>is where you place meta information and links, including the<style>tag.Style Tag:
<style>is where you write your CSS rules.CSS Rules:
p { color: blue; font-size: 20px; }styles all paragraphs with blue text and 20px font size.h1 { color: red; text-align: center; }styles all<h1>headings with red text and centers them.
External CSS
External CSS is a way to style multiple HTML documents using CSS rules written in a separate file. Think of it like having a separate instruction manual for decorating all the rooms in a house. Instead of writing your styles directly within the HTML document, you link to an external CSS file that contains all your styles.
Let's say you have an HTML file and a separate CSS file.
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
CSS File(style.css)
p {
color: blue;
font-size: 20px;
}
h1 {
color: red;
text-align: center;
}
Breakdown
HTML Document: The structure and content of your webpage.
CSS File: A separate file (
styles.css) that contains all your styling rules.Link Tag:
<link rel="stylesheet" href="styles.css">in the<head>section of your HTML file links the external CSS file to your HTML document.CSS Rules in the CSS File:
p { color: blue; font-size: 20px; }styles all paragraphs with blue text and 20px font size.h1 { color: red; text-align: center; }styles all<h1>headings with red text and centers them.
Subscribe to my newsletter
Read articles from Rupesh Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by