Web development. CSS (Cascading Style Sheets)

11.5.3.3 use the CSS stylesheet when creating a site

Web development. CSS (Cascading Style Sheets)

CSS – Cascading Style Sheets.
Style sheet - a collection of rules about how to present an HTML document.

A style sheet is made up of Style Rules. Each Style Rule has three parts, a selector, a property, and a value:

selector { property : value } 
 

Three Ways to Insert CSS

  1. External style sheet
  2. Internal style sheet
  3. Inline style

External style sheet

File.css File.html

body {
   background-color: red;
}
h1 {
    color: navy;
    margin-left: 20px;
}

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 

 

Internal style sheet

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>

</head> 

Inline style

<h1 style="color:blue; margin-left:30px;"> This is a heading</h1>

Classes

Class rules - select all elements of the class you have specified and apply the style to only those elements

File.css File.html
.classname {
    property1 : value1;
    property2 : value2
}
<h1 class="classname">Welcome</h1> 

ID

ID rules - select the item with the single ID that you have specified.

You can only apply an ID once in an HTML document.

File.css File.html
#idname {
    color : blue
}
<p id="idname">Seriously!</p>

 


Questions:


Exercises:

Ex. 1

CSS: Noughts & Crosses


Tasks:

 

Категория: Fundamentals of programming | Добавил: bzfar77 (11.01.2023)
Просмотров: 115 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar