KEMBAR78
Web Essentials Note Unit 3 | PDF | Html | Html Element
Scribd
Upload
3 views47 pages

Web Essentials Note Unit 3

Uploaded by

keerthana sridhar
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 views47 pages

Web Essentials Note Unit 3

Uploaded by

keerthana sridhar
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/ 47

CSS103J-Web Essentials

UNIT III- CASCADING STYLE SHEET

CSS3 - Introduction, Syntax, CSS Types, CSS Selectors, CSS Box Model, CSS Inheritance, CSS
Properties -Backgrounds and Borders, Text, Font Properties

CSS3 – Introduction

CSS (Cascading Style Sheets) is a language designed to simplify the process of


making web pages presentable.
 It allows you to apply styles to HTML documents by prescribing colors, fonts,
spacing, and positioning.
 The main advantages are the separation of content (in HTML) and styling (in
CSS) and the same CSS rules can be used across all pages and not have to be
rewritten.
 HTML uses tags, and CSS uses rule sets.
 CSS styles are applied to the HTML element using selectors.
 CSS styles are applied to the HTML element using selectors.

Why CSS?
 Saves Time: Write CSS once and reuse it across multiple HTML pages.
 Easy Maintenance: Change the style globally with a single modification.
 Search Engine Friendly: Clean coding technique that improves readability for
search engines.
 Superior Styles: Offers a wider array of attributes compared to HTML.
 Offline Browsing: CSS can store web applications locally using an offline cache,
allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and a declaration block.
 Selector: Targets specific HTML elements to apply styles.
 Declaration: Combination of a property and its corresponding value.
// HTML Element
<h1>GeeksforGeeks</h1>

// CSS Style
h1 {
color: blue; font-size: 12px;
}

The CSS code targets the h1 element with the selector h1. The declaration { color: blue;
font-size: 12px; } sets the text color to blue and the font size to 12 pixels.
 The selector points to the HTML element that 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.
Example
p{
color: blue;
text-align: center;
}
CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces. In this example, all paragraph element (<p> tag) will be
centre-aligned, with a blue text color.
Ways to Apply CSS
1. Inline CSS: Directly within the HTML element using the style attribute.
2. Internal CSS: Within a <style> tag in the <head> section.
3. External CSS: The external CSS is the CSS linked to an HTML file using the
<link> tag.
What is Cascading?
Cascading in CSS refers to how styles are applied to elements based on priority
rules. When multiple CSS rules target the same element, the browser decides which
style to apply by following the cascading order: inline styles, internal styles, and
external stylesheets. The specificity of selectors, the order of CSS rules, and the use
of important tags further determine which styles take precedence. This allows
developers to layer styles and create more complex designs without overriding other
rules unnecessarily. Understanding this behavior is essential for efficient and
effective styling.
Key Advantages and Disadvantages of CSS
Here are some key advantages and disadvantages of css:
Advantages of CSS
 Simplifies web design and maintenance.
 Enhances website performance and user experience.
 Supports responsive and adaptive designs for all devices.
Disadvantages of CSS
 Cross-Browser Compatibility Issues : Different browsers may interpret CSS
differently, causing inconsistencies in design.
 Complexity in Large Projects : As projects grow, CSS can become hard to manage,
leading to cluttered code and style conflicts.
 Limited Dynamic Behavior : CSS is mainly for static design, so it can't handle
complex interactions or animations without JavaScript

Syntax
CSS is written as a rule set, which consists of a selector and a declaration block.
The basic syntax of CSS is as follows:
 The selector is a targeted HTML element or elements to which we have to apply
styling.
 The Declaration Block or " { } " is a block in which we write our CSS.
<html>

<head>
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}

p{
color: green;
font-size: 16px;
}
</style>
</head>

<body>
<h1>Hello, World!</h1>
<p>This is a simple paragraph.</p>
</body>

</html>
In above Example,
 h1: This selector targets all <h1> elements on the page. The style applied to <h1>
will set the text color to blue and the font size to 24px.
 p: This selector targets all <p> elements. The text color will be green and the font
size will be 16px.
Selectors in CSS
Selectors define which HTML elements are styled. CSS offers several types of
selectors.

