Scribd
Upload
25 views

Cascading Style Sheets

Uploaded by

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

Cascading Style Sheets

Uploaded by

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

Cascading Style Sheets

CSS, which stands for Cascading Style Sheets, is a stylesheet language used for describing
how elements on a web page should be displayed.

It is an essential part of web development, as it allows you to control the layout, design, and
presentation of your web pages.

CSS separates the content (HTML) from its visual representation, making it easier to
maintain and update the design of a website.
1.Inline CSS:
➢ It is used to style a specific HTML element.
➢ Style attribute is used to each HTML tag, without using selectors.

Advantages of Inline CSS:


1. Easily and quickly insert CSS rules to an HTML page.
2. No need to create and upload a separate document as in the external
style.

Disadvantages of Inline CSS:


1. Adding CSS rules to every HTML element is time-consuming and
makes your HTML structure messy.
2. Styling multiple elements can affect your page’s size.
2. Internal (Embedded) CSS:
Internal CSS is placed within the <style> tag
in the HTML document's <head> section. It
applies styles to elements on the current web
page.

*Internal CSS is suitable for styling a single


web page. It keeps the style information
separate from the HTML content.
3.External Style Sheet:

➢ With an external style sheet, you can change the look of an entire website by changing
just one file.

➢ Each page must include a reference to the external style sheet file inside the <link>
element.

➢ The <link> element goes inside the <head> section

➢ An external style sheet can be written in any text editor. The file should not contain any
html tags. The style sheet file must be saved with a .css extension.
<!DOCTYPE html>
<html lang="en">
<head>
<title> external css </title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1> This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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.

▪ Element Selector
▪ Class Selector
▪ Id Selector
▪ Universal Selector
▪ Descendant Selector
▪ Pseudo-classes
▪ Pseudo-elements
id Attribute: The id attribute is a unique identifier that is used to specify the document. It is
used by CSS and JavaScript to perform a certain task for a unique element.

class Attribute: The class attribute is used to specify one or more class names for an HTML
element. The class attribute can be used on any HTML element and multiple classes can
have same name. The class name can be used by CSS and JavaScript to perform certain tasks
for elements with the specified class name.
1. Element Selector:
Definition: The element selector selects HTML elements based on their tag name.

Example:

p{
color: green;
}

Use Case: This selector is used to apply styles to all <p> elements on the page.
2. Class Selector:

Definition: The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period(.) character, followed by
the name of the class.
Example:

.classname
{
color:azure;
}

Use Case: Use class selectors to style elements that share a common class, such
as highlighting certain sections of the page.
3. ID Selector:
Definition: The ID selector selects a single element based on its unique id attribute. To select
an element with a specific id, write a hash (#) character, followed by the id of the element.

Example:

#header {
font-size: 24px;
}

Use Case: ID selectors are useful for styling individual elements with unique characteristics,
like the header or footer.
4.Universal Selector
➢ The universal selector provided by CSS helps in choosing any elements within the
HTML page.
➢ It goes with a single element and uses the asterisk (i.e., "*") symbol used for denoting
the selector as a universal selector.
➢ It is usually written as an asterisk followed by a selector.
➢ The * is used for selecting all elements.
➢ This asterisk also has the capability to select all elements that are inside another element.
Ex:
*{
color: green;
font-size: 20px;
line-height: 25px;
}
5. Descendant Selector:
Definition: The descendant selector selects elements that are descendants of another element.

Example:

parenttag childtag {
font-style: italic;
}

Use Case: Use this selector to style elements that are nested within other elements, like
paragraphs within an article.
6. Pseudo-classes: Pseudo-classes select elements based on their state or position.
Example:

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}
7.
Pseudo-elements:
Definition: Pseudo-elements select and style a specific part of an element.

Example:
tagname::first-line {
font-weight: bold;
}
Use Case: Pseudo-elements are handy for styling specific parts of text, like the first line of
a paragraph.
Important CSS Properties
1. color:
Definition: The color property sets the text color.
Example:
/* color name */
h1 {
color: DarkCyan;
}
/* hex code */
h2 {
color: #ee3e80;
}
/* rgb value */
p{
color: rgb(100,100,90);
}
background-color :-
Example:-
Body
{ background-color: rgb(200,200,200);
}
h1
{
background-color: DarkCyan;
}
h2 {
background-color: #ee3e80;
}
p
{
background-color: white;
}
Opacity :-

p.one {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.two {
background-color: rgb(0,0,0);
background-color: rgbo(0,0,0,0.5);}

2. font-size:
Definition: The font-size property sets the size of the font.
Example:
h1 {
font-size: 24px;
}
Use Case: Adjust text size for headings and content to improve readability.
3. margin:
Definition: The margin property sets the space outside an element.
Example:

div {
margin: 10px;
} If the margin property has four values:

p{
margin-top: 100px; margin: 25px 50px 75px 100px;
margin-bottom: 100px;
margin-right: 150px; top margin is 25px
margin-left: 80px; right margin is 50px
} bottom margin is 75px
Try it Yourself left margin is 100px
4. padding:
Definition: The padding property sets the space
inside an element.

Example:
ul {
padding: 20px;
}

If the padding property has four values:


div {
padding-top: 50px; padding: 25px 50px 75px 100px;
padding-right: 30px; top padding is 25px
padding-bottom: 50px; right padding is 50px
padding-left: 80px; bottom padding is 75px
} left padding is 100px
6.Border:
Definition: The border property sets the border of an element.

Example:
Img{
border-style: solid/dotted/dashed;
border-width: 5px;
border-color: green;
}

p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;}
•border-style: dotted solid double dashed;

