Learn to Code

Introduction to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It describes how semantic HTML content is presented on screen, on page, in speech, etc. CSS can be used to style websites and other documents to be displayed on the screen. CSS can be used to style all the elements on a page, from the text to the layout, colors, and even animations.

CSS Selectors

Selectors are used to "find" (or select) the HTML elements you want to style. You can select elements based on their:

• Tag name (e.g., p, h1, div)
• ID attribute (e.g., #my-unique-id)
• Class attribute (e.g., .my-class)
• Attributes (e.g., [type="text"])
• And many more advanced combinations!

Common Selector Types:

Element Selector: Selects all elements of a specific type.

Class Selector: Selects elements with a specific class attribute.

ID Selector: Selects an element with a specific ID attribute. IDs must be unique!

Attribute Selector: Selects elements based on their attributes and values.

Properties and Values

CSS rules consist of a selector and a declaration block. The declaration block contains one or more declarations, separated by semicolons. Each declaration consists of a CSS property name and a value, separated by a colon.

Property: The style attribute you want to change (e.g., color, font-size, margin).

Value: The specific setting for the property (e.g., red, 16px, 20px).

Example:

selector {
  property: value;
}

p {
  color: navy;
  font-size: 16px;
  margin-bottom: 10px;
}
            

The CSS Box Model

The CSS Box Model is essentially a box that wraps around every HTML element. It consists of:

• Content: The actual text, image, etc.
• Padding: Transparent space around the content.
• Border: A line that goes around the padding and content.
• Margin: Transparent space outside the border.

Understanding the box model is crucial for layout and sizing.

.element {
  width: 200px; /* Content width */
  height: 100px; /* Content height */
  padding: 20px; /* Space inside the border */
  border: 5px solid black; /* Border around padding */
  margin: 15px; /* Space outside the border */
}
            

With the default box-sizing: content-box;, the total width would be 200px (content) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 250px.

Using box-sizing: border-box; makes the width and height properties include the padding and border, which is often more intuitive:

.element {
  box-sizing: border-box;
  width: 200px; /* Includes content, padding, and border */
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}
            

The `display` Property

The `display` property specifies how an element should be displayed. Key values include:

• block: Takes up the full width available, always starts on a new line (e.g., div, p, h1).
• inline: Takes up only as much width as necessary, does not start on a new line (e.g., span, a, strong).
• inline-block: Like inline, but allows setting width, height, and vertical margins/paddings.
• none: Hides the element completely; it's removed from the document flow.
• flex: Enables flexbox layout for direct children.
• grid: Enables grid layout for direct children.

Example:

.block-element {
  display: block;
  width: 50%;
}

.inline-element {
  display: inline;
  color: purple;
}

.hidden-element {
  display: none;
}
            

CSS Positioning

The position property specifies the type of positioning method used for an element. It affects how elements are placed in relation to other elements or the viewport.

• static: Default value. Elements are positioned according to the normal flow of the document.
• relative: Positioned relative to its normal position. Properties like top, right, bottom, and left apply.
• absolute: Positioned relative to its nearest positioned ancestor. If no ancestor is positioned, it's positioned relative to the initial containing block.
• fixed: Positioned relative to the viewport. It always stays in the same place even when the page is scrolled.
• sticky: A hybrid of relative and fixed. It's treated as relative until it crosses a specified threshold, then it becomes fixed.

Remember that top, right, bottom, and left properties only work when the position is not static.

Colors and Backgrounds

Styling elements often involves setting their colors and backgrounds.

• Color: Sets the text color.
• Background-color: Sets the background color of an element.
• Background-image: Sets one or more background images for an element.
• Background-repeat: Controls if/how background images are repeated.
• Background-position: Sets the initial position for each background image.
• Background-size: Specifies the size of the background images.

Color values can be specified using:

• Color names (e.g., red, blue)
• Hexadecimal codes (e.g., #FF0000)
• RGB values (e.g., rgb(255, 0, 0))
• RGBA values (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red)
• HSL/HSLA values

Example:

.styled-text {
  color: #3366cc; /* A nice blue */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 5px;
}
            

Fonts and Text Styling

Control the appearance of text with CSS properties related to fonts and text formatting.

• Font-family: Specifies the font for an element (e.g., 'Arial', sans-serif). Always provide fallback fonts.
• Font-size: Sets the size of the font (e.g., 16px, 1.2em, small).
• Font-weight: Sets the boldness of the font (e.g., normal, bold, 700).
• Text-align: Aligns text within an element (e.g., left, center, right).
• Text-decoration: Adds decorations like underlines or strikethroughs (e.g., none, underline).
• Line-height: Adjusts the space between lines of text.

Example:

h1 {
  font-family: 'Georgia', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  color: #0056b3;
}

p.intro {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.1em;
  line-height: 1.7;
}
            

Keep practicing and experimenting to master CSS! Each property offers a world of possibilities for designing beautiful and functional web pages.