Scribd
Upload
21 views

CSS Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

CSS Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Akshay P

CSS (Cascading Style Sheets)

Ways to Connect CSS


Inline CSS: Directly adds styles within HTML tags using the style attribute. While convenient for quick
changes, it’s less efficient for larger projects.

Internal CSS: Defined within a <style> tag in the HTML <head>. This method is suitable for single
documents but not for multiple pages.

External CSS: Linked via a <link> tag in the HTML <head>, allowing for consistent styling across
multiple pages by referencing an external stylesheet.

CSS Selectors
Element Selector: Targets elements based on their tag name. For example, p will select all paragraph
elements.

ID Selector: Uses the unique id attribute to select a specific element. Each ID should be unique
within a document.

Class Selector: Targets elements with a specific class attribute. Multiple elements can share the same
class, making this selector useful for applying styles to groups of elements.

Universal Selector: The * selector applies styles to all elements on the page. It’s useful for resetting
styles but should be used sparingly due to its broad impact.

CSS Units
Pixels (px): Provides a fixed measurement that remains consistent across different screens. Useful for
precise control over element sizes.

Viewport Height (vh) / Viewport Width (vw): Relative units based on the viewport size. 1vw equals
1% of the viewport’s width, and 1vh equals 1% of the height, making them ideal for responsive
design.

Percentage (%): Relative to the size of the parent element. Useful for creating flexible layouts.

Em: Relative to the font size of the element. It scales proportionally based on the current font size,
making it ideal for responsive text.

Rem: Relative to the root element’s font size. Ensures consistent scaling across the document,
regardless of nested elements.
Akshay P

CSS Properties
Fonts: Control the appearance of text, including font-size, font-weight, font-style, and font-family.
These properties define how text looks and behaves.

Text: Includes properties like text-indent, text-align, text-decoration, text-shadow, letter-spacing,


word-spacing, and text-transform, which adjust text appearance and formatting.

Background: Manages background styling with properties such as background-color, background-


image, background-repeat, and background-position. These allow you to set colors, images, and
positioning for backgrounds.

Box Model: Describes how elements are structured, including content, padding, border, and margin.
This model helps in understanding how space and layout are managed around elements.

Flexbox
Flexbox: A layout model designed to distribute space and align items within a container. Key
properties include display: flex, which activates the flexbox layout, justify-content for horizontal
alignment, and align-items for vertical alignment. Flexbox makes it easier to create responsive and
flexible layouts.

Responsiveness
Media Queries: Essential for responsive design, media queries adjust styles based on the screen size
or device characteristics. By using media queries, you can ensure that your website looks great on all
devices, from smartphones to desktops.

This documentation provides a comprehensive overview of HTML and CSS, designed to help you
build and style web pages effectively.

You might also like