• top border is dotted


• right border is solid
• bottom border is double
• left border is dashed

CSS Border - Shorthand Property


img {
border: 2px solid black;
border-radius: 5px; (for rounded corners)
}
Example:
li{
display: inline-block;
}
The Two Major Types of Units in CSS:

• Absolute
• Relative

Absolute Units:

These units are the ones whose values are fixed irrespective of any other factors like parent element or
viewing window i.e the screen size won't affect the size of the element.

CSS px:
px stands for Pixel. Pixels can be defined as 1/96th part of an inch.

Syntax:

font-size: Kpx;

* Pixels are widely used in websites to make elements of fixed sizes (ex: in a logo)
CSS pt:
pt stands for point. 1 CSS pt is defined as 1/72th of an inch.

Syntax:

font-size: Kpt;

Use case: This unit is mainly used in printers for printing the output on paper and not so widely used for
on-screen outputs.

Relative Units:
In relative units, we talk in terms of the same property, like, if we are talking about width of an element
in relative units then it is relative to the WIDTH of the parent element/viewport. We shall be seeing this
in the example section in a while.

CSS %:
This is the percentage unit. The measurement of the element is relative to the dimensions of the parent.
HTML file
<body> CSS file
<p>Mine is the default font size (16px).</p> .relativeUnits {
<div class="relativeUnits"><p>Mine is 200% font-size:200%;
of the default font size</p></div> }
</body>

CSS em:
1em refers to the default size of the property. So precisely, 1em is equivalent to
100%. (i.e 1em in case of plain text would be 16px if the root value is unaltered)
CSS rem:
This unit counters the adding-up effect of units like % and em. rem rather stands for Root
em.
This means the browser will ignore all the adjustments made to the parent elements and
will scale the HTML element, to which the property is applied, based on the root/default
value for that particular element
body{
<body>
font-size: 40px;
<p>hello</p>
}
<div class="relativeUnits"><p>I have a font
.relativeUnits {
size of 2rem</p></div>
font-size:2rem;
</body>
}
In this CSS code, the font-size of the div is set to 2rem (i.e twice the base font size
ignoring all changes) and thus is (2 x 16px=) 32px. It ignores the change in font size of
40px made to its parent (here, the body).
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;}
h1 {
font-size: 200%;}
h2 {
font-size: 1.3em;}
1. Create a simple div with an id “box”, add some text inside the div and set the
background color to blue.
2. Create 4 headings with h1,h2,h3 and h4. give 2 of them the class name heading and
remaining two as head . Set the color for heading as red and for head as blue.
3. Create a button and set its background color to green using css style sheet, blue using
style tag and pink using inline style
4. Create a heading to the center of the page with all its text capitalized by default.
5. Create one div inside another div, set the id and text “outer” for the first one and “inner”
for the second one, set the outer div text size to 25px and inner div text size to 10px.
6. Create a web page layout with header ,footer and a content area containing 3 divs. Set
the height and width of div to 100px, add borders to all of them, add background color
to each div with opacity of 0.5, give the content area an appropriate height.
CSS Box Model

➢ CSS treats an HTML document as a hierarchical tree of elements, where


each element can have zero or more child elements arranged in an ordered
way.

➢ The topmost element of this tree is called as the root element or the parent
element.

➢ These elements display their content at a specific position, which is defined


by using CSS properties.

➢ CSS converts the data of HTML elements in the form rectangular boxes, by
using a layout model called the box model, to set the design and layout of
HTML documents.
➢This means that the box model determines how HTML elements are
displayed as boxes.
➢ The box model allows placing a border around the elements and also
provides space between elements.

Fig: Displaying the Areas of Box Model


1. Content area: Displays the content of a document, such as text and images.
This is bounded by a rectangle, which is called as the content edge
Note: The content area always appears inside the padding area.

2. Padding area: Specifies the area around the content area. This is bounded
by the padding edge. Outside the padding is the border area and the outside
boundary of that area is the border edge. Finally, outside the border is the
margin area whose outer edge is called the margin edge.

3. Border area: Specifies the area around the padding area. This bounded by
the border edge.

4. Margin area: Specifies the area around the border area. This is bounded by
the margin edge.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
This is the div.
</div>
</body>
</html>
border-width
border-style :-
border-color
Shorthand
border
padding
Margin:-
Border:2px solid green
CSS Text Effect Properties

Property Description

text-justify Specifies how justified text should be aligned and spaced

text-overflow Specifies how overflowed content that is not displayed should be signaled to the
user

word-break Specifies line breaking rules for non-CJK scripts

word-wrap Allows long words to be able to be broken and wrap onto the next line

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

You might also like