Scribd
Upload
9 views7 pages

Practical Work 1 CSS

this is an introduction to the use of Cascading Style Sheet.

Uploaded by

Emmanuel
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
9 views7 pages

Practical Work 1 CSS

this is an introduction to the use of Cascading Style Sheet.

Uploaded by

Emmanuel
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/ 7

Practical work №1

Лабораторная работа № 1.

Cascading Style Sheets. Methods for applying to HTML pages. Selectors

Cascading Style Sheets (CSS) – cascading style sheets. Style sheets


are an attempt to separate the design details of a page from its structure
and content. In classic HTML, structure and design were mixed up: next to
a text paragraph, its color, font size, font type, etc. If you want to change
such a simple parameter as the font size on your website, you will have to
rewrite all the pages. CSS allows you to assign a style to all objects, the
description of which can be stored in a separate file only once. Using CSS,
you can change the font size on all pages of your site by editing just one
styling file. The most important thing is that you don’t have to change
ready-made HTML documents lying on the server. The user's browser itself
will access the style file (via the link) and give the page the desired look.

Methods for defining style sheets in an Html document:

a) Linking - The css file is included in the section


<head>

b) STYLE - Attachment method


c) STYLE - Embedding method (inline)

Selectors

A style description consists of a selector (what the style is bound to)


and a property:value pair (similar to "a)Linking")

Element selectors

Allows you to select all tags of the same name on an html page. For
example, to change the color of all <p> paragraphs from black to red:
p{
color:#CC0000;
}

Selector by class

If you need to make the first paragraph in one style and color, the second in
another, the third in a third, etc. In this case, you can use a class selector. The
class description begins with a dot, then the name is written, after which the style
itself is described, for example:
.new {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

This class is applied, for example to a paragraph, as follows:

<p class ="new"> ... paragraph text... </p>

Id selector

Used to highlight an element in a special way, for example:

HTML snippet::

<Н1 id="firstheader"> First heading on page </Н1>

CSS snippet:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Such selectors can be used in the same cases as class selectors.

Group selector

Used in cases where the same design needs to be applied to several


elements at once, for example:

p, h1{
color:#color;
}

This selector will allow you to display paragraphs and 1st level headings in one
color.

Task 1. Using the element selector, write down information about the group
(Name of specialty, field of study, faculty, group number, number of people) in
green. Write the group list in different colors, using selectors by class and by Id.

Font family

The font family of the text is specified using the font-family property.
The font-family property can contain multiple font names. If the browser
doesn't support the first font, it tries to use the next font, and so on.

Note: If a font name contains more than one word, it must be in quotation
marks, like font-family: 'Times New Roman'. More than one font family is
specified in a comma-separated list:

Text alignment

The text-align property is responsible for horizontal text alignment. Takes


values: (center|left|right|justify)

Task 2. Write down and format the text in accordance with its description.

This paragraph is written in Arial Black font and has a size of 20 pixels.

This paragraph is written in Courier New italic font, 24 pixels, and justified. Set the red
line. This is text padding. This is text padding. This is text padding. This is text padding.
This is text padding. This is text padding. This is text padding. This is text padding. This
is text padding. This is text padding.

This paragraph is written in bold Verdana font and is 10 pixels in size.

This paragraph is written in Georgia font, size 2.5em and centered

This paragraph is written in italic Comic Sans MS font and has a size of 1.3em.
Div and span tags, containers for styling
<div> Container tag for sections of an HTML document. Used to group
block elements for formatting with styles.

<span> Container for inline elements. Can be used to format passages of


text, such as highlighting individual words.

The <div> and <span> tags have no default styling and are almost always
used with a class attribute to easily add your own styles.

These are “clean” elements that are great for visually grouping other
elements.

Task 3.

1. Создайте файл text.html.


2. Разметьте текст, используя только <div> (Другие теги не использовать!!!):

Антивещество

вещество, состоящее из античастиц

Реально стабильно не образующееся в природе (никакие наблюдательные данные не


свидетельствуют об обнаружении антивещества в нашей галактике и за ее пределами).

При взаимодействии вещества и антивещества происходит их аннигиляция, при этом образуются


высокоэнергичные фотоны или пары частиц-античастиц.

Ведется довольно много рассуждений на тему того, почему наблюдаемая часть Вселенной состоит
почти исключительно из вещества, и существуют ли другие места, заполненные, наоборот,
практически полностью антивеществом; но на сегодняшний день наблюдаемая асимметрия
вещества и антивещества во вселенной — одна из самых больших нерешенных задач физики (см.
Барионная асимметрия Вселенной). Предполагается, что столь сильная асимметрия возникла в
первые доли секунды после Большого Взрыва.

3. Make the text color gray (#444).

4. Convert all the title letters to uppercase and set the spacing between them to 2px. Add a
printed title effect using two non-blurred shadows: a gray one, the same color as the text, offset
2px to the bottom right, and a white one, offset the same but 1px.

5. Center the title and subtitle on the page.

6. Underline the subtitle and prevent text wrapping in it.

7. Set the paragraph indentation for paragraphs equal to the font size multiplied by 3, and
increase each first letter of the paragraph to 20px.
8. Achieve uniform text output across the entire width in paragraphs.

9. Compare the result with the screenshot.

Task 4.

Solve the problem using border-top: 1px solid #000

Pseudo-classes

Task 5.
Select only links to resources external to my-site.ru (see the attribute selector in the
lecture) using color: <color>

Task 6.
Solve the problem using color: <color> и opacity: <value>

Task 7.
Highlight download links for zip files only (use the attribute selector to
determine the file type in the link), use pseudo elements to add an arrow
(::before, ::after, и т. п.)!.

Task 8.
Solve the problem using color: <color> и pseudo-elements (first-line,
first-letter)

You might also like