Scribd
Upload
2 views

Scripting Languages_2

The document provides an overview of CSS (Cascading Style Sheets), explaining its purpose in styling web pages created with HTML. It covers fundamental concepts such as CSS syntax, different methods of connecting CSS to HTML (inline, embedded, and external styles), and various selectors for styling elements, including tag, class, and ID selectors. Additionally, it discusses user action pseudo-classes and how to apply text and background colors, along with the use of CSS variables for dynamic styling.

Uploaded by

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

Scripting Languages_2

The document provides an overview of CSS (Cascading Style Sheets), explaining its purpose in styling web pages created with HTML. It covers fundamental concepts such as CSS syntax, different methods of connecting CSS to HTML (inline, embedded, and external styles), and various selectors for styling elements, including tag, class, and ID selectors. Additionally, it discusses user action pseudo-classes and how to apply text and background colors, along with the use of CSS variables for dynamic styling.

Uploaded by

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

Scripting Languages

2. CSS Fundametals (Part I)


2024, Spring Semester

Kutaisi International University


What is CSS?
CSS (Cascading Style Sheet)
CSS is the magic wand that adds style, color, and aesthetics to the
web pages you create with HTML. It defines how your web content
should appear, making it visually appealing and user-friendly. Before
delving deeper into the intricacies of CSS, let's explore its
fundamental concepts.
CSS Syntax
CSS might initially seem like a foreign language, but it follows a simple
syntax. A CSS rule consists of two parts: a selector and a declaration block.
The selector tells us which HTML element(s) the rule applies to, while the
declaration block contains one or more property-value pairs that define the
styling.
selector {
property: value;
}

Let's break it down with an example:


p{
color: purple;
background-color: green;
}

•The p is the selector, indicating that this rule applies to all <p> elements.
•color: purple; specifies that the text color should be purple.
•background-color: green; specifies that the background color should be green.
CSS allows us to select elements and apply styles inside the curly braces {}.
Connecting HTML and CSS
Inline styles, Embedded style sheets, and External style sheets.
Inline Styles
Inline styles introduce CSS directly to an HTML element using the style attribute. These styles are convenient when dynamic changes are needed – a realm where
JavaScript often wields its magic. However, the drawback is their limited scope; they can't be easily extended or reused acro ss different elements.
<tag style="...">Some content</tag>
Embedded Style Sheet
The embedded style sheet resides within an HTML document's <head>, encapsulated within <style> tags. This method allows us to tailor styles specifically to a single page.
However, it lacks the versatility needed to be shared across multiple pages.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
color: blueviolet;
font-size: 36px;
}
</style>
</head>
<body>
<p>We work with an embedded style sheet in the head of
HTML.</p>
</body>
</html>
External Style Sheet
The external style sheet emerges as the grand maestro of CSS management. By employing the <link> tag within the <head> of an HTML document, this technique offers
scalability, maintainability, and reusability – qualities coveted in web projects.
But how does it work? We create a file with the css extension and reference it in our HTML document. Below is a glimpse of both files, index.html and index.css.

<!DOCTYPE html>
<html lang="en">
<head> p{
<!-- We can add multiple links to CSS style sheets if needed. - color: purple;
-> }
<link rel="stylesheet" href="index.css" />
</head>
<body>
<p>We work with an external style sheet connected in the
head.</p>
</body>
</html>

The rel attribute stands for "relationship". rel="stylesheet" denotes how the index.css is related to the index.html.
Selectors for Styling HTML Elements
Tag selector
One way to apply styles is by using the element tag itself. Styles specified using a tag selector will affect all elements with that tag. This is useful for applying consistent
styling to elements across the website.
Syntax: In the HTML, we have a p element:
<p>It was all in my mind</p>
To apply styles in the CSS file, use the tag name ( p) as the selector:
p{
p{ color: green;
property: value; font-size: 12px;
} background-color: antiquewhite;
Let's run the following example and check how it works. }

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<p>It was all in my mind</p>
</body>
</html>
Class selector
A more precise way to style elements is by using class selectors. These selectors target elements with specific class names, allowing us to apply styles selectively.
Syntax: In the HTML, add a class attribute with a meaningful class name:

<p class="text">This song is another hit.</p>


In the CSS, reference the class name with a period (.) to define the styles:
.text {
property: value;
}
Let's run the following example and observe that only elements with the text class will receive these styles, giving you finer control over your styling.

<!DOCTYPE html> .text {


<html lang="en"> color: tomato;
<head> font-size: 18px;
<link rel="stylesheet" href="index.css" /> background-color: wheat;
</head> }
<body>
<p class="text">The weather is nice. We would rather go for a
walk!</p>
<a class="link" href="#">Navigate to main page</a>
<p class="text">Cactuses are my passion.</p>
</body>
</html>
Class composition
We can also combine multiple classes on a single element, making class composition a powerful tool for applying styles - separate class names with spaces
in the class attribute.
Syntax: In the HTML, add multiple class names to an element:
<p class="text font">A robot created chemicals.</p>
In the CSS, define styles for each class separately:
Let's run the following example and see how it works. Elements with both
.text { the text and font classes will receive the specified styles.
property: value; <!DOCTYPE html>
} <html lang="en">
.font { <head>
property: value; <link rel="stylesheet" href="index.css" />
} </head>
<body>
.text {
<p class="text font">We test multiple class
color: skyblue;
names</p>
}
<p class="text">This paragraph has only "text"
class name</p>
.font {
<p class="font">This paragraph has only "font"
font-size: 24px;
class name</p>
}
</body>
</html>
ID selector
While it's possible to use the id selector for styling, it's generally not recommended. IDs should be unique on a page, limiting their reuse.

Syntax: In the HTML, add an id attribute to an element:

<p id="title">Choose from different themes.</p>


In the CSS, reference the ID with a hashtag ( #) to define the styles:
Let's run the following example and observe how it works.
#title { This example applies styles to the unique element with the title ID.
property: value;
} <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<p id="title">Let's see what can id do for us.</p>
</body>
</html>
#title {
letter-spacing: 0.2em;
font-weight: 900;
}
User Action Pseudo-Classes
User Action Pseudo-classes style an interactive element based on its current state. It helps to encourage users and let them know what has just happened . Generally,
we add the state pseudo-classes to the <button> and <a> elements.
The syntax is as follows:

selector:pseudo-class {
property: value;
}
•selector - can be any selector we considered in the previous chapters;
•pseudo-class - needs : before its declaration, and we do not add any space;

Pseudo-class :hover
The :hover pseudo-class is used to respond to user actions when they interact with an item using a pointing device, such as hovering the mouse pointer over the item.
We can test this out in the following example by hovering over the button and a elements to see the effect.
<!DOCTYPE html> button {
<html lang="en"> }
background-color: lightgrey;

<head>
button:hover {
<link rel="stylesheet" href="index.css" /> background-color: royalblue;
</head> }

<body> a{
color: darkgreen;
<button>Hover me</button> }
<a href="#">Any link to</a>
a:hover {
</body> color: greenyellow;
}
</html>
Pseudo-class :focus
The :focus pseudo-class functions in a similar way to the :hover pseudo-class. It responds to element focus, which is typically achieved through keyboard navigation using
the "Tab" key. To ensure consistency in the behavior of interactive elements for all users, it's recommended to use both pseudo-classes together for styling. This way, users
who navigate with their mouse and those who navigate with the keyboard can receive the same experience.
The difference between :hover and :focus
•:hover reacts to mouse cursor activity;
•:focus reacts to the keyboard activity ("Tab" key);
In the following example, we have the same element with different pseudo-classes. Please pay attention to the index.css file. We can notice that we can add the same styles
for the hover and focus effect by separating the selector and pseudo-class with ,.
/* Styles for the first button */
.button-one {
background-color: green;
<!DOCTYPE html> }

<html lang="en"> .button-one:hover {


background-color: yellow;
<head> }
<link rel="stylesheet" href="index.css" /> /* Styles for the second button */
</head> .button-two {
background-color: green;
<body> }
<button class="button-one">Only hover</button> .button-two:focus {
<button class="button-two">Only focus</button> background-color: yellow;
}
<button class="button-three">Both - hover and
/* Styles for the third button */
focus</button> .button-three {
</body> }
background-color: green;

