3 Basic Ways to Use CSS for Beginners❢
(Visual Studio Code)
creators customizing your site with confidence!
 |
| An elegant Persian white cat holds a paintbrush and beautifully styles her blog❣ |
Today's Contents:
• What CSS is
• 3 Basic Ways to Use CSS
🚴I am running a Blog on Blogger with the Dynamic Views theme
Welcome, dear radiant bloggers!✨
Whether you're just starting your blogging journey or exploring something new after a long time—I'm so glad you're here.
Today, we'll gently walk through what CSS is and learn three simple ways to use it to make your blog look just a little more polished and beautiful.
No rush—just a friendly guide to help you grow more confident. Let's start with the first part to CSS together!
| What CSS Is
CSS stands for Cascading Style Sheets. It's the language used to control how your blog or website looks—including layout, colors, fonts, spacing, and more.
Think of HTML as the structure (like the walls of a house) and CSS as the decor (like the paint, furniture, and lighting). Without CSS, your blog would still work, but it would look plain and lifeless.
Whether you're customizing a Blogger theme or building your layout from scratch, CSS is your secret sauce to make your blog visually appealing.
| 3 Basic Ways to Use CSS
| Inline CSS: directly in HTML tags
⎖ What Is Inline Style in CSS?
Inline style means you apply the style directly inside an HTML tag using the style attribute. It's like putting clothes on one specific element without affecting anything else. This method is quick and easy—but not ideal for big projects.
⎖ When to Use Inline Style
- For quick styling on a single element
- When you're testing or learning
- Not recommended for entire page. It gets messy!
⎖ Example
Let's say you want to make a sentence orange and bold:
html
<p style="color: orange; font-weight: bold;">Hello, AI!</p>Below is an example applying inline style using Visual Studio Code.
 |
| Image1. An example applying inline style using Visual Studio Code |
⎖ What's happening here?
- style="..." is added inside the <p> tag
- color: orange; makes the text orange
- font-weight: bold; makes the text bold
Below is what the webpage looks like with inline CSS applied.
 |
| Image2. The look of the webpage after applying inline CSS |
| Internal CSS: <style> tag in the HTML document
⎖ What Is Internal Style in CSS?
Internal CSS means you write your styles inside a <style> tag, directly in your HTML document—usually in the <head> section.
Think of it as setting style rules for your whole blog post in one place, instead of repeating inline styles everywhere. It's like giving intructions not to individual computers, but to one central computer that all of them are connected to.
⎖ When to Use Internal CSS
- When you're styling just one page
- Great for small blogs or tutorials
- Easier to manage than lots of inline styles
⎖ Example
Let's say you want to make a heading darkgreen and center in text-alignment:
html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style>
p {
color: blue; font-size: 18px;
}
h1 {
color: darkgreen; text-align: center;
}
</style>
</head>
<body>
<h1>CSS Usage Methods</h1>
</body>
</html>
 |
| Image3. An example applying internal CSS in Visual Studio Code |
⎖ What's happening here?
- The <style> tag goes inside the <head>
- All <p> elements turn blue and larger
- The <h1> is centered and green
Below is what the webpage looks like with inline CSS applied.
 |
| Image4. The look on the webpage after applying internal CSS |
| External CSS: linked .css file
⎖ What Is External CSS File Style in CSS?
⎖ Why Use External CSS?
- Keeps your original HTML clean and readable
- Lets you reuse the same styles across multiple pages
- Easier to maintain and update as your blog grows
⎖ Where to Put the CSS File?
⎖ Example
1. Create an HTML document (.html) like:
- Create a new folder called 'testCSS' on your computer or wherever you want
- Open the folder in Visual Studio Code
- Create a new folder called 'css' under the testCSS folder
- Create a new HTML document called 'externalCSS.html' under the css folder
- Fill it with the following content
html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello from External CSS</h1>
<p>This paragraph is styled using an external CSS file.</p>
<p class="point">This text is highlighted using class="point".</p>
</body>
</html>
In HTML, class="point" assigns the element to a CSS class named .point. It tells the browser "Apply the styles defined in the .point class to this element."
2. Create a CSS file (.css) like:
- Create a new CSS file 'style.css' under the 'css' folder (select the css folder from the left menu, right-click, and select New File)
- Fill it with the following content
Let's say it's called style.css
CSS
/* style.css */body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
h1 {
color: #ff6600
text-align: center;
}
p {
color: #333;
font-size: 16px;
}
.point {
background: tomato;
}
In CSS, .point is a class selector. It targets any HTML element that has the class name ".point". It's just a custom class name. You can name it anything (like .highlight, .notice, etc.) depending on what the style is for.
3. Link the style.css file in your HTML file using the <link> tag like:
<link rel="stylesheet" href="css/style.css">
 |
| Image5. How to link that style.css file in your HTML file using the <link> tag |
Personally, I like to save frequently used CSS styles in the HTML view of my drafts, adding titles to them so I can easily find and reuse them when needed.
Congratulations (╹ڡ╹)
Did you enjoy in this post? I hope this post helped you understand CSS a little more clearly and made things feel less intimidating. If you're new to blogging or just starting to learn how all of this works—please know you're amazing.
Learning something new, especially something technical like CSS, takes time and practice. It's okay to go slow, make mistakes, and revisit things as often as you need. Every step you take is progress.
Whether you're a beginner blogger or a curious lifelong learner, I'm cheering you on. Keep learning, keep creating, and most of all have fun with your blog. You've got this!
