Scribd
Upload
11 views

CSS

CSS material Document

Uploaded by

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

CSS

CSS material Document

Uploaded by

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

CSS- CASCADING STYLESHEET

CSS is the language that defines the presentation of a document


written in a markup language like HTML. With CSS, we can change the
font size and colour, add backgrounds, and control the layout,
transforming a basic webpage into a visually appealing and
user-friendly experience.

CSS Versions
● CSS1: The foundation, released in 1996, introduced basic styling

capabilities for fonts, colours, and margins.

● CSS2: Expanded in 1998, adding positioning elements,

pseudo-classes, and improved layout options.

● CSS 2.1: Further refinements in 2004, including improvements to

inheritance and box model properties.

● CSS3: Introduced from 2001 onwards, CSS3 isn’t a single version

but a collection of modules adding features like animations,

media queries, and web fonts. It’s constantly evolving.

● CSS4 (Ongoing):

What are the types of CSS? OR What are the three ways to add CSS
in HTML?

There are three types of CSS which are given below:


● Inline CSS: This involves styling HTML elements directly within the HTML

tags using the style attribute. While convenient for quick styling, it's
generally not recommended for larger projects due to maintenance and
organisation issues.
Example:
<p style="color: red; font-size: 18px;">This is a paragraph.</p>

Internal or Embedded CSS: Internal CSS is placed within the <style> element in
the <head> section of an HTML document. It applies styles to the elements of that
particular HTML document only.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

● External CSS: External CSS contains a separate CSS file that

contains only style properties which have to be linked in an

HTML document using a link tag.


<link rel="stylesheet" href="styles.css">

1.The rel attribute specifies the relationship between the current

document and the linked document, in this case, it's a stylesheet.

2.The href attribute specifies the path to the external CSS file. In

this case, it's "styles.css", assuming it's located in the same directory
as the HTML file. If it's located in a different directory, you would

need to provide the correct path.

3.The <link> element is placed within the <head> section of the HTML

document

CSS selectors
CSS selectors are patterns used to select and style elements in an HTML
document.
Here are the main types of selectors in CSS:
1. Element Selectors: These selectors target HTML elements based on their
element type. They match all instances of the specified element in the
document.
Example:
p{
color: blue;
}
2. ID Selectors: ID selectors target elements based on their unique id attribute.
IDs should be unique within a document, and each ID selector selects only one
element.
Example-
#header {
background-color: gray;
}
3. Class Selectors: Class selectors target elements based on their class
attribute. Multiple elements can share the same class, and elements can have
multiple classes.
Example: .btn {
background-color: red;
}
4. Universal Selector The universal selector (*) in CSS matches any element
type. It applies style to all elements in the HTML document.
example-
/* Apply a border to all elements */
*{
border: 1px solid black;
}
5. Group Selectors: Group selectors in CSS allow you to apply the same style
rules to multiple selectors simultaneously. This can help reduce redundancy in
your CSS code and make it more concise and readable. You can group
selectors by separating them with commas.
Example-
/* Grouping selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}

/* Grouping selectors with shared styles */


.intro, .summary, .description {
font-size: 16px;
line-height: 1.5;
}
6. Attribute selectors-
Attribute selectors in CSS allow you to target HTML elements based on the
presence or value of their attributes
/* Selects all <input> elements that have a "required" attribute */
input[required] {
border: 1px solid red;
}

7. Pseudo-classes and Pseudo-elements:


Pseudo-classes and pseudo-elements target elements based on their state or
position within the document.
Syntax for pseudo class:
Selector:Pseudo-Class {
Property: Value;
}

