Scribd
Upload
3 views13 pages

CSS Notes-1

The document provides a comprehensive overview of CSS, detailing its types (Inline, Internal, External) and selectors (Id, Class, Tagname, Groupname, Universal). It covers the CSS Box Model, text and background properties, gradients, positioning, display properties, transition, and transform properties. Additionally, it explains pseudo classes and elements, emphasizing their usage in styling HTML elements.

Uploaded by

Vyshnavi Anvekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views13 pages

CSS Notes-1

The document provides a comprehensive overview of CSS, detailing its types (Inline, Internal, External) and selectors (Id, Class, Tagname, Groupname, Universal). It covers the CSS Box Model, text and background properties, gradients, positioning, display properties, transition, and transform properties. Additionally, it explains pseudo classes and elements, emphasizing their usage in styling HTML elements.

Uploaded by

Vyshnavi Anvekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

JSP Trainer

CSS
CSS stands for Cascading Style Sheet.
There are three ways in CSS to Style the Web pages
1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS: Inline CSS code is written in the opening tag of the HTML
element by using style attribute.
Syntax: <p style=" "> </p>

2. Internal CSS: Internal CSS code is written in the head section of an HTML
element using <style> tag.
Syntax: <head>
<style>
tag_name{
property: value;
}
<style>
</head>

3. External CSS: External CSS styling can be done by creating a external CSS
file with file_name.css extention and providing the link between that CSS
file to HTML file by <link> tag in the head section of HTML element.
Syntax: <head>
<link rel="stylesheet" href=" file_name.css">
</head>
JSP Trainer

NOTE: The first priority is inline CSS


But the priorities of the Internal and External CSS varies accordingly depending
on the declared position

if, <link rel="stylesheet" href="index.css">


<style> </style>
Here, the first priority is for Internal CSS.

if, <style> </style>


<link rel="stylesheet" href="index.css">
Here, the first priority is for External CSS.

SELECTOR
Selectors are used to select the particular HTML element and to style
them.
Simple Selectors

Simple Selectors
Simple selectors style the HTML element in five ways:
1. Id Selector.
2. Class Selector.
3. Tagname.
4. Groupname.
5. Universe.

Id selectors:
Id selector targets only individual element in the HTML
document.
Prefix symbol used for id selector is # (hash)

Example: #demo{
JSP Trainer

color: red;
background: yellow;
}

Class Selector
Class selector targets multiple elements in the HTML document.
Prefix symbol used for id selector is . (dot)

Example: .test{
color: red;
background: yellow;
}

Tagname Selector
Tagname selector targets the HTML elements by tag name.
There is no symbol used in tagname selectors.

Example: h1{
color: magenta;
background: green;
}
h2{
color: red;
background: black;
}
h3{
color: yellow;
background: orange;
}

Grouping Selector
Groupname selector targets a group of HTML elements.
Example: p, div, h4{
color: magenta;
JSP Trainer

background: green;
}

Universal Selector
Universal Selectors targets the un-targetted properties of every
HMTL element.
The symbol of Universal Selector is *
There is no selector is declared in css.

Example: *{
color: yellow;
background: magenta;
}

Pseudo Element Selectors.


Pseudo Elements targets the content of the HTML element by the
following ways:
1. First Letter
2. First Line
3. Before
4. After
5. Selection
6. Marker

Each pseudo element selectors is declared with the double colon : :

First Letter: The first letter styles the very first letter of the content in the
targeted HTML element.
Example: p : : first-letter{
font-size: 30px;
color: black;
}
JSP Trainer

First Line: The first line styles the very first line of the content in the targeted
HTML element.
Example: p : : first-line{
background-color: black;
color: white;
}

Before: The before pseudo element is used to place the specific content before
the targeted HTML element.
Example: p : : before{
content: “&phone”;
background-color: black;
color: white;
}

After: The after pseudo element is used to place the specific content after the
targeted HTML element.
Example: p : : after{
content: “Thank You”;
color: blue;
}

Selection: The selection pseudo element is used to style the content when the
cursor is dragged on the content (when the content is selected) on the targeted
HTML element.
Also copying the text content from the user can also be disabled, by using the
property user-select: none.
Example: p : : selection{
background-color: pink;
color: magenta;
}

Marker: Marker pseudo element is used to style the lists in the HTML
document.
Marker is only used to style the list type not the content.
Declaration of selector is not mandatory here.
Background color will not work for Marker.
JSP Trainer

Example: li : : marker{
color: red;
font-size: 30px;
}

(or)

: : marker{
color: red;
font-size: 30px;
}

Pseudo Classes

 Link
 Visited
 Hover
 Active
 Focus

o Each dynamic pseudo class selector is declared with the single colon :
o Link, Visited only applicable for anchor tag.
o Link is used to style the unvisited link
o Link doesn’t style the already visited link.
o Active applies the style at the time of click event.
o Hover is applicable for all the HTML elements.
o While using all the Link, Visited, Hover and Active selectors. Hover should be
declared after Link and Visited. Along with that the Active should be declared
after Hover, because to make the elements effective.