CSS Selectors
1. Universal Selector: Applies styles to all elements.
*{
margin: 0;
padding: 0;
}
2. Type Selector: Targets specific HTML elements.
h1 {
font-family: Arial, sans-serif;
}
3. Class Selector: Styles elements with a specific class attribute.
.box {
border: 1px solid black;
padding: 10px;
}
4. ID Selector: Targets a single element with a specific ID.
#header {
background-color: lightgray;
}
Declaration Block in CSS Syntax
Each declaration consists of a property and a value, separated by a colon, and each
declaration is followed by a semicolon:
1. Properties: Properties are the aspects of the selected elements you want to style
(like color, width, height, etc.).
1. color: Defines the text color.
2. background-color: Defines the background color of an element.
3. font-size: Sets the size of the font.
4. margin: Specifies the space around an element.
5. padding: Defines the space between the element's content and its border.
2. Values: Values define the specifics of the property you want to apply, such as a
color name, a number (e.g., 16px), or percentages (e.g., 50%).
Grouping and Nesting of CSS Selectors
You can group selectors to apply the same styles or nest them for hierarchical
targeting.
1. Grouping
h1, h2, h3 {
color: darkblue;
}
2. Nesting
ul li {
list-style-type: square;
}
2. Nesting
ul li {
list-style-type: square;
}
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are used for styling specific states or parts of
elements. Pseudo classes target's the elements based on a particular state and pseudo
elements targets the elements on basis of a particular part of that element.
/*pseudo-class selector*/
a:hover {
color: green;
}

/*pseudo-element selector*/
p::first-line {
font-weight: bold;
}
CSS Types
CSS is used to style and layout web pages, controlling the appearance of HTML
elements. It allows developers to create visually appealing designs and ensure a
consistent look across a website.
Types of CSS
CSS can be implemented in three different ways:
 Inline CSS
 Internal or Embedded CSS
 External CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the
style attribute. This method allows for specific styling of elements within the HTML
document, overriding any external or internal styles.
Now, let us understand with the help of the example:
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
Inline CSS
</p>
Output

Inline CSS
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document's <style> element.
It applies styles to specified HTML elements. The CSS rule set should be within the
HTML file in the head section, i.e. the CSS is embedded within the <style> tag
inside the head section of the HTML file.
Now, let us understand with the help of the example:
<!DOCTYPE html>
<html>

<head>
<style>
.main {
text-align: center;
}

.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}

.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">Internal CSS</div>

<div class="geeks">
Implementation of Internal CSS
</div>
</div>
</body>
</html>
3. External CSS
External CSS contains separate CSS files that contain only style properties with the
help of tag attributes (For example class, id, heading, ... etc). CSS property is written
in a separate file with a .css extension and should be linked to the HTML document
using a link tag. It means that, for each element, style can be set only once and will
be applied across web pages.
Now, let us understand with the help of the example:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">External CSS </div>
<div id="geeks">
This shows implementation of External CSS
</div>
</div>
</body>
</html>
Output

External CSS
When to Use Inline CSS
 For quick fixes and small changes that don’t require a separate CSS file.
 When you need to override other styles for a particular element.
 If you’re working on emails or HTML-based applications where external CSS is
not supported.
When to Use Internal CSS
 When designing a single-page website.
 If you need better control over styling than inline CSS.
 For small to medium-sized projects where external CSS might be unnecessary.
When to Use External CSS
 For large-scale projects where multiple pages share a common design.
 When maintainability and scalability are priorities.
 To improve website performance and load times using CSS caching.

CSS Selectors

CSS Selectors are used to target HTML elements on your pages, allowing you to
apply styles based on their ID, class, type attributes, and more. There are mainly 5
types of selectors.
 Basic CSS Selectors: These are used to target elements by tag, .class, or #
ID for fundamental styling needs.
 Combinators: Ideal for styling elements based on their DOM relationships (e.g.,
parent-child or sibling relationships).
 Group Selectors: These are used to apply the same styles to multiple unrelated
elements simultaneously.
 Attribute Selectors: Perfect for styling elements based on specific attributes or
values, such as form inputs or links with certain prefixes or states.
 Pseudo-Classes: Best for styling elements dynamically or interactively, like:
