Scribd
Upload
7 views7 pages

Css Notes

The document provides an introduction to CSS, explaining its purpose in styling web pages and detailing how it works through inline, internal, and external methods. It covers selectors, the box model, layout basics, text styling, and styling for links, lists, and forms. Key concepts include CSS syntax, the importance of the box model, and various display and positioning properties.

Uploaded by

Bishal Ghosh
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 views7 pages

Css Notes

The document provides an introduction to CSS, explaining its purpose in styling web pages and detailing how it works through inline, internal, and external methods. It covers selectors, the box model, layout basics, text styling, and styling for links, lists, and forms. Key concepts include CSS syntax, the importance of the box model, and various display and positioning properties.

Uploaded by

Bishal Ghosh
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/ 7

1.

Introduction to CSS

What is CSS?

 CSS (Cascading Style Sheets) is used to style and layout web pages. It describes how HTML
elements should be displayed on screen, paper, or other media.

 CSS is responsible for the visual design of web pages, including color, font, spacing, layout,
and even animations.

How CSS Works:

 Inline CSS: You can add CSS directly to an HTML element using the style attribute.

 Internal CSS: You can include CSS within the HTML document using the <style> tag inside the
<head> section.

 External CSS: The best practice is to link an external CSS file to the HTML using the <link> tag
inside the <head>.

 CSS Syntax: A CSS rule consists of a selector and a declaration block. The selector points to
the HTML element(s), and the declaration block contains one or more declarations separated
by semicolons.
2. Selectors

Basic Selectors:

 Element Selector: Targets all instances of an element.

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

css

html

 ID Selector: Targets a unique element with a specific ID. IDs should be unique on a page.

css

html

Grouping and Nesting:

 Grouping Selectors: Apply the same styles to multiple elements.

 Nesting Selectors: Target elements inside another element.


Advanced Selectors:

 Pseudo-classes: Style an element based on its state (e.g., :hover, :nth-child).

 Attribute Selectors: Select elements based on their attributes.

3. Box Model

The box model is crucial to understanding how elements are laid out on a webpage.

Components of the Box Model:

1. Content: The actual content of the box (text, images).

2. Padding: The space between the content and the border. It makes the content area larger.

3. Border: The edge surrounding the padding (or the content if no padding is specified).

4. Margin: The space outside the border. It separates the element from its neighbors.

Width and Height:

 The width and height properties affect the content area only (excluding padding, border, and
margin).
Overflow:

 Defines what happens if the content inside an element overflows its set dimensions.

4. Layout Basics

Display Property:

 block: The element takes up the full width of its container and starts on a new line.

 inline: The element takes up only as much width as needed and does not start on a new line.

 inline-block: Like inline, but you can set width and height.

 none: The element is hidden and does not take up any space in the layout.

Positioning:

 static: The default position, where elements follow the normal document flow.

 relative: The element is positioned relative to its normal position.

 absolute: The element is positioned relative to its nearest positioned ancestor.


 fixed: The element is positioned relative to the browser window and stays fixed during
scrolling.

 sticky: The element toggles between relative and fixed based on the user's scroll position.

Float and Clear:

 float: Elements float to the left or right of their container, allowing text and other elements
to wrap around them.

 clear: Prevents elements from wrapping around floated elements.

5. Styling Text

Typography:

 Font-family: Defines the font to be used.

Example: font-family: Arial, sans-serif;

 Font-size: Specifies the size of the font.

Example: font-size: 16px;

 Line-height: Defines the space between lines of text.

Example: line-height: 1.5;

 Letter-spacing: Controls the space between letters.

Example: letter-spacing: 2px;

Text Alignment:

 Text-align: Aligns text within its container.


Example: text-align: center;

Text Colors:

 Colors: Set using different formats like hex (#ff0000), RGB (rgb(255,0,0)), or named colors
(red).

Example: color: #333;

background-color: lightblue;

Google Fonts:

 Importing fonts from Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Example: font-family: 'Roboto', sans-serif;

6. Styling Links, Lists, and Forms

Links:

 Links can be styled using pseudo-classes like :hover, :visited, :active.

Lists:

 Unordered lists (bulleted): Style bullets and spacing.

 Ordered lists (numbered): Change the numbering style.


Forms:

 Input Fields: Styling text boxes, checkboxes, and radio buttons.

 Buttons: Add padding, background color, and hover effects to buttons.

You might also like