CSS Introduction | CSS For Beginners | Lesson 1
CSS stands for Cascading Style Sheets and it is the language used for styling and positioning of the web pages. If you are a completely new web developer, developing a CSS course or just brushing up on your skills, learning CSS is important.
In this lesson we will talk about CSS as a tool, the first steps of working with it: setting up the code editor, the syntax of the language and three ways to implementing CSS in HTML documents.
Want free codes for stunning image sliders? Dive in now!
- Modern Image Slider
- Responsive Image Slider
- Text Overlay Image Slider
- Image Clip Animation Slider
- Image Comparison Slider
Why Learn CSS?
CSS is the one which paints your web pages with colors, style your texts with fonts and structures your layouts. HTML defines the layout; CSS adds the aesthetic and friendly interface to the website.
Setting Up Your Code Editor
Code editor most often refers to the integrated development environments or IDEs, in which developers use to write code.
The first thing to consider before going straight to CSS is the selection of an appropriate code editor. Visual Studio Code (VS Code) became the one of the most well-known code editors for web developing. It is free, lightweight with features that will help you in coding and also will increase the efficiency while coding.
Why Use VS Code?
- Syntax Highlighting: This will allow VS Code to identify the syntactical elements in your code and will enable you to quickly locate errors within your code listing.
- Extensions: You can download and install different extensions including ‘Live Server’ for real-time web-page display, ‘Prettier’ for automatically formatting your code and many more.
- Integrated Terminal: One of the most useful features of working in VS Code is that you can execute terminal commands right in the interface without switching to another window.
- Customization: It is also packed with themes, settings, and key bindings so that you can have your own VS Code.
Basic CSS Syntax
CSS syntax is simple but powerful and easy to understand. Selector and declaration block are part of it.
selector {
property: value;
}- Selector: This determines which HTML tags or elements the style is to be applied to. It could be p for paragraphs, h1 for headers or div for divs.
- Property: This is the specific style attributes you want to modify it could be color, font size, margin etc.
- Value: This is the specific value you want to assign to the property such as red, 16px, or 10px.
For example, the following CSS code changes the text color of all paragraphs to blue:
p {
color: blue;
}Three Ways to Include CSS in HTML
There are three main ways to include CSS in your HTML documents:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS is used where the style is applied to a particular HTML tag only. This method is comparatively fast but not suitable for complex projects as it is very difficult to manage.
<p style="color: blue;">This text is blue using inline CSS.</p>Internal CSS
Internal CSS are coded within <style> tag in the <head> section of an HTML document. This is appropriate only when you wish to work on a single page website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color: green;
font-size: 18px;
}
</style>
<title>Internal CSS Example</title>
</head>
<body>
<p>This text is green using internal CSS.</p>
</body>
</html>External CSS
External CSS is the most efficient one, when working with multiple web pages. It involves linking CSS style page with the HTML file. This method makes your code clean and well organized.
For example, create a CSS file with name styles.css:
p {
color: red;
font-size: 20px;
}Link this CSS file to your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>External CSS Example</title>
</head>
<body>
<p>This text is red using external CSS.</p>
</body>
</html>Which Method Should You Use?
Since there are so many methods it is crucial to understand which method should be used when faced with a particular problem.
- Inline CSS is suitable for changes and temporary changes because it is difficult to manage when making changes to the entire site.
- Internal CSS is useful when you have a small site with one page.
- External CSS is recommended for big websites because the style applied to every webpage is the same and makes it easier to manage the code.
Conclusion
CSS plays an important role in web development and in this article you will learn how you can use it to manage the appearance of your site. First of all, having good code editor such as VS Code will help in this process.
Learning the fundamental of CSS is vital, and the ability to link CSS files in your HTML files provides flexibility on how you apply styles.
As you move on with your CSS knowledge and experience, you will be able to build attractive and easily navigable websites. In the next lesson, I will explain more CSS selectors and properties so that you can start learning the next step in creating a web design. Happy coding and happy wondering!
