Scribd
Upload
3 views

CSS Basics

The document provides an overview of CSS, explaining its purpose in styling HTML elements and the hierarchical nature of its application. It covers CSS versions, methods for adding CSS to HTML, common units of measurement, and the importance of organizing content into containers. Additionally, it discusses naming conventions for classes and IDs, as well as various CSS selectors for targeting HTML elements.

Uploaded by

bereket damene
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Basics

The document provides an overview of CSS, explaining its purpose in styling HTML elements and the hierarchical nature of its application. It covers CSS versions, methods for adding CSS to HTML, common units of measurement, and the importance of organizing content into containers. Additionally, it discusses naming conventions for classes and IDs, as well as various CSS selectors for targeting HTML elements.

Uploaded by

bereket damene
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS Basics for Wabiskills MERN Stack Training Program

Introduction to CSS

What is CSS? CSS, short for Cascading Style Sheets, is the language we use to style HTML
elements on web pages. It allows you to control the layout, colors, fonts, spacing, and many
more aspects of how a webpage looks. Essentially, CSS provides the instructions to the
browser on how to present the content on a webpage.

Some key things CSS controls:

Color: For example, setting an element's text color to red.

Positioning: Placing elements exactly where they need to appear on the screen.

Size: Adjusting the width, height, and overall sizing of elements.

Style: From borders to fonts to background images, CSS covers it all!

Why is it called Cascading Style Sheets? The "cascading" in CSS refers to how styles are
applied in a hierarchical manner. If you set a style for a parent element, it will also apply
to all of its child elements unless otherwise specified. For example, if you make all text in
the <body> blue, all headings, paragraphs, and other text elements inside will also be blue
unless you tell CSS otherwise.

Understanding CSS Versions and How the Browser Understands Styles

CSS Versions The current standard version of CSS is CSS3. It builds upon previous
versions and includes new features like rounded corners, shadows, animations, and more,
making designing modern websites easier and more intuitive.

To keep things simple, just focus on CSS3. Everything from previous versions is included
in CSS3, so there’s no need to go back to older versions.
For a deep dive into the differences between CSS versions, you can explore this link.

How does the browser understand CSS? Think of CSS as a set of instructions you're
sending to the browser, which is your "builder." The browser’s job is to read these
instructions and turn them into visual elements on the page.

It’s like telling someone how to arrange the furniture in your house—without pictures. You
just give clear, step-by-step instructions, and they follow them to arrange things how you
want.

Ways to Add CSS to an HTML Document

There are three main ways to include CSS in your HTML document:

Internal CSS: Internal CSS is written inside the <style> tag in the <head> section of an
HTML page.

<style>

body {

background-color: red;

</style>

Inline CSS: Inline CSS is added directly inside an HTML element, using the style attribute.

<body style="background-color: blue;">

External CSS: The most common and recommended method. This involves writing all
your CSS in a separate .css file and linking it to your HTML file.
<link rel="stylesheet" href="styles.css">

CSS Units

Understanding units in CSS is key to styling your website. Here are the most common
units:

Pixels (px): A pixel is a tiny square on the screen. It’s the most straightforward unit for
measurements.

Percentage (%): Used to define sizes relative to other elements. For example, if you want
a div to take up 50% of the screen width. em & rem: These are scalable units, typically
used for fonts. em: Based on the size of its parent element. rem: Based on the root element,
usually the HTML tag. If the root font size is 16px, then 2rem equals 32px.

Thinking in Terms of Containers

Web development is often about organizing content. Think of containers as boxes that hold
other elements. In HTML, these containers include elements like:

<header>

<section>

<div>

<footer>

Before writing any CSS, group related elements together in containers. This makes styling
more efficient and logical. For example, when building a webpage about puppies, you
might have:
A container for the header section.

A container for the main content.

A container for the footer.

Once your containers are in place, you can start applying CSS styles to them.

Naming Containers and Elements (Classes vs. IDs)

To style specific elements in CSS, we give them names, which are applied using class and
id attributes.

Classes: Use classes when you want to style multiple elements. Classes can be shared
among multiple elements.

<div class="puppy-container">Hello</div>

IDs: IDs are unique and are used to style one specific element. An ID must be unique
within the page.

<div id="puppy-wrapper">Hello</div>

CSS Selectors: How to Target HTML Elements

CSS selectors are used to target specific elements in your HTML. Here are the most
common selectors:

Class Selector (.): Targets elements by their class name.


.className {

color: red;

ID Selector (#): Targets elements by their ID.

#idName {

background-color: black;

Element Selector: Targets all instances of a specific HTML element (e.g., all <p> tags).

p{

font-size: 14px;

More Advanced Selectors: Star, Descendant, and Hover

Universal Selector (*): Targets all elements on a page.

*{

margin: 0;

Descendant Selector: Targets all children of a specific parent element.


div a {

color: white;

Hover Selector: Activates when an element is hovered over with the mouse.

a:hover {

color: green;

text-decoration: underline;

Final Note: CSS is like the paintbrush of web design. It transforms the basic HTML
structure into something beautiful and user-friendly. Keep practicing, and soon you’ll be
able to build stunning web pages!

You might also like