What is CSS?

CSS (Cascading Style Sheets) is a style language used to control the appearance and formatting of web pages. While HTML defines the content of web pages, CSS determines how that content is displayed (colors, fonts, layout, etc.). CSS allows web pages to have a consistent and aesthetic appearance by defining the style of HTML elements individually or in groups.

Separation of Concerns: CSS provides a more organized and manageable structure by separating content (HTML) and presentation (CSS).
Reusability: CSS rules can be applied to multiple HTML elements, which reduces code repetition and speeds up the development process.
Flexibility: CSS allows for different style definitions for different devices (desktop, tablet, mobile) (responsive design).

Example:


<!DOCTYPE html>
<html>
<head>
  <title>CSS Example</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a CSS example. The heading is blue and centered, and the paragraph is set to 16 pixels in size and a line height of 1.5.</p>
</body>
</html>

How Does CSS Work?

CSS consists of a set of rules that define the style rules to be applied to HTML elements. Each rule contains a selector and one or more declarations. The selector specifies the HTML element to which the style will be applied, while the declarations define the style properties and values.

The working principle of CSS consists of the following steps:

HTML parsing: The browser parses the HTML document and creates the DOM (Document Object Model) tree.
CSS parsing: The browser parses the CSS rules and creates the CSSOM (CSS Object Model) tree.
Render tree creation: The browser combines the DOM and CSSOM trees to create the render tree. The render tree contains the elements and styles to be displayed on the screen.
Layout: The browser calculates the size and position of each element in the render tree.
Painting: The browser paints the elements in the render tree on the screen.

CSS Sources: CSS rules can be added to an HTML page in three different ways:

Inline CSS: Style rules are defined directly within the HTML element. (Not recommended)
Internal CSS: Style rules are defined within the <head> section of the HTML document, inside the <style> tag.
External CSS: Style rules are defined in a separate .css file and linked to the HTML document using the <link> tag. (Best practice)

CSS Selectors: CSS selectors are used to specify the HTML elements to which the style will be applied. The most commonly used selector types are:

Element selectors: Using the name of the HTML element (e.g., p, h1, div).
Class selectors: Using the class attribute of the HTML element (e.g., .heading, .paragraph).
ID selectors: Using the id attribute of the HTML element (e.g., #main-heading, #content).
Attribute selectors: Using the attributes of the HTML element (e.g., [type="text"], [href^="https://"]).
Pseudo-class selectors: Using a specific state of the element (e.g., :hover, :active, :focus).
Pseudo-element selectors: Using a specific part of the element (e.g., ::before, ::after, ::first-line).

Basic CSS Syntax and Usage

CSS syntax consists of selectors and declaration blocks. A declaration block consists of property and value pairs.

Example:


/* Selector */
h1 {
  /* Declaration block */
  color: blue; /* Property: color, Value: blue */
  text-align: center; /* Property: text-align, Value: center */
}

Basic CSS Properties:

color: Determines the text color.
font-size: Determines the text size.
font-family: Determines the text font.
text-align: Determines the text alignment.
background-color: Determines the background color.
width: Determines the width of the element.
height: Determines the height of the element.
margin: Determines the outer spacing of the element.
padding: Determines the inner spacing of the element.
border: Determines the border of the element.

CSS Values: The values that CSS properties can take vary depending on the property. Some common value types are:

Colors: Color names (e.g., red, blue, green), hexadecimal values (e.g., #FF0000, #00FF00), RGB values (e.g., rgb(255, 0, 0), rgb(0, 255, 0)), HSL values (e.g., hsl(0, 100%, 50%), hsl(120, 100%, 50%)).
Dimensions: Pixel (px), em, rem, percentage (%).
Keywords: auto, inherit, initial.

CSS Box Model

The CSS box model treats every HTML element as a box. This box consists of four parts: content, padding, border, and margin.

Components of the Box Model:

Content: The content of the element (text, image, etc.).
Padding: The space between the content and the border.
Border: The line around the element.
Margin: The space between the element and other elements.

Importance of the Box Model: The box model is important for understanding the size and position of elements. The width and height properties, by default, only determine the size of the content. The padding and border properties are also added to the total size of the element. This behavior can be changed using the box-sizing property.

Example:


.kutu {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

In this example, the content of the box is 200px wide and 100px high. The padding is 20px, the border is 5px, and the margin is 30px. The total width of the box is 200px + 2 * 20px + 2 * 5px + 2 * 30px = 310px. The total height of the box is 100px + 2 * 20px + 2 * 5px + 2 * 30px = 210px.

The following table shows the properties and default values of the different components of the box model:

Property	Description	Default Value
width	The width of the element	auto
height	The height of the element	auto
padding	The padding of the element	0
border	The border of the element	none
margin	The margin of the element	0

CSS Layout Techniques

CSS offers various layout techniques to control the layout of web pages. The most commonly used techniques are:

Normal Flow: Elements are placed from top to bottom and left to right in the order they appear in the HTML.
Positioning: Used to change the position of elements. The position property can take static, relative, absolute, fixed, and sticky values.
Float: Used to align elements to the left or right. It is especially useful for placing images around text.
Flexbox: Flexible box model, used to easily create complex layouts.
Grid: Offers a two-dimensional layout system. It is ideal for creating the main layout of web pages.

Positioning:

static: The default value. Elements are placed in the normal flow.
relative: The element is placed as it would be in the normal flow, but can then be positioned using the top, right, bottom, and left properties.
absolute: The element is removed from the normal flow and positioned relative to its nearest positioned ancestor. If there is no positioned ancestor, it is positioned relative to the document.
fixed: The element is removed from the normal flow and positioned relative to the browser window. It remains fixed even when the page is scrolled.
sticky: The element is placed as it would be in the normal flow, but becomes fixed when a specified scroll threshold is reached.

Flexbox:

Flexbox is a layout model used to place elements flexibly. It has two basic concepts: the main container and the items.

Example:


<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row; /* Arrange items horizontally */
    justify-content: space-around; /* Place items with equal spacing */
    align-items: center; /* Center items vertically */
  }
  .item {
    width: 100px;
    height: 50px;
    background-color: lightblue;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }
</style>

Grid:

Grid is a two-dimensional layout system. It is used to place elements by creating rows and columns.

Example:


<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
    grid-gap: 10px; /* Spacing between items */
  }
  .item {
    background-color: lightgreen;
    border: 1px solid black;
    text-align: center;
    padding: 20px;
  }
</style>

Media Queries in CSS

Media queries are used to define different style rules for different devices and screen sizes. This allows web pages to be responsive. Media queries are defined with the @media rule.

Example:


/* If the screen width is less than 768 pixels */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .menu {
    display: none; /* Hide the menu */
  }
}