hover for user interaction, or:nth-child() for structural styling.
Types of CSS Selectors
Basic Selectors
Basic selectors in CSS are simple tools used to target specific HTML elements for
styling. These include selecting by element name (e.g., h1), class (.class Name), ID
(#idName), or universally (* for all elements).
1. Universal Selector (*): Selects all elements on the page and applies the same
style universally. For example, setting the font color for every element.
Example:
<html>
<head>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>Header Text</h1>
<p>Paragraph Text</p>
</body>
</html>
2. Element Selector: Targets all elements of a specific type, such as paragraphs or
headers. For example, setting a common font size for all paragraphs
Example:
<html>
<head>
<style>
p{
font-size: 16px;
}
</style>
</head>
<body>
<p>This paragraph text will be styled with font size
16px.</p>
</body>
</html>
 Simple Selectors:
 Type Selector (Element Selector): Selects all elements with a specific HTML tag name
(e.g., p to select all paragraph elements).
 Class Selector: Selects elements based on their class attribute, denoted by a period followed by
the class name (e.g., .my-class).
 ID Selector: Selects a single, unique element based on its id attribute, denoted by a hash
symbol followed by the ID name (e.g., #my-id).
 Universal Selector: Selects all elements on the page, denoted by an asterisk ( *).
 Combinator Selectors:
Select elements based on their relationship to other elements in the document structure.
 Descendant Combinator: Selects elements that are descendants of another element, separated
by a space (e.g., div p selects all p elements inside a div).
 Child Combinator: Selects elements that are direct children of another element, separated by
a > (e.g., ul > li selects li elements that are direct children of a ul).
 Adjacent Sibling Combinator: Selects an element that is immediately preceded by another
specific element, separated by a + (e.g., h1 + p selects the p element immediately following
an h1).
 General Sibling Combinator: Selects all sibling elements that follow a specified element,
separated by a ~ (e.g., p ~ span selects all span elements that are siblings of a p and appear after
it).
 Attribute Selectors:
Select elements based on the presence or value of their attributes (e.g., [type="text"] selects all
elements with a type attribute equal to "text").
 Pseudo-classes:
Select elements based on their state or position in the document tree (e.g., :hover for styling on
mouse hover, :nth-child(n) for selecting elements based on their position).

CSS Box Model

The CSS Box Model defines how elements are sized, positioned, and rendered on a
webpage. When a browser loads an HTML document, it creates a DOM tree and
assigns a box to each element. This box calculates the element's
dimensions and position relative to its parent or the root <html> element, ensuring
accurate layout and spacing.
Box Model Component Layout
 Content: The area where text or other content is displayed.
 Padding: Space between the content and the element's border.
 Border: A frame that wraps around the padding and content.
 Margin: Space between the element's border and neighbouring elements.

Key components of the box model


1. Content Area
 The content area is the central part of the CSS box model, containing the main
content (e.g., text, images, videos, or elements like <p> or <span>).
 It can be styled with CSS properties like height and width.
The content edge refers to the four edges of the content area
 Left content edge
 Right content edge
 Top content edge
 Bottom content edge
2. Padding Area
 The padding area is the space between the content and the border of an element.
 It includes the areas highlighted in light green and skin color in the example.
 The distance between the content edge and the border is the padding.
 The border marks the end of the padding area.
 The padding area contributes to the element's total dimensions.
 Padding can be adjusted using CSS properties.
 It works similarly with box-sizing: content-box and box-sizing: border-box, but
with slight calculation differences.
3. Border Area
 The area that marks the end of an element is called as the border it is the outer
fencing for the element.
 The default border properties are provided in CSS to control the thickness of this
outer fencing.
 The border area also add 's up to the complete height and width of the element.
 The more the border width the more will be the height or width of the element.
 In the above image the area marked with skin color is called the border area.
4. Margin Area
 The area outside the border of an element is called the margin area.
 Basically this area depends on the parent of the element.
 The distance between the border of the parent element and the border of the child
element is called as the margin.
 CSS has provides certain margin properties to get control over this scenario.
Box Sizing Property in CSS
There are two type's of box-sizing properties in CSS
1. Content-Box(default property)
When the user set's the value of the box-sizing property for an element as content-
box or even if user do not set's it ,it remains by default as content-box and in the
actual height and width of the element the dimensions of the content area as well as
the padding area is added to constitute the final dimensions of the element.

<html>
<head>
<style>
div {
height: 200px;
width: 200px;
box-sizing: content-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
</head>
<body>
<div>Hello GFG</div>
</body>
</html>
This code will create a box model with a border line width of 0.4px always and
border-area of 1.6px and padding area as 20px width on both sides of the content
area.

Content Area (Width) :The width of the content area is fixed at 200px.
Padding
 Padding adds extra space inside the element, around the content.
 Padding Left: 20px
 Padding Right: 20px
 Total padding width: 20px + 20px = 40px
Border
 The border, being solid, has a width, but it is calculated differently from the
padding.
 Line Width of Border: 0.4px (the width of the line itself)
 Area of Border: 1.6px (the actual space the border occupies visually)
 Border width for both sides: 1.6px (left) + 1.6px (right) = 3.2px
Total Width
 Total width of the element can be calculated by adding the padding and border
areas to the content area width.
 Formula for Total Width = (Padding-Left + Padding-Right + Border-Area-Left +
Border-Area-Right) + Content Area Width
 Total Width = (20px + 20px + 1.6px + 1.6px) + 200px = 243.2px
 The total width of the element becomes 243.2px.
The reason the total width is increased unexpectedly is because box-sizing: content-
box applies the width to the content area only .The padding and border are added
outside the content area, leading to an increase in the overall width and height of the
element.
2. Border-Box
When the box-sizing property is set as border-box the actual dimensions of the
element's remains same as that of the actual dimensions set by the user. The
difference it makes is just that the size of the content area get's altered in a manner
so that it could accommodate the padding area and the border area so the resultant
could be equal to the actual dimensions entered by the user.

<html>
<head>
<style>
div {
height: 200px;
width: 200px;
box-sizing:border-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
</head>
<body>
<div>Hello GFG</div>
</body>
</html>
This code will create a box model by altering the dimensions specifically the width
of the content area to accomodate the padding and the border area with the border
line-width.

 Width of Border and Padding Border width : 0.4px (line width) and 1.6px +
1.6px = 3.2px (total border area).
 Padding width : 20px + 20px = 40px.
 User-Entered Width : The width entered by the user is 200px, which applies to
the content area only when box-sizing: content-box is used.
 Box-Sizing Behavior :The box-sizing: content-box property adds the padding
and border outside the content area, causing the total width to increase.
 Adjusting Content Area Width : To ensure the total width remains 200px, the
extra width from padding and borders (40px + 3.2px = 43.2px) is subtracted from
the total width.
 New content area width : 200px - 43.2px = 156.8px.
 Final Width Calculation : The final total width is: 156.8px (content area) +
40px (padding) + 3.2px (border) = 200px, ensuring the user’s entered width
remains unchanged.

CSS Inheritance
Inheritance, a fundamental concept in object-oriented programming (OOP), mirrors
real-life inheritance where children inherit traits from parents.
CSS Inheritance: In CSS inheritance, the child element will naturally inherit
properties from its parent element.
Syntax:
<style>
#parentclass {
color: red;
}
</style>
<div id="parentclass">
Parent Div
<div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>
Here parentclass passes a CSS styling done as color to be red. Whereas the child
classes div1Child and div2Child have no ruleset of color: red set to them but they
got displayed in red.
It is because the child div’s 1 and 2 inherited the properties from the parent i.e.
parentclass.
<html>
<head>
<style>
#parentclass {
color: black;
}
#child1 {
color: green;
}
#childchild1 {
color: red;
}
</style>
</head>
<body>
<div id="div1">
Parent
<div id="child1">
Child 1
<div id="childchild1">
Child Child 1
<div id="childchildchild1">
Child Child Child
</div>
</div>
<div id="childchild2">
Child Child 2
</div>
</div>
<div id="child2">
Child 2
</div>
</div>
</body>
</html>
Output

