1.
CSS Syntax:
- CSS stands for Cascading Style Sheets.
- It's used for styling web pages written in HTML or XML.
- Syntax consists of selectors and declaration blocks. Selectors are simply used to select the HTML
element to be styled. Declaration consists of a set of instructions which tell the browser how to style the
HTML elements. Selectors tell "where to do" and declarations tell the browser "what to do"
Example:
1. choosing a paper-selection
2. Cutting it into half-manipulation which comes from the declaration
E.g P { font-size: 24px ; }
Here p is the selector and the rest is the declaration box.
Declarations are properties and values followed by semicolons and enclosed with curly brackets.
2. Selectors:
- Used to target HTML elements for styling.
- Different types include element selectors, class selectors, ID selectors, etc.
element Selectors:Target HTML elements directly by their tag name.
- Class Selectors: Target elements with a specific class attribute.
- ID Selectors: Target elements with a specific ID attribute.
- Attribute Selectors: Target elements based on their attributes.
- Pseudo-classes and Pseudo-elements:*Target elements based on their state or position.
- Declaration Blocks: Consist of one or more declarations enclosed in curly braces `{}`. Each declaration
includes a property and its corresponding value.
3. Comments:
- Used to add notes within CSS for documentation or debugging purposes.
- Syntax: `/* comment goes here */`
- Purpose: Used for documenting code, adding notes, or temporarily disabling styles.
- Comments are not displayed on the web page
4. Colors:
Colors are integral part of any web application. Colors in CSS can be specified in the following ways:
- CSS supports various color formats like hexadecimal (Hex) valus, RGB, RGBA, HSL and named colors.
-Named Colors: CSS supports predefined color names such as `red`, `blue`, `green`, etc. The total number
of color names supported in CSS is 140.
Hexadecimal (hex) values: Represent colors using a combination of six hexadecimal digits. Each pair
represents the intensity of red, green, and blue, respectively. It is written in the following format:
#RRGGBB. Where RR, GG and BB are values between 00 and FF.
RR-amount of red
GG-amount of green
BB-amount of blue
00 is the lowest value and FF is the highest
#000000 forms black whereas #FFFFFF forms white
RGB and RGBA:
Stands for red green blue and alpha
How far is a number between 0.0 (fully transparent) and 1.0 (fully opaque)
For red green and blue 0 depicts the lowest intensity and 255 the highest.
For writing color in RGB format follow the syntax:
rgb(R,G,B) where R, Gband B can be any values between 0 and 255.
RGB(000) will form a black color and RGB(255,255,255) white
- HSL (Hue, Saturation, Lightness): Specify colors based on their hue, saturation, and lightness. Hue is
represented as an angle (0 to 360), saturation and lightness are percentages.
5. Background:
- Used to set background properties of elements.
- Properties include background-color, background-image, background-repeat, etc.
- Background Color: Sets the background color of an element.
- Background Image: Specifies an image to be used as the background of an element.
- Background Repeat: Defines how the background image should be repeated, options include `repeat`,
`repeat-x`, `repeat-y`, and `no-repeat`.
- Background Position: Determines the starting position of the background image.
- Background Attachment: Specifies whether the background image scrolls with the content or remains
fixed.
