Learn CSS Merrimack: Basic Concepts

By /

Okay, here’s a lengthy article (approximately 5000 words) covering the basic concepts of CSS, geared towards someone learning CSS from scratch, with a focus on clarity and practical examples. I’ve titled it “Learn CSS Merrimack: Basic Concepts” as requested, although the “Merrimack” part is just a title element; the content is universally applicable to CSS learning.

Learn CSS Merrimack: Basic Concepts

Welcome to the foundational guide for learning CSS! This article will take you from a complete beginner to someone with a solid understanding of the core principles of Cascading Style Sheets (CSS). We’ll cover everything you need to know to start styling your web pages effectively. No prior CSS knowledge is assumed, but a basic understanding of HTML is beneficial.

1. What is CSS?

CSS stands for Cascading Style Sheets. It’s the language used to describe the presentation of a document written in a markup language like HTML. Think of HTML as the structure of a house (the foundation, walls, and rooms), and CSS as the interior design (the paint color, furniture arrangement, and decorations).

  • HTML provides the content and structure: It defines headings, paragraphs, images, links, and other elements on a web page.
  • CSS controls the appearance: It determines how those elements look – their colors, fonts, sizes, spacing, and positioning.

Without CSS, web pages would be plain text and default browser styles. CSS allows for visually appealing and consistent websites. The “Cascading” part refers to how styles are applied (more on that later).

2. Why Learn CSS?

  • Control Web Page Appearance: CSS gives you complete control over the visual presentation of your websites.
  • Separation of Concerns: CSS separates the content (HTML) from the presentation (CSS). This makes your code cleaner, easier to maintain, and more organized. Changes to the design don’t require altering the HTML structure.
  • Consistency: CSS allows you to define styles once and apply them across multiple pages or elements, ensuring a consistent look and feel throughout your website.
  • Efficiency: By using external CSS files (explained later), you can reuse styles across your entire website, reducing code duplication and making updates much faster.
  • Responsiveness: CSS is crucial for creating responsive websites that adapt to different screen sizes (desktops, tablets, phones).
  • Career Opportunities: CSS is a fundamental skill for web developers and designers.

3. Basic CSS Syntax

CSS rules consist of two main parts: a selector and a declaration block.

