Abhishek Singh Kirola
Familarize With Css Basics. 🤝

Familarize With Css Basics. 🤝

Abhishek Singh's photo
Abhishek Singh
·

6 min read

Table of contents

Are you interested in creating interesting designs for your website? 🎨
If so, this article is perfect for you as a beginner, helping you to make your website look good and amazing! In this article, we will cover the basics of CSS, including what CSS is and how its syntax works. Let’s dive in and start creating stunning web designs! 🚀

What is CSS ?

CSS stands for Cascading Style Sheets. It’s used to make your HTML webpage look nice. With CSS, you can change the colors, fonts, sizes, and many other design details of your website. The word "cascading" means that styles can be layered, and if there are multiple rules, the most specific one will win.

Here’s a simple example: If you want to make the text of a heading red, you can write this in your CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Heading in Red</h1>
</body>
</html>

CSS Syntax

CSS Syntax refers to the set of rules that define how CSS is written and how it is applied to HTML elements in a webpage. CSS syntax generally consists of three key components:

  1. Selector The selector is used to specify which HTML element(s) you want to apply the CSS styles to. It can target a single element, a group of elements, or even elements based on their attributes or classes.

  2. Property The property defines the specific style or behavior you want to apply to the targeted element(s). Examples of properties include color, font-size, background-color, margin, etc.

  3. Value The value is what you assign to the property. It defines the specifics of how the property should appear or behave. For example, if the property is color, the value could be red, blue, or a hex code like #FF0000.

Example of CSS Syntax:

Let’s break down an example where we want to change the color of the heading:

  • Selector : h1 — This targets all <h1> elements (headings) in the HTML document.

  • Property : color — This specifies what aspect of the element we are styling, in this case, the text color.

  • Value : red — This specifies the color you want to apply to the text of the <h1> element.

How to Include CSS in HTML?

There are three common ways to include CSS in an HTML document:

  1. Inline CSS
    Inline CSS is used to apply styles directly within an HTML element. You do this by adding a style attribute to the opening tag of an element. Inside this attribute, you define the property-value pairs, separating each pair with a semicolon. Inline CSS is applied to a specific element.

  1. Internal CSS

    Internal CSS is written within the <style> tag, which is placed inside the <head> section of the HTML document. This method allows you to write CSS rules that apply to multiple elements within the same HTML document.

  1. External CSS
    External CSS involves writing CSS in a separate file with a .css extension and linking it to your HTML document. This is the most efficient way to manage styles for large websites, as it allows you to separate the structure (HTML) from the design (CSS).

Using Multiple CSS Methods :

You can use all three types of CSS (inline, internal, and external) in a single HTML document, but it is generally considered best practice to use external CSS for most styling. This helps to keep the HTML and CSS separate, making your code easier to maintain and manage.

If you use multiple methods in one document, priority matters. The order of precedence (specificity) for CSS is as follows:

  • Inline CSS: This has the highest priority. If a property is defined in an inline style, it will override both internal and external CSS for that specific element.

  • Internal CSS: Internal styles defined within the <style> tag come next in priority. These styles override external CSS, but they can be overridden by inline CSS.

  • External CSS: This has the lowest priority. External CSS styles are applied unless overridden by internal or inline CSS.

CSS Selectors

CSS selectors are patterns used to select and target HTML elements to which you want to apply CSS styles. Selectors are fundamental to styling, as they define which elements will be affected by a given rule.

Here are some common types of selectors in CSS:

  1. Tag Selector
    A tag selector (also known as an element selector) is used to target all elements of a specific tag (HTML element) in the document. For example, using h1 as a tag selector will target all <h1> elements.

  2. Class Selector
    A class selector is used to target elements with a specific class attribute. Multiple elements can share the same class, and the styles will be applied to all elements that have the matching class. A class is defined with a . symbol.

  3. ID Selector
    An ID selector is used to target an element with a specific ID. Unlike class selectors, an ID is unique, meaning it should be used to identify one single element on the page. An ID is defined with a # symbol.

Additional CSS Selectors

There are many other selectors available in CSS to provide more flexibility and control over which elements you target. Some of these include:

  • Attribute Selectors : Select elements based on the presence or value of an attribute. Descendant and

  • Child Selectors : Select elements that are descendants or direct children of other elements.

  • Pseudo-classes : Target elements based on their state (e.g., :hover, :focus).

  • Pseudo-elements : Target specific parts of elements, such as ::before or ::after.

    💡
    To learn more about advanced selectors, you can explore resources like W3Schools CSS Selectors.

Summary

CSS, or Cascading Style Sheets, is a powerful tool to make your website look visually appealing by customizing colors, fonts, layouts, and more. It works by applying styles to HTML elements using a syntax that includes selectors (to target elements), properties (to define the style), and values (to specify the style details).

You can include CSS in your HTML in three ways:

  1. Inline CSS: Add styles directly inside an element's style attribute.

  2. Internal CSS: Use a <style> block within the <head> section of the HTML.

  3. External CSS: Write styles in a separate .css file and link it to your HTML.

When using multiple methods, remember that inline CSS has the highest priority, followed by internal CSS, and then external CSS.

CSS also uses selectors to target elements for styling. Common ones include:

  • Tag selectors to style all elements of a certain type.

  • Class selectors (e.g., .classname) to style multiple elements with the same class.

  • ID selectors (e.g., #idname) to style a unique element.

By mastering CSS, you can create clean, attractive, and professional designs for your website. Happy styling! 🎨

ChaiCodeCSSCSS3Css basicsWeb Development