Example:
a : link {
color: aqua;
background-color : red;
}

a : visited {
JSP Trainer

color : green;
}

a : hover {
color : yellow;
}

a : active {
color : chocolate;
}

a : focus {
color : magenta;
}

BOX Model
Box Model is essentially a box that wraps around every HTML
element. Box Model is used to design and layout.
The CSS Box Model consists of Margin, Border, Padding and the actual Content.
Content: It is the content of the HTML element.
Padding: It is the space after the content.
Border: It is the Border of the HTML element.
Margin: It is the space after the Border of an HTML element.
Padding and Margin allow up to four values.

Syntax: padding: 10px (T,R,B,L)


padding: 10px (T,B) 20px (L,R);
padding: 10px (T) 20px (L,R) 30px(B) ;
padding: 10px (T) 20px (R) 30px (B) 40px (L) ;

Text Properties
JSP Trainer

Formatting text properties:

color- changes the text color


Example - color: red;

text-align- Horizontal alignment of the text (here we have right, left, center,
justify).
Example- text-align: center;

text-transform- converts the text-letter format(UPPERCASE, lowercase,


Capitalize).
Example- text-transform: capitalize;

text-shadow- it allows 4 values they are x-direction y-direction opacity and


color
Example- text-shadow: 2px 2px 5px red;

text-decoration- underline, overline, line-through


Example- text-decoration: none;

letter-spacing- to get the space between letters of a text we use it


Example- letter-spacing:2px;

word-spacing- to get the space between words of a text we use it


Example- word-spacing:5px;

text-indent- it'll be saying from where the text should start.


Example- text-indent:2px;

Background Styling Properties


background-color Specifies the background color to be used.

background-image Specifies ONE or MORE background images to be


used.
background-image: url('paper.gif');
background-image: url('img_tree.gif'), url('paper.gif');
background-image: conic-gradient(red, yellow, green);
JSP Trainer

background-image: linear-gradient(red, yellow, blue);


background-image: radial-gradient(red, green, blue);
background-image: repeating-conic-gradient(red 10%, yellow 20%);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

background-position Specifies the position of the background images.


background-position: left top;
background-position: left bottom;
background-position: right top;
background-position: right bottom;
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: 10% 40%;
background-position: 50px 100px;

background-size Specifies the size of the background images.


background-size: auto;
background-size: contain;
background-size: cover;
background-size: 50%;
background-size: 30px;
background-size: 60px;

background-repeat Specifies how to repeat the background images.


background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

background-origin Specifies the positioning area of the background


images
background-origin: padding-box;
background-origin: border-box;
JSP Trainer

background-origin: content-box;

background-clip Specifies the painting area of the background imag


background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-attachment Specifies whether the background images are fixed


or scrolls with the rest of the page
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element's contents.

CSS GRADIENTS
CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)


Radial Gradients (defined by their center)

Linear Gradients
background-image: linear-gradient(direction, color1, color2, ...);
direction: to top, to bottom, to left, to right,
and in degree:
0deg ->to top
90deg ->to right
180deg ->to bottom
270deg ->to left

Repeating a linear-gradient
The repeating-linear-gradient()
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

Radial Gradient
background-image: radial-gradient(shape, start-color, ..., last-color);
background-image: radial-gradient(circle, red, yellow, green);
shape:circle, ellipse.
background-image: radial-gradient(closest-side at 10% 15%, red, yellow, black);
JSP Trainer

Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

Position Properties
position:relative;
position:absolute;
position:fixed;
position:sticky;
position:static; (Default value)

Display Properties

display:flex;
display:block;
display:inline;
display:inline-block;
display:none

Flex

The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.

A Flexible Layout must have a parent element with the display property set to flex.

Ex: div {
display: flex;
}

The flex-container properties are

 flex-direction

 flex-wrap

 justify-content

 align-items

flex-direction: column, row, column-reverse, row-reverse

flex-wrap: wrap, nowrap, wrap-reverse.

justify-content: center, flex-start, flex-end, space-around, space-between


JSP Trainer

align-items: center, flex-start, flex-end, stretch, baseline.

Transition Properties

transition-property: Specifies the name of the CSS property to which the


transition is applied.

transition-duration: Specifies the duration of the transition process form


the old value to the new value.

transition-timing-function: Describes how the intermediate values used


during a transition will be calculated.

transition-delay: Defines when the transition will start. It allows a transition


to begin execution some period of time from when it is applied.

Transform Properties

The transform property applies a 2D or 3D transformation to an element. This


property allows you to rotate, scale, move, skew elements.

 rotate and skew should be declared in terms of degrees.


 scale should be declared in terms of integer.

Syntax: transform: rotate(30deg);


JSP Trainer

You might also like