Scribd
Upload
49 views

Web Technology Unit-3

CSS (Cascading Style Sheets) allows users to apply styles to HTML pages, including colors, fonts, layout, and more. It separates design from content. There are three types of CSS: inline CSS applied directly to HTML elements, internal CSS defined within <style> tags in the HTML <head> section, and external CSS linked via <link> tags from an external .css file. CSS uses selectors to target elements for styling via properties and values. Common selectors include element, id, class, and universal selectors.

Uploaded by

Deepak Verma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

Web Technology Unit-3

CSS (Cascading Style Sheets) allows users to apply styles to HTML pages, including colors, fonts, layout, and more. It separates design from content. There are three types of CSS: inline CSS applied directly to HTML elements, internal CSS defined within <style> tags in the HTML <head> section, and external CSS linked via <link> tags from an external .css file. CSS uses selectors to target elements for styling via properties and values. Common selectors include element, id, class, and universal selectors.

Uploaded by

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

1

Web Technology
Unit-3 - (Style Sheets)
CSS :
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independently of the HTML that makes up
each web page. It describes how a webpage should look: it prescribes colours, fonts, spacing,
and much more. In short, you can make your website look however you want. CSS lets
developers and designers define how it behaves, including how elements are positioned in the
browser.
o CSS stands for Cascading Style Sheet.
o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.
Why CSS ?
 CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML
pages.
 Easy Maintenance: To make a global change simply change the style, and all elements in
all the webpages will be updated automatically.
 Search Engines: CSS is considered a clean coding technique, which means search
engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of an offline
cache. Using this we can view offline websites.

CSS Syntax
A CSS rule set contains a selector and a
declaration block.
2

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned
to color property.
Example : In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}
Example Explained
 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

Types of CSS :
1. Inline CSS
We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This method mitigates
some advantages of style sheets so it is advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example:
3

1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>


2. <p>This paragraph is not affected.</p>

2. Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined in
<head> section of the HTML page inside the <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>

3. External CSS
The external style sheet is generally used when you want to make changes on multiple pages. It
is ideal for this condition because it facilitates you to change the look of the entire web site by
changing just one file.
4

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

CSS Selectors:
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. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector

1) CSS Element Selector

The element selector selects the HTML element by name.


5

<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS 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.
Let’s take an example with the id "para1".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
6

10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

3) CSS Class Selector


The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
7

4) CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
*{
5. color: green;
6. font-size: 20px;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>This is heading</h2>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

CSS Properties
align-content Specifies the alignment between the lines inside a flexible
container when the items do not use all available space

align-items Specifies the alignment for items inside a flexible container

align-self Specifies the alignment for selected items inside a flexible


container

all Resets all properties (except unicode-bidi and direction)


8

aspect-ratio Specifies preferred aspect ratio of an element

backdrop-filter Defines a graphical effect to the area behind an element

backface-visibility Defines whether or not the back face of an element should be


visible when facing the user

background A shorthand property for all the background-* properties

background-clip Defines how far the background (color or image) should


extend within an element

background-color Specifies the background color of an element

background-image Specifies one or more background images for an element

background-origin Specifies the origin position of a background image

background-position Specifies the position of a background image

background-position-x Specifies the position of a background image on x-axis

background-position-y Specifies the position of a background image on y-axis

background-repeat Sets if/how a background image will be repeated

background-size Specifies the size of the background images

block-size Specifies the size of an element in block direction

border A shorthand property for border-width, border-


style and border-color

border-block A shorthand property for border-block-width, border-block-


style and border-block-color

border-bottom A shorthand property for border-bottom-width, border-


9

bottom-style and border-bottom-color

border-bottom-color Sets the color of the bottom border

border-bottom-left- Defines the radius of the border of the bottom-left corner


radius

border-bottom-right- Defines the radius of the border of the bottom-right corner


radius

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-collapse Sets whether table borders should collapse into a single


border or be separated

border-color Sets the color of the four borders

border-image A shorthand property for all the border-image-* properties

border-image-outset Specifies the amount by which the border image area extends
beyond the border box

border-image-repeat Specifies whether the border image should be repeated,


rounded or stretched

border-image-width Specifies the width of the border image

border-inline A shorthand property for border-inline-width, border-inline-


style and border-inline-color

border-inline-color Sets the color of the borders at start and end in the inline
direction

border-left A shorthand property for all the border-left-* properties

border-left-color Sets the color of the left border


10

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius A shorthand property for the four border-*-radius properties

border-right A shorthand property for all the border-right-* properties

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-spacing Sets the distance between the borders of adjacent cells

border-style Sets the style of the four borders

border-top A shorthand property for border-top-width, border-top-


style and border-top-color

border-top-color Sets the color of the top border

border-top-left-radius Defines the radius of the border of the top-left corner

border-top-right-radius Defines the radius of the border of the top-right corner

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

bottom Sets the elements position, from the bottom of its parent
element

box-shadow Attaches one or more shadows to an element


11

box-sizing Defines how the width and height of an element are


calculated: should they include padding and borders, or not

break-after Specifies whether or not a page-, column-, or region-break


should occur after the specified element

break-before Specifies whether or not a page-, column-, or region-break


should occur before the specified element

break-inside Specifies whether or not a page-, column-, or region-break


should occur inside the specified element

color Sets the color of text

column-count Specifies the number of columns an element should be


divided into

column-fill Specifies how to fill columns, balanced or not

column-gap Specifies the gap between the columns

column-span Specifies how many columns an element should span across

column-width Specifies the column width

columns A shorthand property for column-width and column-count

content Used with the :before and :after pseudo-elements, to insert


generated content

cursor Specifies the mouse cursor to be displayed when pointing


over an element

direction Specifies the text direction/writing direction

display Specifies how a certain HTML element should be displayed


12

empty-cells Specifies whether or not to display borders and background on empty


cells in a table

filter Defines effects (e.g. blurring or color shifting) on an element before


the element is displayed

flex A shorthand property for the flex-grow, flex-shrink, and the flex-
basis properties

flex-basis Specifies the initial length of a flexible item

flex-direction Specifies the direction of the flexible items

flex-flow A shorthand property for the flex-direction and the flex-


wrap properties

flex-grow Specifies how much the item will grow relative to the rest

flex-shrink Specifies how the item will shrink relative to the rest

flex-wrap Specifies whether the flexible items should wrap or not

float Specifies whether an element should float to the left, right, or not at all

font A shorthand property for the font-style, font-variant, font-weight, font-


size/line-height, and the font-family properties

@font-face A rule that allows websites to download and use fonts other than the
"web-safe" fonts

font-family Specifies the font family for text

font-feature- Allows control over advanced typographic features in OpenType fonts


settings

font-size Specifies the font size of text


13

font-size-adjust Preserves the readability of text when font fallback occurs

font-stretch Selects a normal, condensed, or expanded face from a font family

font-style Specifies the font style for text

font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by


the browser

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font

gap A shorthand property for the row-gap and the column-gap properties

grid A shorthand property for the grid-template-rows, grid-template-


columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and
the grid-auto-flow properties

grid-area Either specifies a name for the grid item, or this property is a
shorthand property for the grid-row-start, grid-column-start, grid-row-
end, and grid-column-end properties

grid-auto- Specifies a default column size


columns

grid-auto-flow Specifies how auto-placed items are inserted in the grid

grid-auto-rows Specifies a default row size

grid-column A shorthand property for the grid-column-start and the grid-column-


end properties

grid-column- Specifies where to end the grid item


end

grid-column- Specifies the size of the gap between columns


14

gap

grid-column- Specifies where to start the grid item


start

grid-template A shorthand property for the grid-template-rows, grid-template-


columns and grid-areas properties

height Sets the height of an element

hyphens Sets how to split words to improve the layout of paragraphs

inline-size Specifies the size of an element in the inline direction

inset Specifies the distance between an element and the parent


element

justify-content Specifies the alignment between the items inside a flexible container
when the items do not use all available space

justify-items Is set on the grid container. Specifies the alignment of grid items in the
inline direction

justify-self Is set on the grid item. Specifies the alignment of the grid item in the
inline direction

letter-spacing Increases or decreases the space between characters in a text

line-break Specifies how/if to break lines

line-height Sets the line height


15

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style- Specifies the position of the list-item markers (bullet points)


position

list-style-type Specifies the type of list-item marker

margin Sets all the margin properties in one declaration

margin-block Specifies the margin in the block direction

margin-block- Specifies the margin at the end in the block direction


end

margin-block- Specifies the margin at the start in the block direction


start

margin-bottom Sets the bottom margin of an element

margin-inline Specifies the margin in the inline direction

margin-inline- Specifies the margin at the end in the inline direction


end

margin-inline- Specifies the margin at the start in the inline direction


start

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

mask Hides parts of an element by masking or clipping an image at specific


places
16

mask-clip Specifies the mask area

mask- Represents a compositing operation used on the current mask layer


composite with the mask layers below it

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

mix-blend- Specifies how an element's content should blend with its direct parent
mode background

offset Is a shorthand, and specifies how to animate an element along a path

opacity Sets the opacity level for an element

order Sets the order of the flexible item, relative to the rest

outline-color Sets the color of an outline

outline-offset Offsets an outline, and draws it beyond the border edge

outline-style Sets the style of an outline

overflow-wrap Specifies whether or not the browser can break lines with long words,
if they overflow the container

overflow-x Specifies whether or not to clip the left/right edges of the content, if it
overflows the element's content area

overflow-y Specifies whether or not to clip the top/bottom edges of the content, if
it overflows the element's content area
17

padding A shorthand property for all the padding-* properties

padding- Sets the bottom padding of an element


bottom

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element

pointer-events Defines whether or not an element reacts to pointer events

position Specifies the type of positioning method used for an element (static,
relative, absolute or fixed)

resize Defines if (and how) an element is resizable by the user

right Specifies the right position of a positioned element

rotate Specifies the rotation of an element

row-gap Specifies the gap between the grid rows

tab-size Specifies the width of a tab character

table-layout Defines the algorithm used to lay out table cells, rows, and
columns

text-align Specifies the horizontal alignment of text

text-align-last Describes how the last line of a block or a line right before a
forced line break is aligned when text-align is "justify"

text-combine-upright Specifies the combination of multiple characters into the


space of a single character
18

text-decoration Specifies the decoration added to text

text-decoration-color Specifies the color of the text-decoration

text-decoration-line Specifies the type of line in a text-decoration

text-decoration-style Specifies the style of the line in a text decoration

text-justify Specifies the justification method used when text-align is


"justify"

text-orientation Defines the orientation of characters in a line

text-overflow Specifies what should happen when text overflows the


containing element

text-shadow Adds shadow to text

text-transform Controls the capitalization of text

text-underline-position Specifies the position of the underline which is set using the
text-decoration property

top Specifies the top position of a positioned element

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space

transition A shorthand property for all the transition-* properties

transition-delay Specifies when the transition effect will start

translate Specifies the position of an element


19

vertical-align Sets the vertical alignment of an element

visibility Specifies whether or not an element is visible

white-space Specifies how white-space inside an element is handled

width Sets the width of an element

word-break Specifies how words should break when reaching the end of a
line

word-spacing Increases or decreases the space between words in a text

word-wrap Allows long, unbreakable words to be broken and wrap to the


next line

writing-mode Specifies whether lines of text are laid out horizontally or


vertically

z-index Sets the stack order of a positioned element

CSS Box-Model

The CSS box model is a container that contains multiple properties including borders, margins,
padding, and the content itself. It is used to create the design and layout of web pages. It can
be used as a toolkit for customizing the layout of different elements. The web browser renders
every element as a rectangular box according to the CSS box model.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:
20

Explanation of the different parts:


 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

CSS 3 - CSS3 is a latest standard of css earlier versions(CSS2). The main difference between
css2 and css3 is follows −
 Media Queries
 Namespaces
 Selectors Level 3
 Color
CSS3 modules
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this
collaboration is module. Some of the modules are shown below −
21

 Selectors
 Box Model
 Backgrounds
 Image Values and Replaced Content
 Text Effects
 2D Transformations
 3D Transformations
 Animations
 Multiple Column Layout
 User Interface

CSS3 features
CSS3 new features are used in designing better layouts and attractive web pages easily.
It makes the html elements look more appealing to the eyes. Now, let us study the
application of each feature in detail.
New Selectors: More ways to target HTML Elements
CSS3 has introduced new selectors to target HTML elements to create more efficient
stylesheets. Examples of new Selectores are:
 Attribute Selectors: These selectors help you to target elements based on attributes like
class or id.
 Adjacent Sibling Selectors: The adjacent Sibling Selectors allow you to target a
component that is the immediate successor of another element. To target the first
paragraph after a heading, we can use the “h1+p” selector.
 Child Selectors: These target elements that are direct children of another element. For
example, to target the lists of an ordered list, we use the selector “ol>li.”
 Nth-child selectors: These are used depending on their position within a parent
element. For example, “li: nth-child (even).”
Rounded Corners
With the earlier versions of CSS, it was pretty challenging to have rounded corners for
images and elements. The CSS3 feature of “border-radius” to create rounded corners
has simplified this issue. We can have more appealing HTML components with rounded
22

corners by specifying a value greater than 0 to the border-radius. Today, we can see
rounded corners to most of the web content, all thanks to CSS3.
Example:
{
border-radius: 12px;
}
2D and 3D transformations for shapes and text
CSS3 comes with a critical transform property that can be applied to rotate, translate,
skew, flip, zoom, shrink, and scale HTML elements.
For 2D transformations CSS3 provides rotate(), scale(), skew() and translate() functions.
While for 3D transformations, we have rotateX(), rotateY(), and rotateZ(). These
functions can be used to create more interactive and stunning web designs.
 rotate(): To rotate an element clockwise and counterclockwise around the z axis, we use
the rotate() function in CSS3.
 scale(): To resize any HTML element on a 2D plane, we use the scale() function inCSS3.
 skew(): To give a shear transformation to a specific angle, we use the skew() function in
CSS3.
 translate(): To change the position of any HTML element along the horizontal or vertical
direction, we use the translate() function in CSS3.
Shadow effect
The CSS3 has an important box-shadow property to add shadows to text and shapes,
thus adding a sense of depth to them. Along with the box shadow, we can add a
horizontal and vertical offset, blur amount, shadow color, shadow spread, and inset.
This makes the web pages visually more engaging.
Example:
.container{
box-shadow : 1.5px 1.5px 5px #312577;
}
Transitions and Animations: Smooth and Dynamic Visual Effects
CSS3 transitions and animations are an advanced styling feature that allows web
developers to add smooth and dynamic visual effects to their web pages. While the
23

transition property is used to create gradual changes in CSS property, with animations,
you can create more complex effects by specifying the keyframes, which in turn target
the values of CSS properties at specific time stamps. Both transitions and animations can
be used to create interactive web pages.
Example:
HTML
<div class=”container”></div>

CSS
.container {
width: 50px;
height: 50px;
background-color: yellow;
transition: width 1s ease-in-out;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Setting Opacity
Using rgba colors, the CSS3 opacity property can be applied to alter the opacity of HTML
elements. Instead of editing the picture with the required opacity and adding it to the
HTML file, we can simply write a single line of code in CSS.
Example:
24

div{
opacity: 0.7;
}
Flexbox: Powerful Layout Capabilities for Responsive Design
CSS3 comes with a very versatile and powerful flexbox property to organize the contents
within an HTML element in an efficient way to create a responsive layout. The features
of Flexbox include the following:
 Flexible container: The HTML component containing the flex items can be adjusted to
fill the entire space or shrink as per the requirement.
 Flexible items: The flex items can also be positioned as needed.
 Alignment: Flexbox provides alignment options to align its items center, spaced, or
wrapped.
 Responsive design: This property enables us to create flexible layouts for different
screen sizes.
 Direction control: We can change the direction of the Flexbox from column to row and
vice versa using the direction control feature of the Flexbox.
Media queries: Conditional styling for different screen sizes
The contribution of media query properties toward the responsive design of a webpage
is worth mentioning. This CSS3 feature allows conditional styling to create designs and
layouts for different screen sizes like laptops, desktops, tablets, mobiles, etc. Thus a
consistent user experience across different screens is achieved through media queries.
Word Wrapping
CSS3 word wrapping feature allows developers to control and manage long words when
they exceed the container's width.
We can have two values with the word-wrap property: normal and break-word. While
the normal value allows lengthy words to extend beyond the container's width, the
word-break value breaks long words and wraps them to the following line.
Example:
.box {
width: 150px;
border: 1px solid red;
25

word-wrap: break-word;
}
Font Flexibility
CSS3 has introduced many new font-related features, including font flexibility. This
feature allows us to specify the range of font styles, thus giving us absolute control over
how the text appears on the web page. We can also add our own variations to the font
styles using the font-stretch property.

You might also like