Scribd
Upload
9 views4 pages

Introduction to CSS Basics

CSS, or Cascading Style Sheets, is a language used to style and layout web pages, allowing changes to colors, fonts, spacing, and layouts of HTML elements. CSS can be added inline, internally, or externally, with external CSS being the preferred method for multiple pages. A CSS rule consists of a selector and a declaration, with basic properties including color, background-color, font-size, text-align, padding, and margin.

Uploaded by

ra215094
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views4 pages

Introduction to CSS Basics

CSS, or Cascading Style Sheets, is a language used to style and layout web pages, allowing changes to colors, fonts, spacing, and layouts of HTML elements. CSS can be added inline, internally, or externally, with external CSS being the preferred method for multiple pages. A CSS rule consists of a selector and a declaration, with basic properties including color, background-color, font-size, text-align, padding, and margin.

Uploaded by

ra215094
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

What is CSS?

• CSS stands for Cascading Style Sheets.

• It is a language used to style and lay out web pages.

• CSS allows us to change colors, fonts, spacing, and layout of HTML elements to
make them look more appealing.

How to Add CSS

CSS can be added in three main ways:

1. Inline CSS: Inside an HTML tag, with the style attribute.

Internal CSS: Inside a <style> tag in the <head> section of your HTML document.

External CSS: In a separate .css file, which is then linked to the HTML file.

External CSS is the best way to apply styles to multiple pages!


CSS Syntax

A CSS rule consists of two parts: a selector and a declaration.

Selector: Specifies the HTML element to style (e.g., p for paragraph).

Declaration: Includes a property and a value.

• Property: The style feature you want to change (e.g., color, font-size).

• Value: The specific setting for the property (e.g., red, 16px).

Basic CSS Properties

1. Color

o Sets the text color.

Background-Color

• Sets the background color of an element.

Font-Size

• Changes the size of the text.


Text-Align

• Aligns text within an element (e.g., left, center, right).

Padding

• Adds space inside the element, around the content.

css

Copy code

padding: 10px;

Margin

• Adds space outside the element, between it and other elements.

css

margin: 15px;

Class and ID Selectors

• Class Selector: Targets elements with a specific class. Classes are reusable.

o HTML: <p class="highlight">This is highlighted.</p>

o CSS: .highlight { color: orange; }

• ID Selector: Targets a unique element with an ID. IDs should be unique on each
page.

o HTML: <h1 id="main-title">Welcome to CSS</h1>

o CSS: #main-title { font-size: 24px; }


Example CSS Code

Practice Task

1. Create a simple HTML file.

2. Add an external CSS file, and link it to your HTML.

3. Use the following CSS rules:

o Set the body’s background color to light gray.

o Style headings to be centered with a blue color.

o Change paragraph text color to dark gray and font size to 16px.

o Add padding to elements with the class .box.

You might also like