Scribd
Upload
7 views2 pages

Lecture 5

Uploaded by

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

Lecture 5

Uploaded by

0112cs221035
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

LECTURE 5

Introduction to CSS, Ways to Add CSS, Selectors in CSS.

CSS, or Cascading Style Sheets, is a fundamental technology used in web development to style HTML
elements. It allows developers to control the appearance and layout of a web page, including aspects
like fonts, colors, spacing, and positioning.

Here's a basic introduction to CSS:

1. **Syntax**: CSS consists of a set of rules, each composed of a selector and a declaration block. The
selector specifies which HTML elements the rule applies to, and the declaration block contains one or
more declarations separated by semicolons. Each declaration consists of a property and a value,
separated by a colon.

```css

selector {

property: value;

```

2. **Selectors**: Selectors target HTML elements to which the CSS rules will apply. They can target
elements by their tag name, class, ID, attribute, or relationship to other elements. For example:

- Tag selector: `p { color: blue; }`

- Class selector: `.my-class { font-size: 16px; }`

- ID selector: `#my-id { background-color: white; }`

3. **Properties and Values**: CSS properties define the visual characteristics of elements, such as
`color`, `font-size`, `margin`, `padding`, etc. Each property accepts one or more values that specify how
the property should be applied.
4. **Inline, Internal, and External CSS**: CSS can be applied in three ways:

- **Inline CSS**: Styling applied directly to individual HTML elements using the `style` attribute.

- **Internal CSS**: CSS rules placed within `<style>` tags in the `<head>` section of an HTML
document.

- **External CSS**: CSS rules stored in separate external files and linked to HTML documents using the
`<link>` tag.

5. **Cascading and Specificity**: CSS rules cascade, meaning that multiple rules can apply to the same
element. In such cases, the specificity of the selectors determines which rule takes precedence.
Specificity is calculated based on the combination of selectors used.

6. **Inheritance**: CSS properties are inherited from parent elements to their children, but not all
properties are inherited. For example, `font-family` is inherited, while `background-color` is not.

7. **Box Model**: In CSS, every HTML element is considered a rectangular box. The box model
comprises properties like `width`, `height`, `margin`, `padding`, and `border`, which define the
dimensions and spacing of these boxes.

8. **Responsive Design**: CSS enables the creation of responsive layouts that adapt to different screen
sizes and devices. Techniques like media queries, flexbox, and grid layout help achieve responsive
designs.

CSS is an essential tool for web designers and developers, allowing them to create visually appealing and
user-friendly websites. It works hand in hand with HTML and JavaScript to bring web pages to life.

You might also like