Apply Concept of Inheritance in CSS


Here #parentclass has color:black, #child1 has color:green and #childchild1 has
color:red. In the above code #child1 and #child2 are in #parentclass so both should
get the color black inherited but only child 2 gets the color because we gave #child1
to color: green this is known as specificity.
CSS properties that can be inherited.
We cannot inherit all the properties /rules of CSS. All font-* properties are naturally
inherited like
 font-size
 font-family
 font-weight
 font-style, etc.
The color property is also inherited.
CSS properties such as height, border, padding, margin, width, etc. are not inherited
naturally. We can do inheritance on noninheritable CSS properties. We use inherit
for doing so.

CSS Inherit:

We use inherit on a CSS property for taking up its parent's element property. Let’s
say we have a code:
<html>
<head>
<style>
#parentclass {
padding: 30px;
color: red;
}
#Child {
padding: inherit;
}
</style>
</head>
<body>
<div id="parentclass">
Parent
<div id="Child">Child</div>
</div>
</body>
</html>
Output:

In this way, we inherit noninheritable CSS properties using inherit. Only the direct
child element of a parent element can inherit it but the grandchild cannot. Instead, it
will resort to its original browser computed height.

CSS Properties
CSS properties are the foundation of web design, used to style and control the
behaviour of HTML elements. They define how elements look and interact on a
webpage.
 Used to control layout, colors, fonts, spacing, and animations on web pages.
 It is essential for making web pages responsive and accessible across devices.
 Help maintain consistency and efficiency in web design and development.
Example: In this example, we will see the use of many properties usage, all the
keywords mentioned inside of { and } braces are properties.
<html>
<head>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/ge
eksforgeeks-logo.png");
background-blend-mode: normal;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
CSS Properties
The list of complete CSS properties is given below.
Properties Descriptions

@charset Rule Specifies the character encoding used in the style sheet.

@keyframes Rule CSS @keyframes specify the animation rule.

Set of styles for different media/devices using the Media


@media Rule
Queries.

align-content It is used to change the behavior of the flex-wrap property.

Set the alignment of items inside the flexible container or in the


align-items
given window.

align-self Align the selected items in the flexible container.

all Set all the elements' values to their initial or inherited values.

animation-delay Specifies the delay for the start of an animation.

animation-direction It defines the direction of the animation.

It defines how long an animation should take to complete one


animation-duration
cycle.
Properties Descriptions

animation-fill-mode It defines how styles are applied before and after animation.

animation-iteration- This specifies the number of times the animation will be


count repeated.

This specifies the name of the @keyframes describing the


animation-name
animation.

animation-play-
It specifies whether the animation is running or paused.
state

animation-timing-
It specifies how animation makes transitions through keyframes.
function

Decides whether the back face of an element might be visible or


backface-visibility
not to the user.

background- Sets whether a background image scrolls with the rest of the page
attachment or it will be fixed.

background-blend- Defines the blending mode of each background layer of the


mode webpage.

This property defines how far the background color or image


background-clip
should extend.

background-color Set the background color of an element.

Set background images for an element, You can set one or more
background-image
images as well.

background-origin Adjusting the background image of the webpage.

