CSS Theory

Date:25/08/2022
Thursday
CSS (Cascading Style Sheets)
1. CSS stands for cascading style sheets
2. Programmers prefer CSS because to enhance the html
content/output on the browser
3. CSS is used to describe look of webpage
4. CSS coding can be done is three ways
a. Inline CSS
b. Internal CSS
c. External CSS
Note: CSS is styling language which is specially develop to decorate
webpages
Date:26/08/2022
Friday
5. Inline CSS coding is done by using “style” attribute with in html

tag. For example:<label style=”color:red”>username</label>
6. In internal CSS coding all the properties and its corresponding
value are given within” <style></style>” which must be written in
html file inside <head></head> for best practice
For example:
<style>
{
CSS-property1:value1;
CSS-property2:value2;
}
</style>
SELECTORS
1) They are used to selectors html tag in CSS code for providing
different CSS properties
2) We have four types of selectors
a. Tag name
b. Id
c. Class
d. Group
3) Syntax to define CSS-properties in internal/external CSS coding
Selector
{
CSS property1:value1;
CSS property2:value2;
}
Tag name selector

1) It is also called as “element selector”
2) It applies the CSS for all tags which is specified in CSS file
3) For example: If programmer use 5<h1> tag then for all of them
same CSS property get applied
ID selector
1) It is basically preferred only if CSS has to be applied on
only one html tag
2) The rules to be followed for id selector are.
i. Declare “id” attribute to the html tag to which css
has to be applied.
ii. For example: in css file “#abc”
3) All the ids in css file will be represented with “#”
followed by identifier given in html file
Note: since ID selector applies only for one html tag hence it is called
as “unique selector”
Date:27/08/2022
Saturday
Class selector
1. It is used to applies the css for more than one tag but not
for all tags.
2. The rule to be followed to work with class selector are
i. Declare “class” attribute with same identifier for the
html tags
ii. Class selector is represented in the css file by using
“. (dot)”
For example: This is mark this is label in css file”.abc”
Group selector:
1. It is used to apply CSS properties in a group of html
elements
2. Group of html elements can be created by using tag name,
id and class selector
3. To make a group of elements programmer should
provide’,’ to separate them
For example:
Mark, strong
{
Font size: 40px;
}
CSS properties
Font-size: It is used to increase or decrease the size of text
contents as a value use number in the form of pixel.
For example:
Label
{
Font size:50px;
}
Font-weight: It is used to make text contents appear in the bold
format on browser as a value specify “bold”
If programmer wants to remove bold effect from text. then pass
“normal”
For example:
Small
{
Font weight:bold;
}
Font-style: It is used to represent the text contents in italic format as a
value specify “italic”;
if programmer wants to remove italic effect from text, then pass
“normal” value
For example:
#b
{
Font-style:italic
}
Text-align: It is used to adjust the position for the text contents
If takes 3 values…
1. Left
2. Right
3. Center
For example:
div
{
Text-align:center;
}
Date:28/08/2022
Sunday
Note: If horizontal and vertical distance is 0px then shadow and
original text contents will be in the same position
For example:
Label
{
Text-shadow:0px 0px 10px red;
}
Box-shadow:
a) This property is used to give the shadow effect to the box
b) If works same as box-shadow, the only difference is text-
shadow is used to give shadow for text-content and box-
shadow is give shadow around text box
For example:
Input
{
Box-shadow:0px 0px 10px red;
}
Boarder-radius:
a) It is used to convert sharp edges corners into curved edges for the
html elements
b) It accepts value in pixel format, as a programmer we can pass only
one value for this property or it will accept 4 values at a time
c) The four values are follows
i. Represent left-top corner
ii. Represent right-up corner
iii. Represent right-bottom corner
iv. Represent left-bottom corner
d) For example:
Input
{
Border-radius:0px 10px 0px 10px
Or
Border-radius:10px
}
Date:01/09/2022
Thursday
External CSS
1. In external CSS coding all properties and its
corresponding values are given in “separate CSS file” and
linked with html file by using “<link></link>”
a. <link>consists of two attributes
i. Rel=”stylesheet”
ii. Href=”CSS-filename.css”
b. For example:
<link rel=”stylesheet” href=”CSS file
name.css”></link>
2. If all the three types of CSS coding are applied together
than priority will be inline→→internal→→external
3. In all the three types of CSS coding common factor is
“usage of properties and its corresponding values”
Date:02/09/2022
Friday
Background-image:
This is used to provide image to the background of html tag while
mentioning the image file name programmers make use of
“Url (‘image-name. extension’)”
Note:
a. Programmers can provide different color combination as a
background-image by using following two values.
b. Linear-gradient: To get color in a linear/horizontal format
as well as we can change it by passing degree before all
color value
c. For example:
Background-image:linear-gradient(100deg,red,yellow),
d. Radial-gradient: To get color in a circular format and to get
exact circle for colors specify ‘circle’ before all color values
e. For example: Background-image:radial-
gradient(circle,orange,red);
Background-size:
ed to change the dimension of the given image
two different values.
Background-size: Apx Bpx where Apx refers to width of the
image and Bpx refers to height of the image.
Date:05/09/2022
Monday
Background-repeat:
a. It is used to avoid repetition of the background image
Note: If the given dimension of image is small then background image
will be repeated to avoid this programmer will make use of “no-repeat”
value with above css property
b. For example:
Body
{
Background-image: url(‘image.extention’);
Background-repeat: no-repeat;
Background-size:100px 140px;
}
Background:
It is used to make html elements transparent on the web browser, as
a value programmer passing” transparent”
For example:
Input
{
Background:transparent;
}
Background-position:
a. It is used to adjust the position of background image on the
browser
b. It takes five values
i. Left
ii. Right
iii. Center
iv. Bottom
v. Top
Note: As a programmer for this property, we can pass combination of
two values also
For example:
Div
{
Background-position:leftbottom
}
CSS Box Model
a. As a programmer we are using css box model to provide spaces
around the html elements and make the elements look neat and
clean
b. CSS box model involves three important CSS properties
1. Border
2. Margin
3. Padding
Border
1. This property is used to provide border for html elements
2. It consists three important values.
i. Border-type→ solid, dashed, dotted, double
ii. Border-color
iii. Border-size
3. Border property: In CSS is basically applied for all the 4 sides
but it can also be applied for particular side by using below css
property
i. Border-left
ii. Border-right
iii. Border-bottom
iv. Border-top
Note: If any of the above property is made as “0px” then border doesn’t
appear on browser
4. To change individual property of border then use following
properties
i. Border-color
ii. Border-style
iii. Border-width
5. For example:
Form
{
Border: solid blue 10px;
Border-left: solid blue 2px;
Border-right: solid blue 3px;
Border-bottom: 0px;
Border-top: 0px;
}
Note: Programmer can use above CSS properties combination like
border-right-width, etc.
Date:06/09/2022
Tuesday
Margin property
 It is used to create the space around html elements but outside of