/* If the screen width is greater than 768 pixels */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
  .menu {
    display: block; /* Show the menu */
  }
}

Common Media Query Use Cases:

Creating different layouts for different screen sizes.
Using different font sizes and colors for different devices (desktop, tablet, mobile).
Defining custom style rules for printing.
Applying different style rules based on screen orientation (portrait or landscape).

The following table shows common media query features and their uses:

Property	Description	Example
max-width	Maximum screen width	@media (max-width: 768px)
min-width	Minimum screen width	@media (min-width: 768px)
orientation	Screen orientation (portrait or landscape)	@media (orientation: portrait)
print	Style rules for printing	@media print

CSS Preprocessors

CSS preprocessors are tools used to make CSS more powerful and flexible. The most popular CSS preprocessors are:

Sass (Syntactically Awesome Style Sheets): Offers features such as variables, nested rules, mixins, and functions.
Less (Leaner Style Sheets): Offers similar features to Sass.
Stylus: A CSS preprocessor with a flexible syntax.

Advantages of CSS Preprocessors:

Reduce Code Repetition: Reduces code repetition thanks to variables and mixins.
Better Organization: Allows for better code organization thanks to nested rules and modular structures.
Easier Maintenance: Allows you to easily manage style changes thanks to variables.
Functions: Allows you to use functions for complex calculations and style manipulations.

Sass Example:


/* Variables */
$primary-color: #007bff;
$secondary-color: #6c757d;

/* Mixin */
@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Nested rules */
.container {
  width: 80%;
  margin: 0 auto;

  h1 {
    color: $primary-color;
    text-align: center;
  }
}

/* Mixin usage */
.btn-primary {
  @include button-style($primary-color);
}

.btn-secondary {
  @include button-style($secondary-color);
}

This Sass code, after being compiled, turns into the following CSS code:


.container {
  width: 80%;
  margin: 0 auto;
}

.container h1 {
  color: #007bff;
  text-align: center;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

CSS Case Study: Designing a Responsive Website

Let's assume we want to create a responsive design for an e-commerce website. This design should look good on desktop, tablet, and mobile devices and maximize the user experience.

Step 1: Creating the HTML Structure

First, we create the basic HTML structure of the website:

E-Commerce Site

Products

Product 1 Name

Product 1 Description

100 TL

Product 2 Name

Product 2 Description

150 TL


/* For mobile devices (if screen width is less than 768px) */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Hide the menu */
  }

  .product-list {
    flex-direction: column; /* Display products in a single column */
  }

  .product {
    width: 100%; /* Make the width of the products 100% */
  }
}

This case study demonstrates how CSS controls the appearance and formatting of websites, and how media queries are used to create responsive design.