background-
Sets the initial position for the background image.
position
Properties Descriptions

It is used to repeat the background image horizontally and


background-repeat
vertically.

background-size It set the size of the background image.

border This is used to style the border of an element.

border-bottom Set all bottom border properties in one line.

border-bottom-
Set the color of the bottom border of an element.
color

border-bottom-left-
Define the radius of the bottom left corner of the border.
radius

border-bottom- Define the radius of the right bottom corner of the border of a
right-radius given element.

border-bottom-style Set the style of the bottom border of an element.

border-bottom-
Set a specific width to the bottom border of an element.
width

border-collapse Set the borders of the cell present inside the table and tells..

border-color Set a color to the border of an element.

border-image It creates a border using an image instead of a normal border.

border-image-
It is a shorthand property used to specify the distance.
outset

border-image-
It is used to scaling and tiling the border images.
repeat
Properties Descriptions

It divides or slices an image specified by the border-image-


border-image-slice
source property.

border-image- It specifies the image source which is to be set as the border of


source an element.

Set the width of the border image. It can be set by providing


border-image-width
multiple values.

border-left Set the width, style, and color of the left border.

border-left-color Set the color of the left-border in an Element.

border-left-style Set the style of the left border of an element.

border-left-width Sets the width of the left-border of an Element.

It is used to round the corners of the outer border edges of an


border-radius
element.

border-right-color Set the color of the right border in an Element.

border-right Set the width, style, and color of the right border.

border-right-style Set the style of the right border of an element..

border-right-width Set the width of right-border of an element.

border-top-color Set the color of the top border in an Element.

border-top Set the width, style, and color of the top border.

border-top-left-
It specifies the radius of the top left border corner of an element.
radius
Properties Descriptions

border-top-right- It specifies the radius of the top right border corner of an


radius element.

border-top-style It specifies the style of the top border.

border-top-width Set a specific width to the top border of an element.

Sets the border line style for all four sides of an element’s
border-style
border.

Set the distance between the borders of neighboring cells in the


border-spacing
table.

border-width Set the border line width of all four sides of an element.

bottom It allows the vertical position of an element to be altered.

box-shadow Set a shadow-like effect to the frames of an element.

box-decoration- Control the box decoration after the fragmentation of the


break paragraph.

Defines how the user should calculate the total width and height
box-sizing
of an element.

It specifies the position where the table caption is placed. It is


caption-side
used in HTML Tables.

Set the color of the cursor in inputs, text area, or other editable
caret-color
areas.

clear Specify which side of floating elements are not allowed to float.

clip Specify a rectangle to clip an absolutely positioned element.


Properties Descriptions

Divide a portion of content inside any HTML element into a


column-count
given number of columns.

Specify whether the columns will be filled in a balanced manner


column-fill
or not.

column-gap Specify the amount of gap between the columns.

columns Set the number of columns and the width of the columns.

column-rule-color Set the color of the rule between the column.

Define the width, style, and color of the rules between the
column-rule
columns.

Set the style of the column rule between the columns on a multi-
column-rule-style
column layout.

column-rule-width Set the width of the column rule.

column-span Sets the number of columns an element can span across.

column-width It is used to define the width of the columns.

content Generate the content dynamically (during run time).

Specify the mouse cursor to be displayed while pointing to an


cursor
element.

counter-increment It is used to increment/decrement the value of a counter.

counter-reset Create or reset the CSS counter for elements.

direction Define the direction of text/writing within any block element


Properties Descriptions

Define the components(div, hyperlink, heading, etc) are going to


display
be placed on the web page

It specifies whether to display the borders or not in the empty


empty-cells
cells in a table.

filter Set the visual effect of an element.

It is the combination of flex-grow, flex-shrink, and flex-basis


flex
properties.

flex-basis Set the initial size of the flexible item.

flex-direction Set the direction of the flexible items of a div.

It is used to make the flexible item reversible and wrapped if


flex-flow
required.

Specifies how much the item will grow compared to other items
flex-grow
inside that container.

Specifies how much the item will shrink compared to other items
flex-shrink
inside that container.

It specifies whether flex items are forced into a single line or


flex-wrap
wrapped onto multiple lines.

font-family Set the font of an element.

Control the usage of the Kerning Information that has been


font-kerning
stored in the Font

font-size-adjust Adjusts the font size based on the height of the lowercase.

font-size Set the font size of the text in an HTML document.


Properties Descriptions

font-stretch Set the text wider or narrower.

Style the given particular text in a normal, italic, or oblique face


font-style
from its font family.

font-variant Convert all lowercase letters into uppercase letters.

Set the weight or thickness of the font being used with the
font-weight
HTML Text.

grid Offers a grid-based layout system, with rows and columns

grid-area Set a grid item size and location in a grid layout.

Specify the size for the columns of implicitly generated grid


grid-auto-columns
containers.

It specifies exactly how auto-placed items get flowed into the