</html>
.button-three:hover,
.button-three:focus {
background-color: yellow;
}
Pseudo-class :active
:active is triggered when an item is activated, for example, clicking on a link. Although any element can be activated, this pseudo -class is generally used for links and buttons.
<!DOCTYPE html>
<html lang="en">
<head>
.nav-link {
<link rel="stylesheet" href="index.css" />
color: darkblue;
</head>
}
<body>
<ul>
.nav-link:hover,
<li>
.nav-link:focus {
<a class="nav-link" href="https://www.google.com"
color: orange;
target="_blank">Google</a>
}
</li>
<li>
.nav-link:active {
<a class="nav-link" href="https://www.tesla.com/"
color: orangered;
target="_blank">Tesla</a>
}
</li>
<li>
<a class="nav-link" href="https://www.apple.com"
target="_blank">Apple</a>
</li>
</ul>
</body>
</html>
Pseudo-class :visited
:visited pseudo-class is applied to links that have been visited. By default, links are displayed in blue and changed to purple when visited.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" /> .social-links .link {
</head> color: green;
<body> }
<ul class="social-links">
<li> .social-links .link:hover,
<a href="https://twitter.com" class="link" .social-links .link:focus {
target="_blank">Twitter</a> color: yellow;
</li> }
<li>
<a href="https://www.instagram.com" class="link" .social-links .link:visited {
target="_blank">Instagram</a> color: blue;
</li> }
<li>
<a href="https://www.facebook.com" class="link"
target="_blank">Facebook</a>
</li>
</ul>
</body>
</html>
Text Colors

Applying text color


Text color can be added to a text element with the help of the CSS property color, giving it a value of any color. Modern browsers support three variants of color values:
RGB, hex, and color names. Let's consider the following example. We will apply the color red to the text.

<!DOCTYPE html>
<html lang="en">
.text-color-name {
<head>
color: red;
<link rel="stylesheet" href="index.css" />
}
</head>
<body>
.text-color-hex {
<ul class="social-links">
color: #ff0000;
<li>
}
<p class="text-color-name">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, numquam.
.text-color-rgb {
</p>
color: rgb(255, 0, 0);
</li>
}
<li>
<p class="text-color-hex">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, debitis.
</p>
</li>
<li>
<p class="text-color-rgb">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, porro!
</p>
</li>
</ul>
</body>
</html>
Background color
We can set the color of an element's background with the help of the background-color property.

<!DOCTYPE html>
<html lang="en">
<head> .text {
<link rel="stylesheet" href="index.css" /> background-color: darkolivegreen;
</head> color: antiquewhite;
<body> }
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet, inventore? Et, nemo dolores
explicabo quae eaque numquam perspiciatis non facere
repudiandae cum repellendus aut atque est
cumque cupiditate sapiente quidem.
</p>
</body>
</html>
Ways to specify color
There are three main ways: color name, hex, rgb.
Color name
We can use reserved color words. The list of reserved colors can be found at htmlcolorcodes.com
Hex format
Hex represents colors as a six-digit code consisting of three pairs of two-digit values. Each pair represents the intensity
of red, green, and blue (in that order).
Hex format values range from 00 (no intensity) to FF (maximum intensity).

RGB Format
RGB represents colors as a series of three numbers that correspond to the intensity of red, green, and blue (in that
order) RGB format values range from 0 (no intensity) to 255 (maximum intensity).
Effective Work with CSS

