Back to Courses

CSS Fundamentals

CSS is the language that brings life to HTML documents. It is responsible for the visual presentation of web pages, including colors, layouts, fonts, and animations.

Authored by

Table of Content

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. It is responsible for the visual aspects of a web page, including colors, layouts, fonts, and more. In this course, we will cover the basics of CSS, including selectors, properties, and best practices for styling web pages.

Getting Started with CSS

CSS can be applied to HTML documents using either inline styles, embedded stylesheets, or external stylesheets. Inline styles are applied directly to HTML elements using the style attribute.

<p style="color: red;">This is some red text.</p>

Embedded stylesheets are placed within the <style> tags in the head section of an HTML document.

<!DOCTYPE html>
<html>
  <head>
    <style> p {
        color: red;
      } </style>
  </head>
  <body>
    <p>This is some red text.</p>
  </body>
</html>

External stylesheets are created in separate CSS files and linked to the HTML document using the <link> tag.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This is some red text.</p>
  </body>
</html>

IMAGE ALT TEXT HERE

CSS Selectors

CSS selectors are used to target and apply styles to specific HTML elements. Here are some commonly used CSS selectors:

  • Element selector: Targets all elements of a specific type.
p {
  color: blue;
}
  • Class selector: Targets elements with a specific class attribute.
.my-class {
  font-weight: bold;
}
  • ID selector: Targets a specific element with a unique ID attribute.
#my-id {
  background-color: yellow;
}
  • Descendant selector: Targets elements that are descendants of a specific element.
div p {
  font-style: italic;
}
  • Attribute selector: Targets elements with a specific attribute value.
input[type="text"] {
  border: 1px solid gray;
}

CSS Properties

CSS properties are used to define the visual styles of HTML elements. Here are some commonly used CSS properties:

  • color: Sets the text color.
  • background-color: Sets the background color.
  • font-family: Sets the font family.
  • font-size: Sets the font size.
  • padding: Sets the padding around the content.
  • margin: Sets the margin around the element.
  • border: Sets the border properties.
  • width: Sets the width of the element.
  • height: Sets the height of the element.
  • text-align: Sets the alignment of the text.

CSS Box Model

The CSS box model describes the layout of elements on a webpage. It consists of the content, padding, border, and margin of an element.


+---------------------------------------+
|                Margin                 |
|                                       |
|    +-------------------------------+  |
|    |           Border              |  |
|    |                               |  |
|    |    +---------------------+    |  |
|    |    |       Padding       |    |  |
|    |    |                     |    |  |
|    |    |     Content Area    |    |  |
|    |    |                     |    |  |
|    |    +---------------------+    |  |
|    |                               |  |
|    +-------------------------------+  |
|                                       |
+---------------------------------------+

The width and height properties of an element include the content area, padding, and border. The margin is outside the element's border and creates space between elements.

Styling Text

CSS provides various properties to style text. Some commonly used properties include:

  • font-family: Sets the font family.
  • font-size: Sets the font size.
  • font-weight: Sets the font weight (e.g., bold).
  • text-decoration: Sets text decoration (e.g., underline).
  • text-align: Sets the alignment of text (e.g., center, right, left).
  • line-height: Sets the height of a line of text.
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  line-height: 1.5;
}

Styling Backgrounds and Borders

CSS provides properties to style backgrounds and borders of elements. Some commonly used properties include:

  • background-color: Sets the background color.
  • background-image: Sets an image as the background.
  • background-position: Sets the position of the background image.
  • border-width: Sets the width of the border.
  • border-color: Sets the color of the border.
  • border-style: Sets the style of the border (e.g., solid, dashed).
div {
  background-color: #f1f1f1;
  background-image: url("background.jpg");
  background-position: center;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

CSS Units

CSS supports different units for specifying sizes and distances. Some commonly used units include:

  • px (pixels): Absolute unit.
  • % (percentage): Relative to the parent element.
  • em: Relative to the font size of the element.
  • rem: Relative to the root element font size.
  • vw (viewport width): Relative to the viewport width.
  • vh (viewport height): Relative to the viewport height.
div {
  width: 200px;
  height: 50%;
  font-size: 1.2em;
  margin-top: 2rem;
  padding: 10px;
}

CSS Display and Positioning

The display property controls how an element is rendered. Some commonly used values include:

  • block: Renders the element as a block-level element.
  • inline: Renders the element as an inline element.
  • inline-block: Renders the element as an inline-level block container.
  • none: Hides the element.

The position property controls how an element is positioned within its parent. Some commonly used values include:

  • static: The default positioning.
  • relative: Positioned relative to its normal position.
  • absolute: Positioned relative to its nearest positioned ancestor.
  • fixed: Positioned relative to the viewport, does not move during scrolling.

CSS Selectors Specificity

CSS selectors have specificity, which determines which styles are applied when there are conflicting styles targeting the same element. Specificity is calculated based on the combination of selector types used.

In general, the more specific the selector, the higher its specificity. ID selectors have higher specificity than class selectors, which have higher specificity than element selectors.

/* High Specificity */
#my-id {
  color: red;
}

/* Medium Specificity */
.container .my-class {
  color: blue;
}

/* Low Specificity */
p {
  color: green;
}

CSS Best Practices

When writing CSS, it's important to follow some best practices to maintain code readability and organization:

  • Use meaningful class and ID names.
  • Avoid using inline styles whenever possible.
  • Group related styles together.
  • Use comments to describe sections or specific styles.
  • Use external stylesheets for better organization and reusability.
  • Use shorthand properties to reduce code repetition.
  • Regularly check browser compatibility.

Conclusion

Congratulations! You have completed the CSS beginner's course. You have learned the basics of CSS, including selectors, properties, and best practices for styling web pages. With this knowledge, you can start applying styles to your HTML documents and enhance their visual appearance. Remember to practice and experiment with different CSS styles to become proficient in CSS development

Video Resources