grid-auto-flow
grid.

Specify the size for the rows of implicitly generated grid


grid-auto-rows
containers.

grid-column Specify a grid item's size and location within a grid column.

Explains the number of columns an item will span, or on which


grid-column-end
column line the item will end.

grid-column-gap Set the gap size between the columns in a grid layout.

grid-column-start Set on which column the line item will start.

grid-gap Sets the gap size between the rows and columns in a grid layout.
Properties Descriptions

grid-row Specify the size and location in a grid layout.

grid-row-end it defines the grid items' end position.

grid-row-gap Set the gap size between the grid elements.

grid-row-start Defines the grid items' start position.

grid-template It defines grid columns, rows, and areas.

grid-template-areas It specifies the area within the grid layout.

grid-template-
Set the number of columns and size of the columns of the grid.
columns

grid-template-rows Set the number of rows and height of the rows in a grid.

hanging- Pprovides web designers some upper hand over typography on


punctuation the webpage.

height Set the height of an element.

It defines how the words should be hyphenated to create soft


hyphens
wrap opportunities within words.

isolation Define whether an element must create new stacking content.

Alignes the flexible containers item when there is available


justify-content
space.

left It specifies the horizontal position of a positioned element

letter-spacing Set the spacing behavior between text characters .


Properties Descriptions

line-height Set the amount of space used for lines, such as in the text.

list-style It is used to set the list style.

list-style-image Set images that will be used as the list item marker.

Specifies the position of the marker box with respect to the


list-style-position
principal block box.

It specifies the appearance(such as a disc, character, or custom


list-style-type
counter style) of the list item marker.

margin-bottom Specify the margin to be used on the bottom of an element.

margin-left Set the width of the margin on the left of the desired element.

margin-right Set the right margin of an element.

margin-top Set the top margin of an element.

max-height Set the maximum height of an element.

max-width Define the maximum width of an element.

min-height Set the minimum height of an element.

min-width Define the minimum width of an element.

mix-blend-mode Define the minimum width of an element.

mask-image To set the mask of an image for a particular element.

Specify the blending of an element’s background with the


object-fit
element’s parent.
Properties Descriptions

Specifies how an image or video element is positioned with x/y


object-position
coordinates inside its content box.

Set the order of each flexible item in relation to other items


order
inside the flexible container.

outline-color Sets the outline color of an element

Sets the amount of space between an outline and the edge or


outline-offset
border of an element.

outline-style Set the appearance of the outline of an element.

outline-width It specifies the width of this outline for a specific element.

overflow-x It specifies whether to add a scroll bar horizontally.

overflow-y. It specifies whether to add a scroll bar vertically.

padding-bottom Set the padding on the bottom of an element.

padding-left Set the padding on the left side of an element.

padding-right Set the padding on the right-side of an element.

padding-top Set the padding on the top of an element.

page-break-after Add a page-break after the stated element.

page-break-before Add a page-break-before the specified element.

Add page breaks inside the element to which it is applied while


page-break-inside
printing.
Properties Descriptions

perspective Give perspective to 3D objects.

Define the position at which the user is looking 3D object i.e. the
perspective-origin
vanishing point of the 3D object.

Specify whether an element show pointer events and whether or


pointer-events
not show on the pointer.

quotes Set the quotation mark for quotations used in the sentence.

resize Resize the element according to user requirements.

Affects the horizontal position of the element as but has no effect


right
on non-positioned elements.

scroll-behavior Set smooth animation of scroll position instead of a scroll jump

Set or return the value of an inline style declaration of an


cssText
element.

Find the number of style declarations used for the particular


length
element.

Return the CSS Rule Object that represents a CSS rule-set that
parentRule
contains a selector and declaration block.

table-layout It is used to display the layout of the table.

tab-size It specifies the width of a tab character.

text-align Set the horizontal alignment of text in an element.ie.

text-align-last Set the last line of the paragraph just before the line break.
Properties Descriptions

text-decoration It is used to "decorate” the content of the text.

text-decoration- Set the color of decorations(overlines, underlines, and line-


color throughs) over the text.

text-decoration-line Sets various kinds of text-decoration.

text-decoration-
Set the text decoration of an element.
style

text-indent Set the indentation of the first line in each block of text.

Set the text-align to justify, which spreads the words into a


text-justify
complete and fixed-width line.

text-overflow Specify that some text has overflown and is hidden from view.

text-transform Control the capitalization of the text.

text-shadow Add shadows to the text.

Set the top position of an element. The top property varies with
top
the position of the element.

transform Change the coordinate space of the visual formatting model.

CSS transition
It is used to make some transition effects.
Property

transition-delay Define the time to start the transition.

Set the time duration (in seconds or milliseconds) to complete


transition-duration
the transition effect.
Properties Descriptions

Display the change in the property of an element over a specified


transition-property
duration.

unicode-bidi Determine how the bidirectional text is handled in a document.

