CSS Syntax

What is CSS Syntax?

CSS syntax refers to the set of rules and guidelines that define how the CSS code is written. CSS syntax is composed of a series of rules that define the styles to be applied to elements within a web page. These rules are made up of selectors and declarations:

Selectors: These are patterns used to select the elements you want to style.
Declarations: Once you select the elements, declarations are used to specify the styles.

A basic example of CSS syntax looks like this:

selector {
    property: value;
}

Selector targets the HTML element you want to style.
Property is the aspect of the element you want to change (like color, font, margin).
Value specifies what value that property should take.

Components of CSS

Let's dive deeper into each component:

1. Selectors

Selectors are the names given to elements in HTML to which a specific set of styles will be applied. Types of selectors include:

Element Selector: Targets HTML elements directly.
Class Selector: Targets elements with a specific class attribute. It’s prefixed with a dot (e.g., .classname).
ID Selector: Targets elements with a specific ID. It’s prefixed with a hash (#) symbol (e.g., #idname).
Attribute Selector: Targets elements based on an attribute or attribute value.

Example: Let's consider an HTML document with a paragraph and a division element:

<p>This is a paragraph.</p>
<div class="box">This is a box.</div>

To style these elements, your CSS might look like:

p {
    color: blue;
}
 
.box {
    color: red;
}

2. Declarations

Declarations are statements that define how the elements selected by the selectors should be styled. Each declaration includes a property and a value, separated by a colon and concluded with a semicolon.

Example:

p {
    color: blue;
    text-align: center;
}

Here, color and text-align are properties, and blue and center are the corresponding values.

Using CSS Syntax in a Web Page

To apply CSS to a web page, you can use three different methods:

Inline Styles: Directly in the HTML elements using the style attribute.
Internal CSS: Within a <style> tag in the HTML document’s <head> section.
External CSS: Linking to an external CSS file using the <link> element.

Example of Inline Styles:

<p style="color: blue;">This is a blue paragraph.</p>

Example of Internal CSS:

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

Example of External CSS: First, create a CSS file named styles.css:

p {
    color: red;
}

Then link this CSS file in your HTML document:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Consider making a simple profile card using HTML and CSS. Here is how you can structure your HTML and apply CSS to make it visually appealing.

HTML:

<div class="profile-card">
    <img src="profile.jpg" alt="Profile Picture">
    <h1>John Doe</h1>
    <p>Web Developer from New Delhi, India.</p>
    <a href="mailto:john.doe@example.com">Contact</a>
</div>

CSS (External):

.profile-card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 300px;
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    background: #f9f9f9;
}
 
.profile-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: -50px;
}
 
.profile-card h1 {
    margin: 0;
    color: #333;
}
 
.profile-card p {
    color: #666;
}
 
.profile-card a {
    color: blue;
    text-decoration: none;
}

This CSS will create a card with a nice shadow, rounded corners, and formatted text. The image is rounded, resembling a profile picture. This is a basic yet practical application of CSS to create a visually appealing web component.

Conclusion

Understanding CSS syntax is crucial for web developers to effectively style web pages. By learning about selectors, properties, values, and different methods of including CSS in HTML, developers can control the look and feel of web pages precisely. The examples provided here offer a starting point, but the possibilities with CSS are nearly limitless. Experiment with different properties and values to see their effects and refine your understanding of this powerful styling language.

Pleaseto use the Copilot