DEV Community

Cover image for Part 2: All You Need to Know to Master Web Development With HTML CSS and JavaScript
Blackie
Blackie

Posted on • Updated on

Part 2: All You Need to Know to Master Web Development With HTML CSS and JavaScript

Getting Started with CSS

Contents

Introduction to CSS
Basic Syntax
Types of CSS stylesheets
HTML Box Tag
CSS Selectors
CSS Box Model
Project 1: Tribute Page
Project 2: Product Landing Page
Project 3: Logistics Company Landing Page
References

Introduction to CSS

CSS stands for Cascading Style Sheets. It is a language that describes the presentation of web pages, including colors, layout, and fonts. CSS is used to style HTML elements.

Basic CSS syntax:

Basic CSS syntax

  • Selector: The selector specifies which HTML element you want to style.
  • Property: The property specifies what CSS property you want to set.
  • Value: The value specifies the value of the CSS property.

Here is an example of a CSS rule that changes the color of all <p> elements to red:
P

Types of CSS stylesheets:

  • Inline CSS: Inline CSS is used to style individual HTML elements. It is defined using the style attribute of the HTML element.

Inline

  • Internal or Embedded CSS: Embedded CSS is defined within the <head> section of an HTML document. It is used to style all of the elements in the document.

Internal or Embedded CSS

  • External or Linked CSS: Linked CSS is defined in a separate CSS file and is linked to an HTML document using the <link> tag. It is the most common way to use CSS.

Example of linked CSS:

Example of linked CSS

This HTML document includes a <link> tag that points to a CSS file called styles.css. The CSS file contains the following CSS rules:

Style CSS
These CSS rules will be applied to the HTML elements in the document, resulting in a webpage with a consistent and visually appealing style.

DIV and Section Tags

Box Tags
DIV

The DIV tag is a generic container tag used to group related content together and create a logical structure for a web page. It doesn't have any specific meaning or purpose, but it's often used to create sections, headers, footers, and other layout elements.

Section

The Section tag is a semantic container tag used to represent a distinct section of a web page with its own heading, content, and possibly related sub-content. It helps better define the page structure and improves accessibility.

Other Box Tags

  • Article: Represents a self-contained piece of content, like a blog post or news article.

  • Main: Identifies the dominant content, excluding sidebars or navigation.

  • Aside: Represents supplementary content related to the main content, like a sidebar or callout box.

  • Nav: Represents navigational links within a web page.

  • Details: Represents expandable content, typically with a summary and expanded details.

  • Footer: Represents the bottom section of a web page, often containing copyright information, contact details, or additional links.

  • Header: Represents the top section of a web page, often containing the site logo, navigation menu, and search bar.

CSS Selector

CSS selectors are the building blocks of CSS styling. They allow you to target specific HTML elements and apply styles to them. There are three main types of CSS selectors:

HTML

1. ID Selectors

An ID selector targets an element with a specific ID attribute. IDs must be unique within an HTML document.

Example:

ID Selector
This CSS rule targets the element with the ID my-header and sets its background color to light gray and adds padding.

2. Class Selectors

A class selector targets elements with a specific class attribute. Classes can be applied to multiple elements within an HTML document.

Example:

Class Selectors

This CSS rule targets all elements with the class my-paragraph and sets their font size to 16px and line-height to 1.5.

3. Element Selectors

An element selector targets all elements of a specific type.

Example:
Element Selector

This CSS rule targets all h1 heading elements and sets their font size to 32px, weight to bold, and adds bottom margin.

Other CSS Selectors
While ID, class, and element selectors form the foundation for CSS targeting, there are several other selectors that are more specific.

Descendant Selectors:

Descendant selectors target elements nested within other elements. For instance, div > p selects all <p> elements that are direct children of <div> elements.

Child Selectors:

Child selectors target only the immediate children of an element. For example, div .my-paragraph selects all <p> elements with the class my-paragraph that are direct children of <div> elements.

Attribute Selectors:

Attribute selectors target elements based on the presence or value of an HTML attribute. For example, img[alt] selects all <img> elements that have an alt attribute, regardless of its value.

Pseudo-Classes:

Pseudo-classes represent states or situations of elements, such as :hover for when an element is hovered over. :active for when an element is clicked, and :focus for when an element is focused.

Pseudo-Elements:

Pseudo-elements represent specific parts of an element, such as ::before for content before the element and ::after for content after the element.

The CSS Box Model

Imagine every element on a web page as a box. This box has four parts.
BEM

  • Content: This is the stuff inside the box, like words, images, or videos.

  • Padding: A transparent space around the content, creates a bit of space between the content and the box's edge.

  • Border: A visible line around the outside of the box. You can change its color, thickness, and style.

  • Margin: This is the space around the entire box, keeping it from touching other boxes on the page, separating the element from neighbors.

Projects

Project 1: Tribute Page

Tribute Page
Click here to view the finished project.

Click here to start creating yours.