the border
 Programmers can apply margin to all the sides as well as specific
side of the element
 To apply margin for the specific side of the elements we have to
make us of following css properties
1) Margin-left
2) Margin-right
3) Margin-bottom
4) Margin-top
For example:
Div
{
Margin:50px;
Margin:20px;
Margin:0px;
}
Padding property:
 It is used to create the html elements or the text contents but inside
the border
 It can be applied for all the four sides as well as for specific side
 We can use following css properties to apply padding for specific
side.
i. Padding-left
ii. Padding-right
iii. Padding-bottom
iv. Padding-top
For example:
Label
{
Padding:10px;
Padding-right:20px;
Padding-left:2px;
}
Date:07/09/2022
Wednesday
Font-family
 It is used to provide different fonts for text contents on web page
 It accepts following major value
1. Cursive
2. Sans-serif
3. Serif
4. Georgia
5. Monospace
6. Fantasy
 For example:
Div
{
Font-family:Georgia;
}
Text-decoration
1. It is used to provide underline, strike and line above text contents
2. It accepts three values are as follows
i. Underline
ii. Line-through→for strike
iii. Overline→to provide line above text contents
3. To change color of lines, make use of “text-decoration-color” CSS
property
4. To change size of line, make use of “text-decoration-thickness”
CSS property
5. To change style of line programmers are using “text-decoration-
style” which will take following values
i. Solid
ii. Dashed
iii. Dotted
iv. Wavy
v. Double
For example:
Strong
{
Text-decoration: overline;
Text-decoration-color: red;
Text-decoration-thickness: 5px;
Text-decoration-style: double
}
Note: To remove underline/strike make use “text-decoration: none;”
Note: To change casing of text on web page make use of “text-
transform” CSS property which will accepts three values
i. Uppercase
ii. Lowercase
iii. Capitalize
Date:09/09/2022
Friday
CSS-icon library
 In CSS all the icons which are necessary are stored under “CSS Icon
