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:
- 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:
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.
-
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.
-
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:
This HTML document includes a <link>
tag that points to a CSS file called styles.css
. The CSS file contains the following CSS rules:
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
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:
1. ID Selectors
An ID selector targets an element with a specific ID attribute. IDs must be unique within an HTML document.
Example:
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:
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.
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.
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
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.
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.
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
CSS Cheat Sheet: CSS Cheat Sheet
CSS Tutorial by W3Schools: CSS Tuts
Cascading Style Sheets (CSS): A Beginner's Guide by Mozilla Developer Network: CSS Beginner's Guide
Introduction to CSS by Khan Academy: Intro to CSS
CSS Crash Course by CSS-Tricks: CSS Crash Course
The Complete CSS Guide by SitePoint: The Complete CSS Guide
☕ 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)