Scribd
Upload
39 views

CSS Syntax, Selector, Comments, Colors and Background

A brief note on CSS

Uploaded by

bakpetshepherd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

CSS Syntax, Selector, Comments, Colors and Background

A brief note on CSS

Uploaded by

bakpetshepherd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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