Library”
 To use the icon from icon library, programmers have to follow few-
steps
i. Attach the HTML file with CSS icon library by using
<link>tag
ii. <link rel=” stylesheet”
href=”https://cdnjs.cloudfare.com/ajax/libs/font-
awesome/6.1.1/all.min.css”></link>
 Browser fontawsome.com website and search for appropriate icon
required
 Copy<i> tag and past it into html. file,
 In html5 <i> tag is used for represent CSS icon
Note: To change color of icon use” color” CSS property and to change
the size use fa-1x to fa-10x
Date:10/09/2022
Saturday
Display CSS Property
a) This property is used to display the contents may be in the same
line or in the different line
b) It takes five important values
i. Block: It is used to display the next line of the browser
ii. Inline: It is used to display the contents on to the same line
on the browser
iii. None: It is used to hide the contents on the browser and
displayed when it is necessary
iv. Flex: It is used to remove the space between contents on the
browser to get exact functionality 08f flex value use it with
perfect element
v. Inline-block: It is used to apply few important CSS width,
margin, height, etc.
Note: Display CSS property is basically used to work with different
kind of error messages block of inline values only work with click
element whereas flex value work with parent element
Div(parent) H1(child) Input(child)
{ { {
Display:flex; Display:inline; Display:block;
} } }
Date:12/09/2022
Monday
Flex-box
a) It is used to proper-layout for html elements on web browser
b) Inflex-box parent element is referred as flex-container whereas
child element is referred as flex-items
c) To use flex-box make sure programmers should use display:
flex; with flex container to direct its flex items.
d) Flex-box is a single-layout-dimensional concept
For example:
<div id=”container”>
<input placeholder=” mobile” class=” items”></input>
<input placeholder=” Email” class=” items”></input>
<input placeholder=” password” class=” items”></input>
</div>
#container
{
Display: flex;
}
e) Flex-direction
i. It is used to define direction for flex items either in
horizontal or in vertical way
ii. Programmer can assign following values for flex-direction
I. Row
II. Roe-revers
III. Column
IV. Column-revers
f) Justify-context:
I. This property is used to provide alignment for flex-item as
per left-over space in flex-container
II. It will accept following values
1. Center
2. Left
3. Right
4. Space-between
5. Space-evenly
6. Space-around
g) Align-items:
I. It is used to proper alignment for flex-items in
vertical way
II. It will accept following values
1. Center
2. Flex-end
3. Flex-start
4. Baseline
Navigation Bar
a) As a programmer to create navigation bar we have to follow the
below steps:
i. Create separate section on browser by using <div> tag for
the navigation bar
ii. Create the unordered/ordered list of navigation bar contents
by using<ul>/<ol> and <li>
iii. Convert the list items into hyperlinks by using <a> tag
b) The disadvantages of above steps are-
i. Bullets appearing in front of navigation bar contents
ii. All contents are appearing on the browser in vertical
directions
c) To overcame from the above drawback’s programmers, have to
make use of following CSS properties with specified tag
i. <ul> tag---→ To remove bullets from list items use list-
style-type css property
ii. <ul>tag---→ To represent contents in horizontal manner use
display: flex; css property
iii. <li>tag---→ To create space between contents using
justify-content: space-evenly; css property
Date:13/09/2022
Tuesday
Pseudo classes--→
It is used to provide css properties depends on cursor movement.
1. Hover
When user place the cursor on the content css property will
be applied and it is indicated with “ .”
For example:
H1: Hover
{
Background-color: red;
}
2. Active
When user clicks on the contents css property will be applied by
using this pseudo class
For example:
Label: active
{
Color: purple;
}
Note: To change using of text on web page make use of “Text-
transform” css property which will accepts three values
1) Uppercase
2) Lowercase
3) Capitalize
Date:14/09/2022
Wednesday
3. Required
It is used to apply css properties for html form field if they
are mandatory
For example:
Input: required
{
Background-color: lime;
}
4. Link & Visited
1) They are only used with hyperlink
2) Link is used to apply css property before click on
hyperlink where as visited is used to web page ie,after
click on hyperlink
3) For example:
a: link//before click
{
Color: green;
}
a: visited // after;
{
Color: red;
}

CSS Theory

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Theory

Uploaded by

Copyright:

Available Formats

Date:25/08/2022

5. Inline CSS coding is done by using “style” attribute with in html

Tag name selector

You might also like