Skip to main content

CSS

Updated Mar 20, 2019 ·

Overview​

CSS (Cascading Style Sheets) is used to style HTML elements.It follows a simple structure with rules applied to elements.

  • Selectors define which elements to style
  • Properties specify what to change
  • Values determine how the property is changed

Each rule follows the format:

selector {
  property: value;
}

Linking External CSS​

In practice, you have an index.html file and link a separate CSS file where all styling is configured. This keeps styles separate and easier to manage.

index.html
<head>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Hello World</title>
</head>
styles.css
body {
  background-color: #62bbd9;
  font-family: Arial;
  font-size: 20px;
  /* add other attributes here */
}

CSS Selectors​

Selectors determine which elements are affected by CSS rules.

  • h1 targets all <h1> elements
  • .class targets elements with a specific class
  • #id targets a unique element with an ID

For example, the code below makes all <h1> elements red.

h1 {
  color: red;
}

For more information, please see CSS Selectors.

The CSS Box Model​

Every HTML element is a rectangular box. The box model consists of content, padding, border, and margin. Some elements may not have padding or margins.

  • Content

    • The actual text or image inside the element.
    • Defines the element's main area.

  • Padding

    • Space between content and the border.
    • Inside the box, surrounding the content.

  • Border

    • A line that surrounds the padding and content.
    • Can have different styles, colors, and thicknesses.

  • Margin

    • Space outside the border, separating elements.
    • Creates gaps between elements on the page.

  • Fill Area

    • Can be filled with a background image or color.
    • Applies to content box AND entire box (including padding and border).

Global Reset​

To set a default margin and padding for all elements, you can use a global reset. Add this at the top of your CSS file.

* {
  margin: 5px;
  padding: 10px;  /* Add more attributes as you need */
  box-sizing: border-box;
}

The box-sizing property ensures that padding and border are included in the element’s total width and height.

CSS Specificity​

Specificity determines which CSS rule applies when multiple rules target the same element. More specific selectors override less specific ones.

For example, consider the HTML and CSS files below:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="highlight" id="important">This text will be red.</p>
</body>
</html>
style.css
p {                               /* Least specific */
  color: blue; 
}      

.highlight {                      /* More specific */             
  color: green; 
}      

#important {                       /* Most specific */       
  color: red; 
}

In this case, the <p> element has a:

  • tag selector (p),
  • a class (.highlight), and
  • an ID (#important).

The browser applies the #important rule because IDs have the highest specificity, overriding the class and element selectors. You can see this in Developer Tools, where the less specific rules appear crossed out.

Inline Styles Override Other Styles​

Inline styles override all other styles, including external and internal CSS.

In the example below, the background-color for <body> is set in three places:

  • Inline style (style="background-color: pink")
  • Internal CSS (inside <style> in the <head>)
  • External CSS (in style.css)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
</head>

<style>

  body {
    background-color: wheat;
  }

</style>

<body style="background-color: pink">
  <p>
    Hello World
  </p>
</body>
</html>
style.css
body {
  background-color: lightblue;
}

p {         
  font-size: 100px;      
  color: black; 
}

In Developer Tools, the internal and external styles appear crossed out because inline styles take precedence.

Disabling the inline style applies the internal CSS (background-color: wheat).

Finally, disabling the first two applies the external CSS (background-color: lightblue).

Source Order Matters​

When multiple external stylesheets have competing styles, the order in which they are specified in the HTML file determines which one takes effect.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="styles2.css"> <!-- This will take priority -->
</head>
<body>
  <a href="#">This link will be green.</a>
</body>
</html>
styles.css
a { color: blue; }
styles2.css
a { color: green; } /* This takes effect */

Margins and Paddings​

To control spacing for specific elements, you can set padding and margin individually. The example below specifies padding for each side separately.

h1 {
  padding-bottom: 25px;
}

h2 {
  padding-top: 20px;
  margin-left: 30px;
}

For padding:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

For margin:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

Another useful trick is text-align, which allows you to position text to the left, center, or right.

h2 {
  padding-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

Styling Text​

Text should be readable against a background.

  • Use font-size to adjust text size
  • Set color for contrast
  • Use strong tags to highlight important text

These changes make the text stand out and improve readability.

h1 {
    font-size: 3rem;
    color: #ffffff;
}

Output:

<h1><strong>Welcome to Our Site</strong></h1>

Horizontal Line​

A horizontal line (hr) adds visual separation in a webpage.

  • Add the hr tag to your HTML file first:

    <hr>

  • Then customize it in your CSS file:

    hr {
        border-color: #ee4b08;
        border-width: 3px;
        max-width: 65px;
    }

Dot or No Dot​

In CSS, whether a selector has a . (dot) or not depends on what type of element it is targeting:

  1. No dot (.) → Targets an HTML element (Tag Selector)

    • Targets all instances of an element (e.g., all <p> tags)

    • Example:

      h1 {
        font-size: 3.5rem;
        color: azure;
      }

  2. With a dot (.) → Targets a CSS class (Class Selector)

    • Class selectors target specific elements by assigning them a class.

    • Example: This applies styles to any element with class="buffer", like:

      index.html
      <button class="btn">Click Me</button>
      style.css
      .btn {
        font-weight: 700;
        border-radius: 300px;
        text-transform: uppercase;
      }

For more information, please see CSS Selectors.


Feedback