Scribd
Upload
22 views

CSS Syntax, Selector, Comments, Colors and Background

A brief note on CSS

Uploaded by

bakpetshepherd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

CSS Syntax, Selector, Comments, Colors and Background

A brief note on CSS

Uploaded by

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

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.

You might also like