Scribd
Upload
16 views6 pages

CSS Notes

Uploaded by

Aman singh
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
16 views6 pages

CSS Notes

Uploaded by

Aman singh
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/ 6

CSS

What is CSS?
CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
What is the Syntax of CSS ?
A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

Types of CSS Selectors


We can divide CSS selectors into 4 categories:
1) Universal Selector
2) Element Selector
3) ID Selector
4) Class Selector
1. Universal Selector [*{}]
The Universal selector (*) selects all HTML elements on the page.
Example :
*{
text-align: center;
color: blue;
}
2. Element Selector[h1{}]
The element selector selects HTML elements based on the element name.
Example :
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
CSS
color: red;
}

3. Id Selector[#myid{}]
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one unique
element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Example :
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

4. Class Selector[.myclass{}]
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the class
name.
Example :
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}

How many methods to write a CSS Code?


There are 3 methods to write CSS code :-
1.) Inline CSS
2.) Internal CSS {Using Style tag}
3.) External CSS {Using external file(E.g. – style.css)}

Style Tag {<style> tag}


• The <style> tag is used to define style information (CSS) for a document.
• Inside the <style> element you specify how HTML elements should render in a browser.
• The <style> element must be included inside the <head> section of the document.

Tips and Notes :


Note: When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet. If some properties have been defined for the same selector
(element) in different style sheets, the value from the last read style sheet will be used (see
example below)!
Tip: To link to an external style sheet, use the <link> tag.
CSS
What are color properties in CSS? {Foreground color}
The color property specifies the color of text. This property plays a crucial role in defining
text appearance, ensuring readability, and enhancing the overall design aesthetics of web
content.
How many color systems in CSS ?
There are 5 types of Color System in CSS :-
1) HEX (✓)
2) RGB (✓)
3) RGBA ()
4) HSL (✓)
5) HSLA ()

1. CSS RGB colors*


In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example : rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.

2.CSS HEX colors*


In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).
For Example : #ff0000 is displayed as red, because red is set to its highest value (ff) and the
others are set to the lowest value (00).

3.CSS HSL colors


In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of grey, and 100% is the full color.
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white

CSS backgroundcolor Property


The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
• background-color
• background-image
• background-repeat {repeat-x / repeat-y / no-repeat}
• background-attachment {fixed / scroll}
• background-position
• background (shorthand property)
CSS
All CSS Background Properties :
Property Description
background Sets all the background properties in one
declaration
background-attachment Sets whether a background image is fixed or
scrolls with the rest of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are
positioned
background-position Sets the starting position of a background
image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

CSS Border Property


The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Border Style


The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Example :
Demonstration of the different border styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

CSS Border - Individual Sides


CSS
It is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
Example :
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

CSS Border Width


The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
Example :
p{
border-style: solid;
border-width: 25px 10px 4px 35px; /* top,right,bottom and left */
}

CSS Border Color


The border-color property is used to set the color of the four borders.
The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent
Note: If border-color is not set, it inherits the color of the element.
CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider when dealing with
borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
• border-width
• border-style (required)
• border-color
Example :
p{
border: 5px solid red;
}

CSS Rounded Borders


The border-radius property is used to add rounded borders to an element:
Example :
CSS
p{
border: 2px solid red;
border-radius: 5px;
}

You might also like