The basic syntax structure of CSS

Basic Syntax Structure of CSS

CSS (Cascading Style Sheets) is a language used to describe the styling of HTML or XML documents. It controls the appearance and layout of page elements through selectors and declaration blocks. Understanding the basic syntax structure of CSS is key to writing effective stylesheets.

Selectors

Selectors are used to specify which HTML elements to apply styles to. Common types of selectors include:

1. Element Selector: Uses the HTML tag name directly

p {
  color: blue;
}

2. Class Selector: Begins with a dot (.)

.highlight {
  background-color: yellow;
}

3. ID Selector: Begins with a hash (#)

#header {
  font-size: 24px;
}

4. Attribute Selector: Selects based on element attributes

input[type="text"] {
  border: 1px solid #ccc;
}

5. Pseudo-class Selector: Used for specific states of elements

a:hover {
  color: red;
}

Declaration Blocks

Declaration blocks are enclosed in curly braces {} and consist of one or more declarations. Each declaration is composed of a property and value, separated by a colon (:), and ends with a semicolon (;).

selector {
  property1: value1;
  property2: value2;
}

Properties and Values

CSS has hundreds of property-value combinations. Some common properties include:

• Color-related:

color: #FF0000;
background-color: rgba(255, 0, 0, 0.5);
border-color: hsl(120, 100%, 50%);

• Dimension-related:

width: 100px;
height: 50%;
max-width: 1200px;
min-height: 200px;

• Text-related:

font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: center;

Comments

CSS uses /* */ syntax for comments:

/* This is a CSS comment */
body {
  margin: 0; /* Reset default margin */
}

At-rules

At-rules are special directives in CSS that begin with @:

1. @import: Imports other CSS files

@import url("styles/print.css") print;

2. @media: Media queries

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

3. @keyframes: Animation keyframes

@keyframes slidein {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

Values and Units

CSS supports various values and units:

1. Length units:

.box {
  width: 300px; /* Pixels */
  padding: 2em; /* Relative to current font size */
  margin: 5%; /* Relative to containing block's width */
}

2. Color values:

.text {
  color: #FF5733; /* Hexadecimal */
  background: rgb(255, 87, 51); /* RGB */
  border-color: hsl(12, 100%, 60%); /* HSL */
}

3. Function values:

.container {
  width: calc(100% - 40px);
  background: linear-gradient(to right, red, blue);
}

Selector Combinations

Selectors can be combined in various ways:

1. Grouping Selectors: Separated by commas

h1, h2, h3 {
  font-family: "Georgia", serif;
}

2. Descendant Selector: Separated by spaces

article p {
  line-height: 1.6;
}

3. Child Selector: Separated by a greater-than sign (>)

ul > li {
  list-style-type: square;
}

4. Adjacent Sibling Selector: Separated by a plus sign (+)

h2 + p {
  margin-top: 0;
}

Specificity and Inheritance

CSS rules follow specific priority:

1. Inheritance: Some properties inherit from parent elements

body {
  font-family: Arial;
} /* All child elements inherit this font */

2. Specificity Calculation:

• Inline styles: 1000
• ID selectors: 100
• Class/attribute/pseudo-class selectors: 10
• Element/pseudo-element selectors: 1

#content .highlight { /* 100 + 10 = 110 */
  color: red;
}
div.highlight { /* 1 + 10 = 11 */
  color: blue;
}

Box Model

The CSS box model is fundamental to layout:

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* Optional, changes width calculation */
}

Layout-related Properties

1. display:

.inline {
  display: inline;
}
.block {
  display: block;
}
.flex-container {
  display: flex;
}

2. position:

.relative {
  position: relative;
  top: 10px;
}
.absolute {
  position: absolute;
  right: 0;
}
.fixed {
  position: fixed;
  bottom: 0;
}

3. float:

.image {
  float: left;
  margin-right: 15px;
}

Responsive Design Basics

Use media queries to create responsive layouts:

.container {
  width: 100%;
  padding: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

CSS Variables

Custom properties (CSS variables) can store and reuse values:

:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

Pseudo-elements

Pseudo-elements style specific parts of elements:

p::first-line {
  font-weight: bold;
}

blockquote::before {
  content: '"';
  font-size: 2em;
  color: gray;
}

Transitions and Animations

1. Transitions:

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #3367d6;
}

2. Animations:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: bounce 1s infinite;
}

Modern CSS Features

1. Grid Layout:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

2. Flexbox Layout:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Custom Filters:

.image {
  filter: blur(2px) brightness(1.2);
}