Introduction to CSS: Learn How to Style Your Web Pages from Scratch

Introduction:

Cascading Style Sheets, better known as CSS, are a fundamental tool in web design that bring life and style to Internet pages. In this article, we will explore the basic concepts of CSS, its syntax with simple examples, and the key terms surrounding this language.

💡For this tutorial blog, we need to have knowledge of HTML; if not, I personally recommend reading a bit about this topic. Here is a link to its documentation: https://developer.mozilla.org/es/docs/Web/HTML

CSS Structure

The basic structure of a CSS style file is quite simple. Below is an example of what the structure of a style file looks like:

/* Comment in CSS */

/* Styles for the body of the page */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

/* Styles for headers */
h1, h2, h3 {
    color: #0066cc;
}

/* Styles for paragraphs */
p {
    margin-bottom: 10px;
}

/* Styles for links */
a {
    color: #990000;
    text-decoration: none;
}

/* Styles for links on mouse hover */
a:hover {
    text-decoration: underline;
}

This basic structure consists of rule blocks, where each block has a selector that targets a specific type of HTML element, and inside the block, in summary, CSS selects the HTML elements and tells them how they should be displayed. There is a series of properties and values that define how those elements should appear.

• Comments in CSS are written between /* and */ and are optional but can be useful for documenting your code.
• Rule blocks start with a selector (such as body, h1, p, a, etc.) followed by a set of properties and values enclosed in braces {}.
• Each property and value are separated by a colon (:) and end with a semicolon (;).
• Rule blocks are separated by blank lines.

This is a basic structure, and complexity can increase depending on the number of styles and the organization of the project. Additionally, comments and whitespace can be used to improve code readability and maintainability.

CSS Selectors:

In CSS (Cascading Style Sheets), selectors are patterns used to select and apply styles to specific elements in an HTML document. Selectors allow targeting one or multiple HTML elements and defining how those elements should be displayed.

Types of Selectors

1. Element Selector:

CSS:

p {
	background-color: yellow;
    /* Styles for paragraphs */
}

Here is a representation of how it would be used directly in an HTML file

‍

2. ID Selector:‍

CSS:

#myElement {
    /* Styles for the element with ID "myElement" */
}

HTML example:

3. Class Selector:

CSS:

.myClass {
    /* Styles for all elements with the class "myClass" */
}

HTML:

4. Descendant Selector:

CSS:

HTML:

5. Child Selector:

CSS:

HTML:

6. Attribute Selector:

CSS:

input[type="text"] {
    /* Styles for all input elements of type text */
}

HTML:

7. Universal Selector

In CSS, the universal selector is used and applies styles to all HTML elements on the page. In this case, you are changing the text color to "red" for all elements.

* {
  color: red;
/* This rule makes all HTML elements on the page have active colored text. */
}

Selector Specificity:

The specificity of selectors in CSS is a crucial concept to determine which style rules will prevail in case of conflicts. It is calculated by assigning weighted values to selectors, and the higher the specificity, the more weight the rule will have when applying styles. The hierarchy is essential as it determines the priority of the rules. Selectors like ID have higher specificity than type or class selectors. Understanding these principles helps resolve style conflicts and write more effective and maintainable code.

