Scribd
Upload
5 views

Front end Web Technologies_CSS

CSS basics

Uploaded by

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

Front end Web Technologies_CSS

CSS basics

Uploaded by

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

Front end Web Technologies

CSS

By Prof. Prerna Solanke


Introduction
● Cascading Style Sheets (CSS) is a markup language responsible
for how your web pages will look like and how HTML elements
are to be displayed on screen, paper, or in other media.
● CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.
● Typical CSS file is a text file with .css extension.
CSS Syntax

Selector: An HTML tag is a selector that uses a style. This might be a tag such as <h1> or
<table> etc.

Property: An attribute type of a HTML tag is a property. All of the HTML attributes are
simply converted into CSS. It might be color, border etc.

Value: Properties are allocated values, such as a color property with either a red or
#F1F1F1, etc. value.
CSS Selector
● CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set.
● CSS selectors select HTML elements according to its id, class, type,
attribute etc.
● There are several different types of selectors in CSS.
1. Element Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Group Selector
Element Selector
The element selector selects the HTML element by name.
Example:
p{

text-align: center;
color: blue;
}
Element Selector Example
<head>
<style type="text/css">
img {
border : solid blue;
}
</style>
</head>
<body>
<img src="diary.jpg" alt="Nature flower">
</body>
ID Selector
● The id selector selects the id attribute of an HTML element
to select a specific element.
● An id is always unique within the page so it is chosen to
select a single, unique element.
● It is written with the hash character (#), followed by the id
of the element.
Note: Do not start an ID name with a number. Because It
will not work in Mozilla/Firefox browser.
ID Selector Example
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello !!</p>
</body>
Class Selector
● The class selector selects HTML elements with a specific
class attribute.
● It is used with a dot sign ( . ) followed by the class name.

Note: Do not start a class name with a number. This is only


supported in Internet Explorer.
Class Selector Example
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Class Selector demo</h1>
<p class="center">hello world</p>
</body>
Difference between Class and ID selector
Universal Selector
● The universal selector is used to selects all the elements on the
pages.
● It is usually written as an asterisk (*) followed by a selector.

Example:
Universal Selector Example
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>Universal selector demo</p>
<p> hello!</p>
<p> how are you!</p>
Group Selector
The group selector is used to select all the elements with the
same style definitions.
Group selector is used to minimize the code.
Commas are used to separate each selector in grouping.
Group Selector Example
h1 {
text-align: center;
color: blue;
} h1,h2,p {
h2 {
text-align: center; text-align: center;
color: blue;
color: blue;
}
p{ }
text-align: center;
color: blue;
}
Types of CSS
There are three ways you can use to implement CSS into your
HTML:
Inline CSS
Inline CSS is generally used to style a specific HTML element
only. We can write inline CSS simply by adding the style
attribute to each HTML element.
Example:
<h1 style="background-color:yellow"> This is a heading </h1>
<p style="color:red"> This is some paragraph </p>
Inline CSS Example
<html>
<body style="background-color: lightblue">
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
<br>
<p style="color: green">This is another paragraph </p>
</body>
</html>
Internal CSS
● Internal CSS requires
you to add <style> tag
in the <head> section of
your HTML document.
● It is an effective method
of styling a single page.
● However, using this
style for multiple pages
is time-consuming.
Internal CSS Example
<head>
<style type="text/css">
h3 { color: blue }
p { color: red; margin-left: 20px }
body { background-color: lightblue }
</style>
</head>
<body>
<h3>This is a heading</h3>
<hr>
<p>This is a paragraph</p>
</body>
External CSS
● With external CSS, you’ll link your web pages to an external
.css file, which can be created by any text editor in your device
(e.g., Notepad++ or VS Code).
● This is a more efficient method, especially for styling a large
website.
● By editing one .css file, you can change entire website at once.
● It uses the <link> tag on every pages and the <link> tag should
be put inside the head section.
External CSS Example
<head>
<link rel="stylesheet" src="style.css" type="text/css">
</head>

● rel="stylesheet" tells the browser that we are importing a


stylesheet.
● src="style.css" means that we have a CSS file named style.css in
the same folder where HTML file is saved.
● type=”text/css” attribute is optional, used to define the type of
content that we are linking.
External CSS Example
<head> style.css
<meta charset = "UTF-8"> body {
<title>externalStyle.html</title> background-color: #333300;
<link rel = "stylesheet" color: #FFFFFF;
type = "text/css" }
h1 {
src = "style.css" />
color: #FFFF33;
</head>
text-align: center;
<body>
font: italic 200% fantasy;
<h1>External Style</h1>
}
<p>
p{
This page has styles set for paragraphs, body, and header 1.
background-color: #FFFF33;
</p>
color: #333300;
<p>
text-align: right;
The styles are defined in an external style sheet.
border: 3px groove #FFFF33;
</p> </body>
}
External CSS Example
Style rule cascading
Both the rules are from the same source, have an identical element
selector, and therefore, carry the same specificity, but the last one in
the source order wins.
Cascading specificity
used class selector

the browser uses


specificity to decide
which property
value is applied to
an element.
Cascading specificity : Inline style
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: plum;"> Hello World! </p>
</body>
CSS inheritance
CSS property values set on parent elements are inherited by their child
elements, and some aren't.
CSS inheritance
In CSS, inheritance controls what happens when no value is
specified for a property on an element.
CSS properties can be categorized in two types:
● inherited properties, which by default are set to the
computed value of the parent element.
● non-inherited properties, which by default are set to initial
value of the property.
CSS inheritance
In CSS, inheritance controls what happens when no value is
specified for a property on an element.
CSS properties can be categorized in two types:
● inherited properties, which by default are set to the
computed value of the parent element.
● non-inherited properties, which by default are set to initial
value of the property.
CSS inheritance
Properties of the parent class are inherited by the child class
html file css file

Output:
CSS inheritance
Some properties are inherited and some are not.
html file css file Output:

Here, border-top property is not applied to the child. Thus we cannot


inherit border property but we can inherit color and font-size property.
CSS inheritance
To apply border property, we have to write child class separately.

css file
html file
Output
CSS inheritance
If we want our child class to inherit all properties of the parent class,
use inherit value. See following example:

css file
html file
Output
CSS Background
● The background-color property specifies the background color
of an element.
● The background-image property specifies an image to use as
the background of an element.
● By default, the background-image property repeats an image
both horizontally and vertically:
○ To repeat an image horizontally, set
background-repeat: repeat-x;
○ To repeat an image vertically, set
background-repeat: repeat-y;
CSS Background
CSS Background
CSS Background
CSS Background
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically
CSS Background
If the image above is repeated only horizontally
(background-repeat: repeat-x;)

To repeat an image vertically, set


background-repeat: repeat-y
CSS Background
Showing the background image only once is also specified by the
background-repeat property:
CSS Background
The background-position property is used to specify the position of the
background mage.
Here, we have also added
a margin on the right side,
so that the background
image will not disturb the
text.

Here, the background image is only


shown once. In addition it is
positioned away from the text.
CSS Border
CSS Shadow Effect

The CSS text-shadow property applies shadow to text.


CSS Shadow Effect
To add more than one shadow to the text, you can add a
comma-separated list of shadows.
CSS Box Shadow Effect
The CSS box-shadow property is used to apply one or more shadows to an
element where you can specify a horizontal and a vertical shadow. The
default color of the shadow is the current text-color.
CSS Box Shadow Effect
CSS Transition
CSS transitions allows you to change property values smoothly, over
a given duration.

https://www.w3schools.com/css/css3_transitions.asp
CSS Transition
The :hover selector is used to
select elements when you
mouse over them.

https://www.w3schools.com/css/tryi
t.asp?filename=trycss3_transition2
CSS Display Property
The display property defines how an element is rendered in the
layout, determining its positioning and interaction within the
document’s flow and structure.
It takes many different values such as:
● display: none
● display: inline
● display: block
● display: inline-block
● display: flex
<head> <body>
<style> <h2>Before display: inline</h2>
div { <div>First div element.</div>
border: 2px solid blue; <div>Second div element.</div>
margin-bottom: 10px; <h2>After display:inline</h2>
padding: 2px; <div class="after">First div element.</div>
} <div class="after">Second div element.</div>
div.after { </body>
display: inline;
}
</style>
</head>
<head> <body>
<style> <h2>Before display: block</h2>
span { <span>First span element.</span>
border: 2px solid blue; <span>Second span element.</span>
margin-bottom: 10px; <h2>After display: block</h2>
padding: 2px; <span class="after">First span element.</span>
<span class="after">Second span element.</span>
}
</body>
span.after {
display: block;
}
</style>
</head>
<head> <body>
<style>
span { <h2>Display:inline-block</h2>
padding: 10px;
margin: 20px; <p>In this paragraph,<span>SPAN</span>
border: 2px solid black; element is in green-yellow color.</p>
background-color:
greenyellow; </body>
}
span.after {
display: inline-block;
}
</style>
</head>
<head> <body>
<style> <h1>The display Property</h1>
ul.parent { <ul class="parent">
display: flex; <li>Home</li>
background-color: plum; <li>About</li>
padding: 0px; <li>Gallery</li>
} <li>Blogs</li>
li { <li>Contact</li>
background: skyblue; </ul>
padding: 12px; </body>
margin: 8px;
list-style: none;
}
</style>
</head>
CSS Animation
● CSS allows animation of HTML elements without using
JavaScript or Flash!
● It lets an element gradually change from one style to
another.
● CSS animations are made up of two basic building blocks.
1. Keyframes - define the stages and styles of the
animation.
2. Animation Properties - assign the @keyframes to a
specific CSS element and define how it is animated.
CSS Animation - The keyframe rule
When you specify CSS styles
inside the @keyframes rule,
the animation will gradually
change from the current style
to the new style.
Note: If animation-duration
property is not specified, no
animation will occur, because
the default value is 0s (0
seconds).
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1
CSS Animation - The keyframe rule

https://www.w3schools.com/css/tryit.asp?file
name=trycss3_animation2
CSS Animation - The keyframe rule

https://www.w3schools
.com/css/tryit.asp?filen
ame=trycss3_animatio
n3
CSS 2D transform
With the CSS transform property you can use the following 2D
transformation methods:
● translate()
● rotate()
● scale(), scaleX(), scaleY()
● skew(), skewX(), skewY()
● matrix()
CSS 2D transform
The translate() method:

The rotate() method:


CSS 2D transform
The scale() method:

The skew() method:


CSS 2D transform
The matrix() method:
● The matrix() method combines all the 2D transform methods into
one.
● It take six parameters, containing mathematical functions, which
allows you to rotate, scale, translate, and skew elements.
● The parameters are as follow: matrix(scaleX(), skewY(), skewX(),
scaleY(), translateX(), translateY())
CSS 3D transform
CSS supports 3D transformation.
3D transforms use the same transform property used for 2D transforms
● rotateX()
● rotateY()
● rotateZ()
Example:
CSS Box model
● In CSS, the term "box
model" is used when
talking about design and
layout.
● CSS box model is
essentially a box that
wraps around every
HTML element.
● It consists of: content,
padding, borders and
margins. The image
below illustrates the box
model:
CSS Box model
<html> <body>
<head> <center>
<style> <h2>CSS Box Model</h2>
div { <div>This text is the content of the box. </div>
background-color: lightblue; </center>
width: 100px; </body>
border: 20px solid green; </html>
padding: 20px;
margin: 15px; Output:
} Another example:
</style> https://www.w3schools.c
om/css/tryit.asp?filenam
</head> e=trycss_boxmodel_widt
h
CSS Frameworks
CSS frameworks are pre-prepared libraries containing styles and
templates that standardize and streamline the design and development
process. They enhance the efficiency of styling web pages.
The most popular CSS Frameworks are given below:
1. BootStrap
2. Tailwind CSS
3. Semantic UI
4. Materialize CSS
5. Bulma
6. Primer CSS
7. Foundation
8. Pure

You might also like