user-select It specifies whether the text can be selected by the user or not.

vertical-align Set the vertical alignment of the table box or inline element.

visibility Specify whether an element is visible or not.

white-space Control the text wrapping and white-spacing./td>

Specify how to break the word when the word reached at end of
word-break
the line.

word-spacing Increase or decreases the white space between words.

word-wrap It breaks long words and wraps them into the next line.

will-change Specify the browser how an element is expected to change.

Specify whether the lines of text are laid out horizontally or


writing-mode
vertically.

z-index Define the order of elements if they overlap with each other.

Backgrounds

The CSS background is the area behind an element's content, which can be a color,
image, or both. The background property lets you control these aspects, including
color, image, position, and repetition.
You can try different types of background here-
Example: This example displays the use of a CSS background.
<html>
<head>
<style>
body {
background: lightblue url(
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190417124305/250.png")
no-repeat center fixed;
}
</style>
</head>
<body></body>
</html>

CSS Background Property


The CSS Background is a shorthand property for the following:
Background
Property Description

Defines the background color of an element using color names,


background-color
HEX, or RGB values.

background-image Adds one or more images as the background of an element.

Specifies how the background image should be repeated—


background-repeat
horizontally, vertically, or not at all.

background- Controls the scrolling behavior of the background image, making


attachment it fixed or scrollable with the page.

background- Determines the initial position of the background image within the
position element.

Adjusts the placement of the background image relative to the


background-origin
padding, border, or content box.
Background
Property Description

Sets how far the background (color or image) should extend


background-clip
within an element (e.g., to the padding or border).

Background color Property


The background-color property in CSS sets the background color of an element. It
can accept a color name (e.g., "red"), HEX value (e.g., "#ff0000"), or RGB
value (e.g., "rgb(255, 0, 0)").
Syntax:
body {
background-color:color name
<html>
<head>
<style>
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
 </html> background-color: Sets the background color of the h1 element to
blue.
 The color can be specified using:
o Color name: (blue, green, etc.)
o HEX code: (#5570f0, #ff5733, etc.)
o RGB value: (rgb(255, 0, 0), rgb(0, 255, 0), etc.)
Background Image Property
The background-image property in CSS is used to set an image as the background of
an element. By default, the image is repeated to cover the entire element unless
specified otherwise.
Syntax:
body {
background-image : link;
}
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190417124305/250.png");
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>

Background-position Property
The background-position property in CSS is used to set the starting position of the
background image within the element. You can use values like top, left, center, or
specify exact pixel/percentage values to position the image.
Syntax:
body {
background-repeat:no repeat;
background-position:left top;
}

<html>

<head>

<style>

body {
background-image:

url(

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"
);

background-repeat: no-repeat;

background-position: center;

</style>

</head>

<body>

<h1>Geeksforgeeks</h1>

</body>

</html>

Borders
Borders in CSS are used to create a visible outline around an element. They can be
customized in terms of
 Width: The thickness of the border.
 Style: The appearance of the border (solid, dashed, dotted, etc.).
 Color: The color of the border.
You can try different types of borders here-
Syntax:
element {
border: 1px solid black;
}
Here, the border is defined as 1 pixel wide, solid in style, and black in color.
<html>
<head>
<style>
.simple-border {
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="simple-border">This div has a simple black
border.</div>
</body>
</html>
This code creates a div element with a simple black border around it, 2px wide. The
content inside the div will have 20px of padding, which provides space between the
border and the text. The text is centered using text-align: center.
CSS Border Properties
CSS provides several properties to control and customize borders:
Property Description

border-style Determines the type of border (e.g., solid, dashed, dotted).

border-width Sets the width of the border (in pixels, points, or other units).

border-color Specifies the border color.

border-radius Creates rounded corners for elements.

Ways to Style Border in CSS


The CSS border property enables the styling of an element's border by setting its
width, style, and color, allowing for customizable visual boundaries in web design.
1. Border Style
 CSS border-top style Property
 border-right-style Property
 border-bottom-style Property
 border-left-style Property
2. Border Width
 border-top-width Property
 border-right-width Property
 border-bottom-width Property
 border-left-width Property
3. Border Color
 border-top-color Property
 border-right-color Property
 border-bottom-color Property
 border-left-color Property
4. Border individual sides
CSS allows you to style each side of a border individually, giving flexibility in design.
5. Border Radius Property
The border-radius property allows you to round the corners of an element, creating
smoother edges.
Common Border Styles
The border-style property specifies the type of border. None of the other border
properties will work without setting the border style.
Border
Style Description

Dotted Creates a series of dots.

Dashed Forms a dashed line.

Solid Produces a continuous line.

Double Renders two parallel lines.

Groove Creates 3D grooved effect.

Ridge Creates 3D ridged effect.

Inset Adds 3D inset border.

Outset Adds 3D outset border.


Border
Style Description

None Removes the border.

Hidden Hides the border.

<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>
Text

CSS Text Formatting plays a crucial role in web design, allowing developers to
control the visual presentation of text elements. Nearly 70% of a webpage's
content is text, making effective formatting essential for readability and user
engagement.
 CSS lets you adjust font properties, text alignment, spacing, and decorations.
 It helps in creating visually appealing text and improving the user experience.
 Various text-related properties can be combined to achieve unique text styles and
layouts.
<html>
<head>
<style>
.initials {
font-size: 40px;
font-weight: bold;
color: #4CAF50;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="initials">M.B.</p>
</body>
</html>
CSS Text Formatting Properties
These are the following text formatting properties.
Property Description

Sets the color of the text using color name, hex value, or RGB
text-color
value.
Property Description

Specifies horizontal alignment of text in a block or table-cell


text-align
element.

text-align-last Sets alignment of last lines occurring in an element.

text-decoration Decorates text content.

text-decoration- Sets color of text decorations like overlines, underlines, and line-
color throughs.

Sets various text decorations like underline, overline, line-


text-decoration-line
through.

text-decoration- Combines text-decoration-line and text-decoration-color


style properties.

text-indent Indents first line of paragraph.

text-justify Justifies text by spreading words into complete lines.

text-overflow Specifies hidden overflow text.

text-transform Controls capitalization of text.

text-shadow Adds shadow to text.

letter-spacing Specifies space between characters of text.

line-height Sets space between lines.

direction Sets text direction.

word-spacing Specifies space between words of line.


Font Properties
To customize fonts effectively in web design, it’s crucial to understand the main
CSS font properties:
 font-family: Specifies the font type.
 font-size: Determines the size of the text.
 font-weight: Adjusts the thickness of the text.
 font-style: Controls the slant of the text (e.g., italic).
 line-height: Sets the space between lines of text.
 letter-spacing: Modifies the space between characters.
 text-transform: Controls the capitalization of text.
<html>
<head>
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
</style>
</head>

<body>
<div class="gfg">GeeksforGeeks</div>
</body>

</html>

CSS Font Properties


CSS font properties allow the developers to manipulate how the font will look and
feel on the webpage. The size, style, color, and much more can be changed by using
properties. For e.g., if the developer wants to make a part of the text more impactful,
he/she can BOLD the part.

Similarly, if anyone wants to change to font style from normal(straight) ones to italics
(tilted), it can also be achieved. There are numerous things possible by making
changes in the font properties. And for that, we need to learn about the different font
properties in CSS.

The different CSS font properties are-


 CSS Font-color
 CSS font-size
 CSS font-style
 CSS font-variant
 CSS font-weight
 CSS font-family
 CSS font-stretch
 CSS line-height

In the end, after discussing all the above properties, We'll discuss the CSS font
shorthand property, which will help us to combine & specify all the above properties
in a single property.

Now, let us discuss all the CSS Font properties one by one.

CSS Font Color


CSS Font Properties
CSS font properties allow the developers to manipulate how the font will look and
feel on the webpage. The size, style, color, and much more can be changed by using
properties. For e.g., if the developer wants to make a part of the text more impactful,
he/she can BOLD the part.

Similarly, if anyone wants to change to font style from normal(straight) ones to italics
(tilted), it can also be achieved. There are numerous things possible by making
changes in the font properties. And for that, we need to learn about the different font
properties in CSS.

The different CSS font properties are-

 CSS Font-color
 CSS font-size
 CSS font-style
 CSS font-variant
 CSS font-weight
 CSS font-family
 CSS font-stretch
 CSS line-height
In the end, after discussing all the above properties, We'll discuss the CSS font
shorthand property, which will help us to combine & specify all the above properties
in a single property.

Now, let us discuss all the CSS Font properties one by one.

CSS Font Color


Any of the above methods for assigning the value can be used to set the color of the
text.

The different methods are-

1. Color name - red, blue, green, etc. So, it will make the elements of that color.
2. Hex code - It is the hexadecimal representation of a color. The code is made as
per the Red, Blue Green values present in color and is preceded by
a hash(#), #RRGGBB.eg-#ff00f2.
3. rgb() - It is one of the most common methods. It takes the intensity of the Red-
Green-Blue color value that ranges from 0-255 or from 0% to 100%.
eg.- rgb(0,255,0).
4. hsl() - It is a method that takes the value of Hue, Saturation, and Lightness of
the color. It can be useful when you can select a color based on your
imagination. eg.- hsl(59, 100%, 50%)

Example: Here, In this example, we are making four heading by using the different
heading elements of HTML (h1,h2,h3,h4), and then we will select those elements and
apply different colors using different methods of applications. We will apply blue to
heading 1, purple to heading 2, green to heading 3, and yellow to heading 4.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}

h2 {
color: #ff00f2; //purple
}

h3 {
color: rgb(0, 255, 0); // green
}

h4 {
color: hsl(59, 100%, 50%); // yellow
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>

</body>
</html>

You might also like