Variables
CSS variables, also known as CSS custom properties, provide a way to define reusable values throughout our CSS code. By utilizing variables, we can create dynamic and
flexible designs that are easier to maintain and update.
To declare a variable, we use the :root pseudo-class at the top of our CSS file and prefix the variable name with --. For example, let's define a --blue-color variable with the
value #3f42f3 in our :root block:
:root {
--blue-color: #3f42f3;
}
Once we have declared a variable, we can apply it to any CSS property using the var() function. For instance, to assign the color property of an <h1> element the value of
our --blue-color variable, we can write:
h1 {
color: var(--blue-color);
}
Let's combine the knowledge of variable declaration and usage in the following example:
<!DOCTYPE html> :root {
<html lang="en"> --background-color: rgba(23, 23, 23, 0.8); /* variable can be any value */
<head> --text-color: #d1d0d0;
}
<link rel="stylesheet" href="index.css" />
</head> .container {
<body> background-color: var(--background-color);
}
<div class="container">
<h3 class="title">About the company</h3> .title {
</div> color: var(--text-color);
</body> }
</html>
Overriding Properties
Sometimes, we need to override specific properties in CSS to achieve the desired styling. This can be accomplished by
declaring a property with the same name within a nested selector and assigning a new value.
Consider the following example of a traffic light with different color signals:
<!DOCTYPE html>
<html lang="en"> .signal {
<head> font-size: 18px;
<link rel="stylesheet" href="index.css" /> font-weight: 600;
</head> color: blue;
<body> }
<h4>Traffic Light</h4>
<ul> .stop {
<li> color: red;
<p class="signal stop">stop</p> }
</li>
<li> .slow-down {
<p class="signal slow-down">slow-down</p> color: yellow;
</li> }
<li>
<p class="signal proceed">proceed</p> .proceed {
</li> color: green;
</ul> }
</body>
</html>
Text Styling
text-decoration
The text-decoration property can be applied to any text content, including links, headings, paragraphs, and lists. It adds line effects such as underlining. Common values:
text-decoration: none | line-through | underline | overline
Let's run the following example and see the difference between all the property values.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
.link {
</head> text-decoration: none;
<body> }
<ul>
<li> .text-lined-through {
<div class="container"> text-decoration: line-through;
<h3>none</h3> }
<a class="link">Links are underlined by default. We fix it</a>
</div>
.text-underlined {
</li>
<li>
text-decoration: underline;
<div class="container"> }
<h3>line-through</h3>
<p class="text-lined-through"> .text-over-lined {
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, sequi. text-decoration: overline;
</p> }
</div>
</li> /* This part is not the focus of the current chapter. We will consider it further. */
<li>
ul {
<div class="container">
<h3>underline</h3>
display: flex;
<p class="text-underlined"> justify-content: space-around;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, list-style: none;
optio! padding-left: 0;
</p> }
</div>
</li> .container {
<li> width: 160px;
<div class="container">
border: 1px dashed darksalmon;
<h3>overline</h3>
<p class="text-over-lined">
}
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi,
similique! h3 {
</p> text-align: center;
</div> }
</li>
</ul>
</body>
</html>
text-transform
The text-transform property allows us to change the capitalization of text content in HTML elements.
text-transform: capitalize | lowercase | uppercase | none
<!DOCTYPE html>
Let's consider the difference between all the property values:
<html lang="en">
<head> .capitalized-text {
<link rel="stylesheet" href="index.css" /> text-transform: capitalize;
</head> }
<body>
<ul>
<li> .uppercased-text {
<div class="container"> text-transform: uppercase;
<h3>capitalized</h3>
<p class="capitalized-text"> }
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
ullam? .lowercased-text {
</p>
</div>
text-transform: lowercase;
</li> }
<li>
<div class="container">
<h3>uppercase</h3>
.not-modified-text {
<p class="uppercased-text"> text-transform: none;
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, sequi. }
</p>
</div>
</li> /* This part is not the focus of the current chapter. We will consider it further. */
<li> ul {
<div class="container"> display: flex;
<h3>lowercase</h3>
<p class="lowercased-text"> justify-content: space-around;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, list-style: none;
optio! padding-left: 0;
</p>
</div> }
</li>
<li> .container {
<div class="container">
<h3>none</h3> width: 160px;
<p class="not-modified-text"> border: 1px dashed darksalmon;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, }
similique!
</p>
</div> h3 {
</li> text-align: center;
</ul>
}
</body>
</html>
text-align
The text-align property allows you to horizontally align text content.
text-align: start | end | center | justify
<!DOCTYPE html> h3 {
<html lang="en"> text-align: center;
<head> }
<link rel="stylesheet" href="index.css" />
</head>
<body>
.text-start {
<ul> text-align: start;
<li> }
<div class="container">
<h3>start</h3> .text-end {
<p class="text-start">Lorem, ipsum.</p>
</div>
text-align: end;
</li> }
<li>
<div class="container"> .text-center {
<h3>end</h3> text-align: center;
<p class="text-end">Lorem, ipsum.</p>
</div>
}
</li>
<li> .text-justify {
<div class="container"> text-align: justify;
<h3>center</h3> }
<p class="text-center">Lorem, ipsum.</p>
</div>
</li> /* This part is not the focus of the current chapter. We will consider it further. */
<li> ul {
<div class="container"> display: flex;
<h3>justify</h3> justify-content: space-around;
<p class="text-justify">Lorem, ipsum.</p>
<p class="text-justify">
list-style: none;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, padding-left: 0;
voluptates. }
</p>
</div> .container {
</li>
</ul>
width: 160px;
</body> border: 1px dashed darksalmon;
</html> }
Text Formatting