Summary

  • The <!DOCTYPE html> declaration indicates the HTML document type.

  • The <html> tag encloses the entire HTML document.

  • The <head> section contains metadata and links to external resources.

  • The <meta charset="UTF-8"> tag specifies the character encoding.

  • The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures responsive design.

  • The <title>Tribute to Albert Einstein</title> tag sets the page title.

  • The <link rel="stylesheet" href="style.css"> tag links to the external CSS stylesheet.

  • The <body> section contains the visible content of the page.

  • The <div class="hero-container"> tag creates the main container for the page's content.

  • The <div class="hero-image"> tag holds the image of Albert Einstein.

  • The <img src="Einstein_patentoffice.jpg" alt="Albert Einstein image"> tag displays the image.

  • The <div class="hero-info"> tag holds the biographical information about Einstein.

  • The <h1>Albert Einstein</h1> tag displays the heading "Albert Einstein".

  • The <p> tags contain paragraphs of text providing information about Einstein.

  • The <ul> tag creates an unordered list of Einstein's accomplishments.

  • The <li> tags represent individual list items within the unordered list.

CSS Styling:

  • The body CSS rules define the overall font and margin/padding settings.

  • The .hero-container CSS rules set the container's width and clear any floats.

  • The .hero-image CSS rules position the image on the left, set its width, and center its text.

  • The .hero-info CSS rules position the biographical information on the right and add padding.

  • The h1 CSS rules set the heading's font size, alignment, and bottom margin.

  • The p CSS rules set the paragraph's font size and line-height.

  • The ul CSS rules remove default list styling and set padding and margin to zero.

  • The li CSS rules add bottom margin to each list item.

  • The img CSS rules set the image's width to 90% and maintain its aspect ratio.

Project 2: Product Landing Page

Click here to view the finished project.

Web dev

Click here to start creating yours.

Summary

HTML Structure:

  • The <!DOCTYPE html> declaration indicates the HTML document type.

  • The <html lang="en"> tag encloses the entire HTML document and specifies the language as English.

  • The <head> section contains metadata and links to external resources.

  • The <title>Web Development Course</title> tag sets the page title.

  • The <link rel="stylesheet" href="style.css"> tag links to the external CSS stylesheet.

  • The <body> section contains the visible content of the page.

  • The <header><h1>Web Development Course</h1></header> creates a simple header with the course title.

  • The <section> tag holds the main content of the page, including an introduction, course information, a call-to-action button, and an image.

  • The <div class="course-info"> tag divides the course information into two columns.

  • The <div class="cta-button"> tag holds the call-to-action button with an enrollment link.

  • The <footer> tag provides a simple footer with copyright information.

CSS Styling:

  • The body CSS rules define the font family, margins, padding, and background color for the page.

  • The header CSS rules set the background color, text color, padding, and text alignment for the header.

  • The section CSS rules define the maximum width, margins, padding, background color, box-shadow, and border radius for the main content section.

  • The h1 CSS rule sets the color for headings.

  • The p CSS rule sets the color for paragraphs.

  • The .course-info CSS rule clears the floats to prevent overlapping content.

  • The .course-info div CSS rules set the float and width for the two columns within the course information section.

  • The .course-info img CSS rules set the maximum width and maintain the aspect ratio for the image.

  • The .cta-button CSS rules define the styling for the call-to-action button, including padding, font size, text alignment, background color, border radius, and transition.

  • The .cta-button a CSS rules remove text decoration and set the color for the link text.

  • The .cta-button:hover CSS rule changes the background color of the button on hover.

  • The footer CSS rules set the background color and text alignment for the footer.

  • The footer p CSS rule sets the color for the text in the footer.

Project 3: Logistics Company Landing Page

Click here to view the finished project.

IB Logistics
Click here to start creating yours.

Summary

HTML Structure:

  • The <!DOCTYPE html> declaration indicates the HTML document type.

  • The <html lang="en"> tag encloses the entire HTML document and specifies the language as English.

  • The <head> section contains metadata and a link to an external CSS stylesheet.

  • The <title>IB Logistics</title> tag sets the page title.

  • The <link rel="stylesheet" href="style.css"> tag links to the external CSS stylesheet.

  • The <body> section contains the visible content of the page.

  • The <header><h1>IB Logistics🛒</h1></header> creates a simple header with the company name and logo.

  • The <main> tag holds the main content of the page, including a tracking section.

  • The <section id="tracking-section"> section groups the tracking form and result elements.

  • The <h2>Track Your Shipment</h2> heading introduces the tracking functionality.

  • The <form id="tracking-form"> form allows users to enter their tracking code.

  • The <label for="tracking-code">Enter Tracking Code:</label> label prompts the user to enter their tracking code.

  • The <input type="text" id="tracking-code" name="tracking-code" placeholder="Enter your tracking code" required> input field accepts the tracking code.

  • The <button type="submit">Track</button> button triggers the tracking process.

  • The <p id="tracking-result"></p> paragraph displays the tracking result.

  • The <footer> tag provides a simple footer with copyright information.

CSS Styling:

  • The body CSS rules define the font family, margins, and padding for the page.

  • The header CSS rules set the background color, text color, text alignment, and padding for the header.

  • The main CSS rules limit the maximum width, center the content, and add padding to the main content section.

  • The section CSS rule adds margin to the tracking section.

  • The label CSS rule positions the labels for the tracking form.

  • The input CSS rules style the input fields for the tracking form.

  • The button CSS rules define the styling for the submit button, including padding, font color, background color, border radius, text transformation, and cursor style.

  • The button:hover CSS rule changes the background color of the button on hover.

  • The #tracking-result CSS rule sets the margin and font weight for the tracking result paragraph.

  • The footer CSS rules set the background color, text color, text alignment, padding, and position (fixed bottom of the page) for the footer.

References And Resources

☕ Enjoyed this article? Support my work with a coffee: https://www.buymeacoffee.com/cqvuesleq

Also open for technical writing and frontend dev roles!

Top comments (0)