css
selector {
property: value;
property2: value2;
/* ... more properties and values ... */
}

  • Selector: The selector targets the HTML element(s) you want to style. It specifies which element(s) the style rules should be applied to.
  • Declaration Block: The declaration block is enclosed in curly braces {}. It contains one or more declarations.
  • Declaration: A declaration consists of a property and a value, separated by a colon :. Each declaration ends with a semicolon ;.
    • Property: The property is the characteristic you want to style (e.g., color, font-size, background-color).
    • Value: The value specifies the setting for that property (e.g., red, 16px, #f0f0f0).

Example:

“`html




My First CSS Example


This is a Heading

This is a paragraph of text.


“`

Explanation:

  • h1 { ... }: The h1 selector targets all <h1> elements in the HTML.
    • color: blue;: Sets the text color of <h1> elements to blue.
    • text-align: center;: Centers the text within the <h1> element.
  • p { ... }: The p selector targets all <p> (paragraph) elements.
    • font-size: 16px;: Sets the font size of the paragraph text to 16 pixels.
    • color: gray;: Sets the text color of the paragraph to gray.

4. Ways to Add CSS to HTML

There are three primary ways to include CSS in your HTML documents:

  • Inline CSS: Styles are applied directly within the HTML element using the style attribute.

    html
    <h1 style="color: blue; text-align: center;">This is a heading</h1>

    • Pros: Quick and easy for small, specific style changes. Overrides other styles (highest specificity).
    • Cons: Not recommended for larger projects. Mixes content and presentation, making code harder to maintain. Styles are not reusable.

  • Internal CSS (Embedded CSS): Styles are placed within a <style> tag inside the <head> section of the HTML document.

    html
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Page</title>
    <style>
    h1 {
    color: blue;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    </body>
    </html>

    • Pros: Keeps styles within the HTML file, making it self-contained. Good for single-page websites or small projects.
    • Cons: Styles are not reusable across multiple pages. Can make the HTML file large and harder to read.

  • External CSS: Styles are placed in a separate .css file, which is then linked to the HTML document using the <link> tag. This is the recommended and most common approach.

    style.css (separate file):

    “`css
    h1 {
    color: blue;
    text-align: center;
    }

    p {
    font-size: 16px;
    color: gray;
    }
    “`

    index.html:

    html
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

    • Pros: Best for code organization and maintainability. Styles are reusable across multiple pages. Reduces code duplication. Improves website loading performance (browser can cache the CSS file). Separates content and presentation completely.
    • Cons: Requires creating a separate file.

The <link> Tag:

  • rel="stylesheet": Specifies that the linked file is a stylesheet.
  • href="style.css": Specifies the path to the CSS file. This can be a relative path (like in the example) or an absolute URL.

5. CSS Selectors: Targeting Elements

Selectors are the heart of CSS. They determine which HTML elements your styles will affect. Here are some of the most important and commonly used selectors:

6. Combining Selectors

You can combine selectors to create more specific and complex targeting.

  • Multiple Classes: An element can have multiple classes. You can target elements with specific combinations of classes.

    html
    <p class="intro important">This is an important introductory paragraph.</p>

    css
    .intro.important { /* Selects elements with BOTH "intro" AND "important" classes */
    color: red;
    }

  • Grouping Selectors: You can apply the same styles to multiple selectors by separating them with commas.

    css
    h1, h2, h3 { /* Applies the same styles to h1, h2, and h3 elements */
    font-family: Arial, sans-serif;
    }

7. CSS Comments

Comments are used to explain your code and are ignored by the browser. They are useful for documentation and debugging.

“`css
/ This is a single-line comment /

/
This is a
multi-line comment.
/
“`

8. The Cascade and Specificity

The “C” in CSS stands for “Cascading.” This refers to the way styles are applied when multiple rules conflict. The browser follows a set of rules to determine which style takes precedence. This is based on:

  • Importance:

    • Styles marked with !important have the highest priority. Use this sparingly, as it can make your CSS harder to maintain.
    • User agent (browser) default styles have the lowest priority.

  • Specificity: A more specific selector will override a less specific selector. Specificity is calculated based on the types of selectors used:

    • Inline styles: Have the highest specificity (1,0,0,0).
    • ID selectors: Have high specificity (0,1,0,0).
    • Class selectors, attribute selectors, and pseudo-classes: Have medium specificity (0,0,1,0).
    • Type selectors and pseudo-elements: Have low specificity (0,0,0,1).
    • Universal selector (*): Has no specificity (0,0,0,0)

    When calculating specificity, you essentially add up the number of each type of selector.

    Examples:

    • #myElement (0,1,0,0) is more specific than .myClass (0,0,1,0).
    • .myClass.anotherClass (0,0,2,0) is more specific than .myClass (0,0,1,0).
    • div p (0, 0, 0, 2) is more specific that just p (0, 0, 0, 1).
    • div > p (0,0,0,2) is the same specificity as div p (0,0,0,2)
    • #content .sidebar a:hover (0, 1, 1, 1) is more specific than .sidebar a (0, 0, 1, 1)

  • Source Order: If two rules have the same specificity, the rule that appears later in the stylesheet (or later in the HTML document for inline and internal styles) will take precedence.

9. Inheritance

Some CSS properties are inherited by child elements from their parent elements. This means that if you set a property on a parent element, its children will automatically inherit that property unless you specifically override it.

Examples of inheritable properties:

  • color
  • font-family
  • font-size
  • font-weight
  • line-height
  • text-align
  • list-style

Examples of non-inheritable properties:

  • background-color
  • border
  • margin
  • padding
  • width
  • height

Example:

“`html

Heading

This paragraph will also be blue because of inheritance.

“`

The <p> element inherits the color: blue; style from its parent <div>.

You can explicitly set a property to inherit to force inheritance, even if it’s not normally inherited:

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

.my-element p {
border: inherit; / Force the

to inherit the border from .my-element /
}
“`

10. Common CSS Properties

Now, let’s dive into some of the most commonly used CSS properties, grouped by their function:

10.1 Text Styling

  • color: Sets the text color. Values can be:

    • Named colors: red, blue, green, black, white, etc.
    • Hexadecimal color codes: #FF0000 (red), #0000FF (blue), #008000 (green), #000000 (black), #FFFFFF (white).
    • RGB color values: rgb(255, 0, 0) (red), rgb(0, 0, 255) (blue).
    • RGBA color values: rgba(255, 0, 0, 0.5) (red with 50% opacity).
    • HSL color values: hsl(0, 100%, 50%) (red).
    • HSLA color values: hsla(0, 100%, 50%, 0.5) (red with 50% opacity).

  • font-family: Specifies the font for the text. You can list multiple fonts, separated by commas. The browser will use the first font it finds installed on the user’s system. It’s good practice to include a generic font family (like sans-serif or serif) as a fallback.

    css
    p {
    font-family: "Arial", "Helvetica", sans-serif;
    }

  • font-size: Sets the size of the font. Common units include:

    • px (pixels): Absolute units.
    • em: Relative to the font size of the parent element.
    • rem: Relative to the font size of the root element (<html>).
    • %: Relative to the font size of the parent element.
    • vw: 1% of the viewport width.
    • vh: 1% of the viewport height.

    css
    h1 {
    font-size: 32px;
    }
    p {
    font-size: 1em;
    }

  • font-weight: Sets the boldness of the text. Values include:

    • normal (default)
    • bold
    • bolder
    • lighter
    • Numeric values (100-900): 100 (thin), 400 (normal), 700 (bold), 900 (extra bold).

    css
    p {
    font-weight: bold;
    }

  • font-style: Sets the style of the text (e.g., italic). Values include:

    • normal (default)
    • italic
    • oblique

    css
    p {
    font-style: italic;
    }

  • text-decoration: Adds decorations to the text. Values include:

    • none (default)
    • underline
    • overline
    • line-through

    css
    a {
    text-decoration: none; /* Removes the underline from links */
    }

  • text-transform: Controls the capitalization of the text. Values include:

    • none (default)
    • uppercase (all letters uppercase)
    • lowercase (all letters lowercase)
    • capitalize (first letter of each word uppercase)

    css
    h1 {
    text-transform: uppercase;
    }

  • text-align: Aligns the text horizontally within its container. Values include:

    • left (default)
    • right
    • center
    • justify (justified text, stretches lines to fill the width)

    css
    p {
    text-align: justify;
    }

  • line-height: Sets the height of each line of text. This affects the spacing between lines.

    css
    p {
    line-height: 1.5; /* 1.5 times the font size */
    }

  • letter-spacing: Adjusts the spacing between characters.

    css
    h1 {
    letter-spacing: 2px;
    }

  • word-spacing: Adjusts the spacing between words.

    css
    p {
    word-spacing: 5px;
    }

  • text-indent: Indents the first line of text in a block.

    css
    p {
    text-indent: 20px;
    }
    * white-space: Controls how whitespace (spaces, tabs, newlines) is handled within an element.

    css
    p {
    white-space: pre; /*Preserves whitespace as it is in the HTML*/
    }

10.2 Box Model Properties

The CSS box model describes how elements are rendered as rectangular boxes. Every element is treated as a box with the following components:

  • Content: The actual content of the element (text, images, etc.).
  • Padding: Space inside the element, between the content and the border.
  • Border: A line that surrounds the padding and content.
  • Margin: Space outside the element, between the border and other elements.

Box Model Diagram
(Image Source: MDN Web Docs)

  • width: Sets the width of the content area.

  • height: Sets the height of the content area.

    css
    div {
    width: 200px;
    height: 100px;
    }

  • padding: Sets the padding on all four sides of the element.

    css
    div {
    padding: 20px; /* 20px padding on all sides */
    }

    You can also set padding individually for each side:

    css
    div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 5px;
    }
    * Shorthand for setting individual padding values: padding: top right bottom left;

    ```css
   div {
     padding: 10px 20px 15px 5px; /*top, right, bottom, left*/
   }
```

    • If you provide only two values, they apply to top/bottom and left/right: padding: vertical horizontal;

      css
      div {
      padding: 10px 20px; /* 10px top/bottom, 20px left/right */
      }
      * If only one value is present, that value applies to all four sides.

  • border: Sets the border on all four sides of the element. It’s a shorthand property for:

    • border-width: The thickness of the border.
    • border-style: The style of the border (e.g., solid, dashed, dotted, double, none).
    • border-color: The color of the border.

    css
    div {
    border: 2px solid blue; /* 2px thick, solid blue border */
    }
    You can also set border values individually for each side:

    css
    div {
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: red;
    }
    * Shorthand: border-top: width style color; (and similar for border-right, border-bottom, border-left).

  • margin: Sets the margin on all four sides of the element. Works similarly to padding.

    css
    div {
    margin: 10px; /* 10px margin on all sides */
    }

    You can set margins individually:

    css
    div {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 15px;
    }

    • Shorthand for setting individual margin values: margin: top right bottom left;
    • If you provide only two values, they apply to top/bottom and left/right: margin: vertical horizontal;

    • If only one value is present, that value applies to all four sides.

    • margin: auto;: When used with a block-level element that has a defined width, margin: auto; will horizontally center the element within its parent container.

      css
      div {
      width: 300px;
      margin: 0 auto; /* Centers the div horizontally*/
      }

  • box-sizing: Controls how the width and height properties are calculated.

    • content-box (default): width and height only include the content area. Padding and border are added on top of the specified width and height.
    • border-box: width and height include the content, padding, and border. This makes it easier to control the overall size of an element.

    css
    div {
    box-sizing: border-box; /* Recommended for easier layout control */
    }
    It’s a very common and useful practice to set box-sizing: border-box; on all elements using the universal selector:

    css
    *, *::before, *::after {
    box-sizing: border-box;
    }

10.3 Background Properties

  • background-color: Sets the background color of an element. Uses the same color values as the color property.

    css
    body {
    background-color: #f0f0f0; /* Light gray background */
    }

  • background-image: Sets a background image for an element. The value is the URL of the image.

    css
    div {
    background-image: url("images/background.jpg");
    }

  • background-repeat: Controls how the background image is repeated. Values include:

    • repeat (default): Repeats the image both horizontally and vertically.
    • repeat-x: Repeats the image only horizontally.
    • repeat-y: Repeats the image only vertically.
    • no-repeat: Does not repeat the image.

    css
    div {
    background-repeat: no-repeat;
    }

  • background-position: Sets the starting position of the background image. Values can be:

    • Keywords: left, right, center, top, bottom (can be combined, e.g., top left).
    • Percentages: 0% 0% (top left), 100% 100% (bottom right).
    • Length values (e.g., px, em).

    css
    div {
    background-position: center center; /* Centers the image */
    }

  • background-size: Controls the size of the background image. Values include:

    • auto (default): The image is displayed at its original size.
    • cover: Scales the image to cover the entire background area, while maintaining its aspect ratio. Parts of the image may be cropped.
    • contain: Scales the image to fit within the background area, while maintaining its aspect ratio. The entire image will be visible, but there may be empty space.
    • Length values (e.g., px, em, %). You can specify both width and height.

    css
    div {
    background-size: cover;
    }

  • background-attachment: Specifies whether the background image is fixed or scrolls with the rest of the page. Values:

    • scroll (default): The background image scrolls with the page content.
    • fixed: The background image remains fixed in the viewport, even when the page is scrolled.

    css
    body {
    background-image: url("images/bg.jpg");
    background-attachment: fixed;
    }

  • background (shorthand): Combines multiple background properties into a single declaration.

    css
    div {
    background: url("images/background.jpg") no-repeat center center / cover;
    /* background-image, background-repeat, background-position, background-size */
    }
    The order of values is somewhat flexible, but generally follow the order shown above. background-color can be included, and it will be applied behind the background-image. If you use the shorthand property, any omitted values will be set to their defaults.

10.4 List Styling

  • list-style-type: Specifies the type of marker for list items (<ul> and <ol>). Values include:

    • For unordered lists (<ul>):

      • disc (default)
      • circle
      • square
      • none (no marker)

    • For ordered lists (<ol>):

      • decimal (default, 1, 2, 3…)
      • decimal-leading-zero (01, 02, 03…)
      • lower-roman (i, ii, iii…)
      • upper-roman (I, II, III…)
      • lower-alpha (a, b, c…)
      • upper-alpha (A, B, C…)
      • none

    css
    ul {
    list-style-type: square;
    }
    ol {
    list-style-type: upper-roman;
    }

  • list-style-image: Uses an image as the list marker.

    css
    ul {
    list-style-image: url("images/bullet.png");
    }

  • list-style-position: Specifies the position of the list marker.

    • inside: The marker

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top