line-height
The line-height property defines the height of a line and is often used to adjust the space between lines of text. By default, line-height depends on the text font and is
determined by the browser.

line-height: multiplier | value in px | value in em | percent


•multiplier - is a value without units (e.g., 1.5). In this case, the line height will be the value that is 1.5 greater than the font-size value.
•value in px - a specific value (e.g., 24px) to which the line height will be equal.
•value in em - a value (e.g., 1.4em) that works similarly to the multiplier. The browser will check the font-size value, multiply that value by 1.4, and this result will be the line height.
•percent - a value (e.g., 120%) that functions like a multiplier. The font-size value will be multiplied by 1.2, determining the line height value.
<!DOCTYPE html>
<html lang="en"> h3 {
<head> text-align: center;
<link rel="stylesheet" href="index.css" /> }
</head>
<body> .text-multiplier {
<ul> line-height: 1.9;
<li> }
<div class="container">
<h3>multiplier</h3> .text-px {
<p class="text-multiplier"> line-height: 28px;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. }
</p>
</div> .text-em {
</li> line-height: 2em;
<li> }
<div class="container">
<h3>value in px</h3> .text-percent {
<p class="text-px"> line-height: 230%;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. }
</p>
</div> /* This part is not the focus of the current chapter. We will consider it further. */
</li> ul {
<li> display: flex;
<div class="container"> justify-content: space-around;
<h3>value in em</h3> list-style: none;
<p class="text-em"> padding-left: 0;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. }
</p>
</div> .container {
</li> width: 150px;
<li> border: 1px dashed lightcoral;
<div class="container"> }
<h3>percent</h3>
<p class="text-percent">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates.
</p>
</div>
</li>
</ul>
</body>
</html>
letter-spacing h3 {
text-align: center;
The letter-spacing property sets the horizontal spacing between text characters. }
letter-spacing: normal | value in px | value in em
.text-normal {
•normal is the default spacing between characters. letter-spacing: normal;
}
•value in px is a specific value that adds extra space between characters.
•value in em works similarly to px, but the spacing is relative to the font-size.
.text-px {
letter-spacing: 6px;
<!DOCTYPE html> }
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" /> .text-em {
</head> letter-spacing: 0.3em;
<body>
<ul>
}
<li>
<div class="container"> /* This part is not the focus of the current chapter. We will consider it further. */
<h3>normal</h3> ul {
<p class="text-normal">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. display: flex;
</p> justify-content: space-around;
</div> list-style: none;
</li>
<li> padding-left: 0;
<div class="container"> }
<h3>value in px</h3>
<p class="text-px">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. .container {
</p> width: 200px;
</div>
border: 1px dashed lightcoral;
</li>
<li> }
<div class="container">
<h3>value in em</h3>
<p class="text-em">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates.
</p>
</div>
</li>
</ul>
</body>
</html>
word-spacing
The word-spacing property defines the distance between words in the text. It increases the space between words. If there are any punctuation marks in the text, and
they are written with words, then they will still be written together, as there is no space between them.
word-spacing: value | inherit | normal
•value is a specific value that sets the space between words. h3 {

•inherit inherits the word spacing from the parent element.


text-align: center;
}
•normal is the default spacing between words. .text-inherit {
<!DOCTYPE html>
<html lang="en">
word-spacing: inherit;
<head> }
<link rel="stylesheet" href="index.css" />
</head> .text-normal {
<body> word-spacing: normal;
<ul>
<li> }
<div class="container">
<h3>Inherit</h3> .text-value {
<p class="text-inherit"> word-spacing: 8px;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates.
</p>
}
</div>
</li> /* This part is not the focus of the current chapter. We will consider it further. */
<li> ul {
<div class="container">
display: flex;
<h3>Normal</h3>
<p class="text-normal"> justify-content: space-around;
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates. list-style: none;
</p> }
</div>
</li>
<li>
.container {
<div class="container"> width: 200px;
<h3>Value</h3> border: 1px dashed lightgreen;
<p class="text-value"> }
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, voluptates.
</p>
</div>
</li>
</ul>
</body>
</html>
text-shadow
The text-shadow property adds a shadow to the text.
text-shadow: "X set" | "Y set" | "blur radius" | "color"
•X set - adjusts the position of the shadow horizontally. A positive value moves the shadow to the right, while a negative value moves it to the left.
•Y set - adjusts the position of the shadow vertically. A positive value moves the shadow downwards, while a negative value moves it upwards.
•blur radius - If the value is increased, the shadow becomes more diffuse and lighter. By default, the value is 0 if not specified.
•color - specifies the color in any format. By default, the value is the same as the text color.
.example-one {
<!DOCTYPE html> text-shadow: 1px 3px 4px rosybrown;
<html lang="en"> }
<head>
.example-two {
<link rel="stylesheet" href="index.css" /> color: white;
</head> text-shadow: 3px 3px 20px #ff99cc, -2px 1px 30px #ff99cc;
<body> }
<ul>
<li> .example-three {
<div class="container"> text-shadow: 1px 1px 5px;
}
<p class="example-one">Lorem, ipsum.</p>
</div> p{
</li> font-size: 42px;
<li> }
<div class="container">
<p class="example-two">Lorem, ipsum.</p> /* This part is not the focus of the current chapter. We will consider it further. */
</div> ul {
display: flex;
</li>
justify-content: space-around;
<li> list-style: none;
<div class="container"> padding-left: 0;
<p class="example-three">Lorem, ipsum.</p> }
</div>
</li> .container {
</ul> width: 220px;
border: 1px dashed darksalmon;
</body>
text-align: center;
</html> }
Add Custom Fonts to the Web Page
Google Fonts Service
font-family (font name), font-size (font size), and font-weight (font boldness).