• Universal (*): Has low specificity.
• Type (p, div, etc.): Has low specificity.
• Class (.class): Has higher specificity than type selectors.
• ID (#id): Has even more specificity than classes.

Example of specificity comparison:

• #myId .myClass: High specificity (1 ID, 1 class).
• div .myClass: Moderate specificity (1 type, 1 class).
• .myClass.myOtherClass: Moderate specificity (2 classes).

🚨 If two rules have the same specificity, the rule that appears later in the stylesheet will prevail.

‍‍

Properties and Values

Here are some examples of CSS properties:

1. Font color:

• Property: color
• Value: Can be a color name (like "red" or "blue") or a hexadecimal code (like "#ff0000" for red).

2. Content background:

• Property: background
• Value: Defines the background of an element. It can be a color, an image, etc.

3. Font:

• Property: font-family
• Value: Specifies the font family of the element. It can be a generic or specific font, like "Arial", "Helvetica", etc.

4. Font size:

• Property: font-size
• Value: Defines the font size. It can be in pixels, em, rem, percentages, etc.

5. Font style:

• Property: font-style
• Value: Can be "normal", "italic", or "oblique".

6. Font weight:

• Property: font-weight
• Value: Defines the font weight. It can be "normal", "bold", numbers (for example, 400 for normal, 700 for bold).

7. Line spacing:

• Property: line-height
• Value: Defines the vertical space between lines of text.

8. Margins:

• Property: margin
• Value: Defines the margins around the element. It can be a single value for all sides or four values for specific margins (top, right, bottom, left).

9. Padding:

• Property: padding
• Value: Defines the internal space around the content of an element.

10. Borders:

• Properties: border-width, border-style, border-color
• Values: Defines the width, style, and color of an element's border.

body {
  color: #333; /* Text color in hexadecimal */
  background-color: #f4f4f4; /* Background color in hexadecimal */
  font-family: 'Arial', sans-serif; /* Main font with sans-serif fallback */
  font-size: 16px; /* Font size in pixels */
  font-style: italic; /* Font style: normal, italic, oblique, etc. */
  line-height: 1.5; /* Line spacing, multiplied by font size */
  margin: 20px; /* External margins of the page */
  padding: 10px; /* Internal padding of the content */
  border: 1px solid #ccc; /* 1-pixel solid border with color in hexadecimal */
}

Box Model

The box model is fundamental to understanding how elements are structured and sized in CSS.

Content

It is the area where the actual content of the element is displayed, such as text, images, or other nested HTML elements, like paragraphs (<p>), headings (<h1>, <h2>, etc.), among others.

Padding

Space between the content and the border; this additional space is useful to improve readability and page aesthetics, as well as to ensure that the content is not too close to the edges of the element.

/* Set all paddings at once */
.my-element {
   padding: 10px;
}

.my-element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Border

It is the line that surrounds the content of an HTML element, and through the CSS property border, you can easily customize its size, style, and color, adjusting it to your design preferences.

.my-element {
    border: 1px solid red;
}

Margin:

The margin property determines the space around an element. This space, known as margin, can be customized for each of the four sides of the element: top, right, bottom, and left.

/* Set all margins at once */
.my-element {
    margin: 10px;
}

.my-element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Margins are not limited to positive values only; they can also be negative, which can be useful in certain design cases.

Positioning

• static: It is the default position. The element follows the normal document flow.
• relative: Allows moving an element from its normal position without affecting other elements.
• absolute: The element is positioned relative to its first positioned ancestor (that does not have static position).
• fixed: The element is positioned relative to the browser window.

Responsiveness

• Media Queries: Allow applying styles based on device characteristics, such as screen width.

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

• ‍Relative Units: Use relative units like percentage or em instead of absolute units so elements adjust proportionally to screen size.

• Flexbox and Grid: Flexible and grid layouts that facilitate creating responsive interfaces.

.container {
  display: flex;
  justify-content: space-between;
}

Advantages of Using CSS:

• CSS (Cascading Style Sheets) offers numerous advantages to programmers in application development, whether in desktop or mobile environments. Below are some of the main advantages:
• Separation of Content and Presentation: CSS allows separating the HTML structure from the visual style. This improves code readability, facilitates maintenance, and makes it easier to make design changes without affecting content structure.
• Style Reuse: You can define styles in a CSS file and apply them to multiple web pages. This facilitates visual consistency across a website and reduces code duplication.
• Ease of Maintenance: For example, by centralizing styles in CSS files, any design change can be efficiently made and affect all pages using that style. This simplifies the maintenance and update process.
• Accessibility: CSS provides tools to improve web accessibility, allowing developers to create pages that are more friendly for people with visual or other disabilities. For example, styles can be defined to improve text readability or enable the use of screen readers.
• Flexibility and Control: CSS provides a high degree of flexibility and control over a web page's design. Developers can apply styles to specific elements, create responsive layouts, and adapt to different devices and screen sizes.
• Compatibility with Multiple Devices: Thanks to CSS's responsive design capabilities, it is possible to create websites that look good and function properly on a variety of devices, from desktop computers to tablets and mobile phones.
• Standards Compliance: CSS follows standards defined by the World Wide Web Consortium (W3C), ensuring consistency and compatibility across browsers. Using standards facilitates creating websites that behave predictably in different environments.

CSS Project - Weather Widget:

• To start our CSS exercise with HTML, the first step is to have a code editor. In my case, I am using Visual Studio Code. Once we have the editor, we will proceed to create two files: one called index.html where we will store the project's HTML code, and another called style.css where we will develop the CSS styles, as well as create a folder where we can store the images to be used, as shown below.

In the HTML file, we will start with the project structure. As an example, we will place the first card (card) of the project, where we will store the main weather features. We will include information such as the city to which the weather is attributed, wind speed, rain changes, and humidity, and the classes will be where we assign the classes that we will create in style.css

In this CSS code, initially, the main font for the entire document is set using the rule applied to the body selector. Subsequently, the weather-container selector configures the background with an image and adjusts general visual aspects. Additionally, the current section (current) features a gradient background and specific styles for the text. Temperatures and additional details have specific sizes and colors.

body {
  font-family: Arial, Helvetica, sans-serif;
}

/*Icon style*/
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Can be changed to rem, em, etc. */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.weather-container {
  background-image: url("/img/nuebes-sol.jpeg");
  background-size: cover;
  color: white;
  font-size: 18px;
  max-width: 450px;
  margin: 10px auto;
  background-color: #333;
  padding: 10px;
  border-radius: 50px;
}

.current {
  background: rgba(46, 112, 210, 0.46);
  background: linear-gradient(
    0deg,
    rgb(16, 99, 163) 0%,
    rgb(3, 150, 255) 42%,
    rgba(3, 200, 255, 0.466) 100%
  );
  border-radius: 40px;
  padding: 40px;
}
.city {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 10px;
}
.day {
  text-align: center;
}

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

.info .temperature {
  font-size: 48px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info .temperature .temperature-now {
  font-size: 70px;
  margin: 0;
}
.info .temperature .temperature-low {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7);
}
.status {
  color: rgba(255, 255, 255, 0.7);
}
.more {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  gap: 10px;
  text-align: center;
}

.icon span {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.7);
}
.text {
  font-weight: bold;
}
.type {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

All the presented code is contained within the weather-container div. In this second part of the HTML, the following days are defined along with the weather they will experience and the respective temperatures.

This section of the CSS code is dedicated to styling the list (list) of the weather widget, which shows the weather forecast for several days. In this specific part of the code, style rules are implemented to ensure a responsive design using media queries (media query). This ensures that the forecast presentation is appropriate and readable on different screen sizes, thus contributing to an improved user experience.

/* Second part */
.list {
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.day-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
  width: 123.3px;
  font-weight: bold;
}
.weather {
  width: 123px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.temperature {
  width: 123px;
  display: flow;
}

.temperature-low {
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 450px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .list {
    padding: 50px 40px;
    gap: 20px;
  }

  .day-list {
    height: max-content;
    display: flex;
    flex-direction: column;
    background: rgba(46, 112, 210, 0.46);
    background: linear-gradient(
      0deg,
      rgba(16, 99, 163, 0.424) 0%,
      rgba(3, 150, 255, 0.541) 42%,
      rgba(3, 200, 255, 0.466) 100%
    );
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  }

  .name {
    width: auto;
    margin-bottom: 0;
  }

  .weather {
    width: auto;
    flex-direction: row;
    align-items: center;
  }

  .temperature {
    width: auto;
    text-align: right;
  }
}

This is the final result of the project:

The complete project is available at the following link in my GitHub repository:

https://github.com/karlacabanas01/widget-clima-css

References and tools to continue learning:

• https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS
• https://web.dev/learn/css?hl=es-419#pseudo-classes
• Projects with CSS and HTML
• Specificity in CSS.

Ready to style your web projects with CSS?

At Kranio, we accompany you at every stage of your web development learning journey. Our team of experts is ready to help you master CSS and other key technologies to create attractive and functional websites. Contact us and discover how we can boost your growth in the world of web development.