Example-
a:hover {
text-decoration: underline;
}
Syntax for pseudo element:
Selector::Pseudo-Element{
Property:Value;
}
Example-
p::first-line {

font-weight: bold;

8. CSS Combinators

There are four types of combinators-


1. General Sibling selector (~):-
The General Sibling Selector (~) in CSS allows you to select elements that are
siblings of a specified element, where both elements share the same parent
and the selected element comes after the reference element.
Syntax:
reference-element ~ sibling-element {
/* Styles */
}
● reference-element is the element that serves as a reference.
● ~ is the general sibling combinator.
● sibling-element is the element that comes after the reference element and
shares the same parent.

Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Sibling Selector Example</title>
<style>
/* Select all <p> elements that are siblings of the <h2> element */
h2 ~ p {
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>This paragraph will be styled.</p>
<div>
<p>This paragraph will NOT be styled.</p>
</div>
<p>This paragraph will be styled.</p>
</body>
</html>

2. Adjacent Sibling selector (+)


The Adjacent Sibling Selector (+) in CSS allows you to select an element that
is immediately preceded by a specified element, where both elements share
the same parent.
Syntax:
previous-element + target-element {
/* Styles */
}
previous-element is the element that immediately precedes the target
element.
● + is the adjacent sibling combinator.
● target-element is the element that comes immediately after the previous
element and shares the same parent.

Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent Sibling Selector Example</title>
<style>
/* Select the <p> element that immediately follows an <h2> element */
h2 + p {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>This paragraph will be styled.</p>
<div>
<p>This paragraph will NOT be styled because it's not immediately
preceded by an <h2> element.</p>
</div>
<h2>Another Heading</h2>
<p>This paragraph will also be styled because it immediately follows an
<h2> element.</p>
</body>
</html>

3. Child selector (>)


The child selector (>) in CSS allows you to select elements that are direct
children of a specified parent element. It only targets elements that are
immediately nested within the specified parent, ignoring any deeper nested
elements
Syntax:
parent-element > child-element {
/* Styles */
}
● parent-element is the parent element.
● > is the child combinator.
● child-element is the direct child element of the parent.

Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Selector Example</title>
<style>
/* Select all <li> elements that are direct children of the <ul> element */
ul > li {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
</body>
</html>

4. Descendant selector (space)


The descendant selector in CSS allows you to select elements that
are descendants of a specified parent element, regardless of how
deeply nested they are within the DOM tree.

Syntax:
ancestor-element descendant-element {
/* Styles */
}

● ancestor-element is the ancestor element.


● descendant-element is the descendant element of the ancestor.

Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Selector Example</title>
<style>
/* Select all <li> elements that are descendants of the <ul> element */
ul li {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
</body>
</html>

COLORS
1. Using colour name
2. Using hexadecimal values
3. Using rgb values
4. Using rgba values
5. Using hsl
6. Using hsla

● In CSS, a colour can be specified using hue, saturation, and lightness


(HSL) in the form:
● hsl(hue, saturation, lightness)
● Hue is a degree on the colour wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.
● Saturation is a percentage value. 0% means a shade of grey, and 100%
is the full colour.
● Lightness is also a percentage. 0% is black, 50% is neither light or dark,
100% is white

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all)
Units used in CSS
1.Absolute Units- px

2.Relative units- %, em, rem

3.Viewport Units- vw(viewport width), vh(viewport height)

Font styling
The CSS font property is a shorthand property that allows you to set multiple
font-related properties at once, including font-style, font-variant, font-weight,
font-size, line-height, and font-family.

Here's the syntax for the font property:

selector {

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

● font-style: Specifies the font style (normal, italic, or oblique).


● font-variant: Specifies the font variant (normal or small-caps).
● font-weight: Specifies the font weight (normal, bold, bolder, lighter, or a
numeric value).
● font-size: Specifies the font size. You can use absolute units (like pixels) or
relative units (like ems or percentages).
● line-height: Specifies the line height. You can use absolute units (like pixels)
or relative units (like ems or percentages).
● font-family: Specifies the font family. You can specify multiple font families
separated by commas, which allows the browser to use the first available
font.

Here's an example of using the font property:

p{

font: italic small-caps bold 20px/1.5 "Times New Roman", serif;


word-spacing: 2px; /* word spacing */
}

Fallback fonts- Fallback fonts, also known as fallback font families, are
alternative fonts specified in case the primary font is not available or cannot be
rendered by the browser.

Here's an example of specifying fallback fonts in CSS:

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}
To use a custom font on your website, you can follow these steps:

1. Choose a Font: Find a font that you want to use. There are many websites
where you can find free and paid fonts, such as Google Fonts, Adobe Fonts,
Font Squirrel, and DaFont.
2. Download the Font Files: Once you've chosen a font, download the font files.
Typically, you'll get a ZIP file containing various font file formats like .ttf
(TrueType), .otf (OpenType), .woff (Web Open Font Format), and .woff2.
Make sure to download all relevant formats for better browser compatibility.
3. Upload Font Files to Your Web Server: Upload the font files to a directory on
your web server where your website files are hosted. Note down the file paths
as you'll need them later.
4. Declare the Font in CSS: Use the @font-face rule in your CSS to declare the
custom font and specify the paths to the font files
@font-face {

font-family: 'YourFontName';

src: url('path/to/font.woff2') format('woff2'),

url('path/to/font.woff') format('woff'),

url('path/to/font.ttf') format('truetype');

/* Add additional font properties like font-weight and font-style if needed */

Font Effects
First add effect=effectname to the Google API, then add a special class
name to the element that is going to use the special effect. The class name
always starts with font-effect- and ends with the effectname.
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>

</body>
To request multiple font effects, just separate the effect names with a pipe
character (|), like this:

<head>

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|o
utline|emboss|shadow-multiple">

<style>

body {

font-family: "Sofia", sans-serif;

font-size: 30px;

</style>

</head>

<body>

<h1 class="font-effect-neon">Neon Effect</h1>

<h1 class="font-effect-outline">Outline Effect</h1>

<h1 class="font-effect-emboss">Emboss Effect</h1>

<h1 class="font-effect-shadow-multiple">Multiple Shadow


Effect</h1>

</body>

Text Formatting
1. Text Colour
2. Text Alignment:- (default-left, right, center,justify)
The text-align-last property specifies how to align the last
line of a text.(default-left, right, center,justify)
Text Direction- The direction and unicode-bidi properties can be
used to change the text direction of an element
p {
direction: rtl;
unicode-bidi: bidi-override;
}
The vertical-align property sets the vertical alignment of an
element.(default- baseline, text-top,text-bottom,sub,super)
3. Text Decoration
The text-decoration-line property is used to add a decoration
line to text.(overline;line-through;underline;overline
underline;)
The text-decoration-color property is used to set the color of
the decoration line
The text-decoration-style property is used to set the style of
the decoration line.(solid,double,dashed,dotted,wavy)
The text-decoration-thickness property is used to set the
thickness of the decoration line.(auto,%,px)

The text-decoration property is a shorthand property for-


text-decoration-line (required)

text-decoration-color (optional)

text-decoration-style (optional)

text-decoration-thickness (optional)

Ex– text-decoration: underline red double 5px;

Note- The text-decoration: none; is used to remove the underline from


links

4. Text Transform
The text-transform property is used to specify uppercase and
lowercase letters in a text.(uppercase,lowercase,capitalize)
5. Text Spacing
The text-indent property is used to specify the indentation of
the first line of a text:
The letter-spacing property is used to specify the space
between the characters in a text.
The line-height property is used to specify the space between
lines:
The word-spacing property is used to specify the space between
the words in a text.
The white-space property specifies how white-space inside an
element is handled.(nowrap)
6. Text Shadow
selector {
text-shadow: [horizontal offset] [vertical offset] [blur radius]
[color];

}
Example- h1 {

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}
Displaying Vertical text-
<style>
.vertical-text {
writing-mode: vertical-rl; /* Vertical text from top to bottom */
text-orientation: upright; /* Keep text upright */

}
</style>
</head>
<body>

<div class="vertical-text">
Vertical Text
</div>

</body>

You might also like