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
styleattribute 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
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:
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.
Example:
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
bodyCSS rules define the overall font and margin/padding settings.The
.hero-containerCSS rules set the container's width and clear any floats.The
.hero-imageCSS rules position the image on the left, set its width, and center its text.The
.hero-infoCSS rules position the biographical information on the right and add padding.The
h1CSS rules set the heading's font size, alignment, and bottom margin.The
pCSS rules set the paragraph's font size and line-height.The
ulCSS rules remove default list styling and set padding and margin to zero.The
liCSS rules add bottom margin to each list item.The
imgCSS 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
bodyCSS rules define the font family, margins, padding, and background color for the page.The
headerCSS rules set the background color, text color, padding, and text alignment for the header.The
sectionCSS rules define the maximum width, margins, padding, background color, box-shadow, and border radius for the main content section.The
h1CSS rule sets the color for headings.The
pCSS rule sets the color for paragraphs.The
.course-infoCSS rule clears the floats to prevent overlapping content.The
.course-info divCSS rules set the float and width for the two columns within the course information section.The
.course-info imgCSS rules set the maximum width and maintain the aspect ratio for the image.The
.cta-buttonCSS 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 aCSS rules remove text decoration and set the color for the link text.The
.cta-button:hoverCSS rule changes the background color of the button on hover.The
footerCSS rules set the background color and text alignment for the footer.The
footer pCSS 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
bodyCSS rules define the font family, margins, and padding for the page.The
headerCSS rules set the background color, text color, text alignment, and padding for the header.The
mainCSS rules limit the maximum width, center the content, and add padding to the main content section.The
sectionCSS rule adds margin to the tracking section.The
labelCSS rule positions the labels for the tracking form.The
inputCSS rules style the input fields for the tracking form.The
buttonCSS rules define the styling for the submit button, including padding, font color, background color, border radius, text transformation, and cursor style.The
button:hoverCSS rule changes the background color of the button on hover.The
#tracking-resultCSS rule sets the margin and font weight for the tracking result paragraph.The
footerCSS 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)