How CSS Works

CSS stands for Cascading Style Sheets. It defines how an HTML page is rendered. CSS is used to arrange elements on the page, add color, background images, and more. Let’s look at how it works.

There are three ways to add CSS rules to a web page:

  1. Inline styles
  2. Internal stylesheets
  3. External stylesheets


The reason for the term cascading is that CSS can be defined at several places in code and cascades down from the most global definitions to the most specific ones. Your site may have global style sheets that pertain to all pages. These are external to your webpage, and things like primary fonts, sizes and colors may be defined there. Internal stylesheets may override some of those styles and define new ones. They apply to a single webpage. Finally, ‘inline’ styles are coded inside the HTML and may apply to just a few objects or even just one.

Priority is given to CSS that resides closest to the HTML object it covers, so inline styles take priority, internal stylesheets next, and then finally, external stylesheets. If the same statement – say one that specifies ‘font-size’ – is specified in all three areas, the inline style would be used. 

In our example, we are using an external stylesheet. In our HTML code sample above, you’ll notice that we reference ‘styles.css’ in the header of the document. 

This means that the HTML document is going to look for ‘styles.css’ and use the defined rules from that file to control the display of content. Keeping the CSS in a separate document is a good practice as it separates the content in the HTML document from its ‘look’.

Below is a copy of the CSS file “styles.css” that is linked to our HTML example.

body {

 margin: 0px;

 background: url(bubbles.jpg) top center no-repeat;

 background-size: 100%;

}

 

h1 {

            font-family:Arial;

            color:#595b82;

            margin-top: 0px;

}

p {

            font-family: Garamond;

}

 

button {

            color: white;

            background-color: #595b82;

            padding:15px 25px;

            border-radius:  20px;

            border-width: 0px;

}

a {

            text-decoration: none;

            color: white;

}

.container {

            width: 55%;

            margin:auto;

            text-align: center;

            background-color: rgba(256,256,256,0.5);

            padding-top: 40px;

            margin-top: 40px;

}

.navbar {

            display: flex;

            color: white;

            width: 85%;

            padding: 35px 0;

            margin: auto;

            align-items: center;

            justify-content: space-between;

}

.navbar ul li {

            list-style:none ;

            display:  inline-block;

            margin: 0 20px;

}

A CSS rule consists of a selector and a declaration block. Let’s look at the CSS rule for our <h1> headline selector.

  • We define the selector first:  ‘h1’.
  • The declaration block starts with an opening curly bracket ‘{‘ and ends with a closing curly bracket ‘}’.
  • Inside the declaration we first state the property which is ‘font-family’.
  • The value of that property is the font typeface, ‘Arial’.


We go on to define another property ‘color’ and give it a value of ‘#595b82’. This is the font color. Our final declaration is to define the value of ‘0px’ to the property of ‘margin-top’. And the declaration block is finished with the closing curly bracket ‘}’. This CSS rule means that every element in the HTML document that has a selector of <h1> will have  these rules applied to it.

The resulting CSS styling of our heading tag looks like this:

There are different types of selectors. The CSS element Selector selects HTML elements based on the element name, like <h1>, <p> or <button>. There is another type of selector called the class selector. This selects an HTML element with a specific class attribute. In our HTML document, we have applied the class of ‘container’ to a div selector. This is how a class selector is defined in our HTML code:

Now let’s look at the CSS code for the class selector ‘container’.

To select elements with a specific class, write a period (.) character, followed by the class name. In the above example, it looks like “.container” followed by the opening declaration block symbol, the opening curly bracket.

  • The next line down states our first declaration of width with a value of 55%. This means that the div element with the class ‘container’ will be 55% of the width of the browser window. Using percentages to define width and other measures allows items to resize based on the size of the browser window, for instance for viewing on a mobile phone rather than a desktop.
  • ‘Text-align’ is the property with a value of ‘center’. This means that the text will be center aligned.
  • ‘Background-color is another property with a value of ‘rgba(256,256,256,0.5)’. This means that the background color for the div block will have a white background that is 50% transparent.
  • ‘Padding-top’ defines the padding inside the element, in this case on top of the element. Here, the value is 40px, which means that 40 pixels of empty space will be shown at the top of and within the element.


So, if the element had a border, there would be 40 px of empty space inside the border.

  • ‘Margin-top’ defines the margin outside of, and on top of, the element. Here, the value is 40px which means that 40 pixels of empty space will be shown at the top of and outside the element, thus, outside of any border.

These are just a few examples of how CSS is defined and interacts with the HTML document.

CSS is a powerful tool to control the visual design of your web page. There are literally hundreds of element definitions. It’s worth your time to explore some links to see more examples of how CSS works.

A great resource to learn and try out CSS code is https://www.w3schools.com/css/default.asp. To see how the navigation items were created from an unordered list <ul>, take a look at https://www.w3schools.com/css/css_inline-block.asp.

To see CSS effects at their most obvious, here’s a screenshot of Amazon.com in January of 2022:

And here is what Amazon.com looks like without CSS!