CSS: A Website’s Integumentary System

Posted June 27, 2022

INTRODUCTION

Unlike the integumentary system, CSS (Cascading Style Sheets) does not function as a website’s first line of defense. However, CSS is comparable to the integumentary system in that it applies unique visual qualities to a website. While a website can be created using only HTML, without CSS the website will remain visually basic. CSS is what developers use to style a website. Developers assign rules to select parts of HTML which the browser renders visually. Since its advent, CSS has become easier to manipulate. Developers have a variety of tools that makes it easier to work with CSS.

INLINE, INTERNAL, EXTERNAL

In order to use CSS, a developer must first summon CSS. There are multiple ways in which this can be done. The simplest way to implement CSS is to call it “inline”.

<p style="color: blue">This text should be blue.</p>

CSS styling is written right inside the HTML tag. This form of implementing CSS will not be overwritten by other CSS styles. When written inline, CSS styling has priority over CSS written elsewhere.

Another way to implement CSS is internally in the head element.

<head>
    <style>
        p {
            color: blue;
          }
    </style>
</head>

At the top of the html document, developers can start listing various CSS styles. In the above example, all text within paragraph tags would be blue. Inline and internal CSS makes sense if a webpage has minimal CSS involved.

The most common way developers implement CSS into their website is externally.

<link rel="stylesheet" href="styles.css">

This self closing link tag is placed within the head of an HTML document. This link tag indicates that the CSS styling is found on a different document called “styles”. Using external CSS, developers are able to more effectively organize their code as well as incorporate a lot more CSS styling than the other two methods.

SELECTORS

One of the most fundamental aspects of web development is understanding the concept of CSS selectors. Utilizing selectors is how a developer styles specific parts of a website. Developers are able to give html tags classes and ids. These classes and ids help distinguish various sections of an HTML document. More importantly, classes and ids function as selectors when applying CSS styles.

<section id="information">
    <h2 class="subheading">Generic Title</h2>
    <p class="text_content">Generic words used to describe current thing</p>
</section>

In the code above, the section is given an id of “information”. The h2 tag is given a class of “subheading” and the p tag is given a class of “text_content”. The developer uses all of these details when applying CSS rules.

h2 {
    color: blue;
}
p {
   color: green;
}
.subheading {
   color: red;
}
.text_content {
   color: orange
}
#information {
   font: 20px
}

The above styling illustrates how a CSS document could look. We see the first two selectors are simply h2 and p. Both of these selectors are representing all h2 and p elements found in an HTML document. They would be considered element selectors. Selectors that begin with periods indicate a class is being styled. Any html tags with the class “subheading” would have red text and tags with the class “text_content” would have orange text. ID selectors begin with a “#”. The code above would apply a font size of 20 pixels to any tag with the id of “information”. There are a variety of CSS properties a developer needs to know to effectively style a website. There are also a variety of combinators a developer can use when selecting elements to be styled. Memorizing these details is one way of mastering CSS, but a more effective method is to understand how to use CSS based on the situation.

FLEXBOX AND GRID

Flexbox and Grid are ways to more easily organize elements with CSS. When working with flexbox and grid, <div></div> tags are used to organize content. Parent divs are given the property of flex or grid and children elements are more easily organized.

<div class="flex_box">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

.flex_box {
  display: flex;
}

When utilizing flexbox, children elements are contained within a parent element. The parent element is given a “display: flex” property. This allows use of further properties which are applied to the children elements:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Implementing CSS grid is similar to flexbox.

<div class="grid-container">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

.grid-container {
  display: grid;
}

Applying the “display: grid” property to the div with the class grid-container allows for the application of grid properties to the children divs. Content is more easily placed within rows and columns. When flexbox and grid are used in tandem, a developer has complete control of web design, and dealing with CSS is no longer a struggle.

FRAMEWORKS

CSS frameworks exist to simply the design process. Rather than creating everything from scratch, CSS frameworks offer styling that can be applied to projects right away. Popular frameworks such as Bootstrap and Tailwindcss make it extremely easy to implement content such as navigation bars and buttons by implementing premade components.. Often times, the syntax used to implement components from a framework are not the same as CSS styling. For this reason, understanding CSS and how to manipulate it should be a developers first goal. When a developer has a strong understanding of CSS, using frameworks can save a lot of time in the design process.

CONCLUSION

A web developer’s mastery of CSS will lead to command over the design of a website. After an introduction to HTML, CSS is the next step in the web development journey. HTML and CSS go hand in hand. HTML mastery can be achieved through memorization alone. CSS, on the other hand, is difficult to master through memorization. Understanding how to manipulate a webpage with CSS is a skill that must be refined through experience. Mastering the use of flexbox and grid are powerful tools for a web developer. Learning how to use frameworks will often times involve learning completely new syntax. A strong understanding of CSS is a key component to the mastery of design in the web development process.

Understanding The Web