<!DOCTYPE html> p{
<html lang="en"> font-family: 'DM Sans';
<head> font-size: 23px;
<link rel="stylesheet" href="index.css" /> font-weight: 400;
</head> }
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
rerum deserunt, tenetur deleniti
minus praesentium laudantium accusantium eum similique eos
laboriosam ipsam, sint unde
obcaecati totam. Consequuntur, esse. Quam, asperiores.
</p>
</body>
</html>
Font Properties
Let's consider the most common font-related properties.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can ne any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
font-family
The font-family property defines the font family or families that will be used for displaying text content. It is possible to specify a single font family name or a list of multiple
font family names separated by commas.

font-size
The font-size property sets the font size for displaying text content. It can be a fixed size measured in px or a relative size measured in em or rem units.
font-weight
The font-weight property determines the weight or thickness of the font used to display text content. It can be specified as a numerical value (e.g., 300, 500, 700, ...) or as a
keyword (e.g., lighter, normal, or bold).
font-style
The font-style property specifies the style of the font to be used for text content. This can be normal (the default value), italic, or oblique.
Pseudo-Class first-letter
The first-letter pseudo-class selects and styles the first letter of a paragraph or heading. To use this pseudo-class, we need to put double :: after a selector and add the
keyword first-letter.
selector::first-letter {
/* some styles */
}
Let's run the next example to see how it works.
.description {
<!DOCTYPE html> font-size: 14px;
<html lang="en"> font-weight: 400;
<head> }
<link rel="stylesheet" href="index.css" />
</head> .description::first-letter {
<body> font-size: 22px;
<p class="description"> font-weight: 700;
The sun rose slowly over the mountains, casting a warm font-style: italic;
glow over the sleepy town below. }
</p>
</body>
</html>

You might also like