Scribd
Upload
30 views

CSS Notes

Css notes

Uploaded by

DARSHAN DARSH
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

CSS Notes

Css notes

Uploaded by

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

CSS Notes

Table of Contents
 Introduction
 Selectors
 Properties and Values
 Colors
 Fonts
 Box Model
 Positioning
 Flexbox
 Grid
 Responsive Design

Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML. It controls the layout of multiple web pages all at once.

Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style. Common
types of selectors include:

 Element Selector: Selects all elements of a specific type (e.g., p for all paragraphs).
 Class Selector: Selects elements with a specific class attribute (e.g., .class-name).
 ID Selector: Selects a single element with a specific id attribute (e.g., #id-name).
 Universal Selector: Selects all elements (*).
 Attribute Selector: Selects elements based on an attribute or attribute value (e.g.,
[type="text"]).

Properties and Values


CSS properties are used to apply styles to HTML elements, and each property has a set of
possible values. Some common properties include:

 color: Sets the color of the text.


 background-color: Sets the background color of an element.
 font-size: Sets the size of the text.
 margin: Sets the space outside an element.
 padding: Sets the space inside an element, between the content and the border.
 border: Sets the border around an element.

Colors
CSS colors can be specified in different ways:

 Named Colors: Predefined color names (e.g., red, blue).


 Hexadecimal Colors: A hex code (e.g., #ff0000 for red).
 RGB Colors: Specifies the intensity of red, green, and blue (e.g., rgb(255, 0, 0)
for red).
 RGBA Colors: Similar to RGB, but includes an alpha channel for opacity (e.g.,
rgba(255, 0, 0, 0.5)).
 HSL Colors: Stands for hue, saturation, and lightness (e.g., hsl(0, 100%, 50%) for
red).
 HSLA Colors: Similar to HSL, but includes an alpha channel for opacity (e.g.,
hsla(0, 100%, 50%, 0.5)).

Fonts
CSS font properties allow you to style text. Some common font properties include:

 font-family: Specifies the font for an element (e.g., Arial, Verdana).


 font-size: Specifies the size of the font.
 font-weight: Specifies the weight (boldness) of the font (e.g., normal, bold).
 font-style: Specifies the style of the font (e.g., normal, italic).
 line-height: Specifies the line height.

Box Model
The CSS box model describes the rectangular boxes generated for elements in the document
tree and is made up of:

 Content: The actual content of the box.


 Padding: The space between the content and the border.
 Border: The border surrounding the padding (if any).
 Margin: The space outside the border.

Positioning
CSS positioning allows you to control the layout of an element in a document. The different
positioning types include:

 Static: The default positioning; elements are positioned according to the normal flow
of the document.
 Relative: Positioned relative to its normal position.
 Absolute: Positioned relative to its nearest positioned ancestor.
 Fixed: Positioned relative to the browser window.
 Sticky: A hybrid of relative and fixed positioning.

Flexbox
CSS Flexbox is a layout module designed to provide a more efficient way to lay out, align,
and distribute space among items in a container. Some key properties include:

 display: flex: Turns on flexbox for a container.


 flex-direction: Defines the direction of the flex items (e.g., row, column).
 justify-content: Aligns flex items along the main axis (e.g., flex-start, center).
 align-items: Aligns flex items along the cross axis (e.g., flex-start, center).

Grid
CSS Grid Layout is a two-dimensional layout system for the web. Some key properties
include:

 display: grid: Turns on the grid layout for a container.


 grid-template-columns: Defines the columns of the grid.
 grid-template-rows: Defines the rows of the grid.
 grid-gap: Defines the gap between grid items.

Responsive Design
Responsive design ensures that web pages look good on all devices by using flexible layouts,
flexible images, and media queries. Key techniques include:

 Media Queries: Allow you to apply styles based on the device's characteristics, such
as width and height (e.g., @media (max-width: 600px) { ... }).
 Fluid Grids: Use percentage-based widths for layout elements instead of fixed
widths.
 Flexible Images: Use CSS to ensure images scale correctly within their containers.

You might also like