CREATING THE SITE WITH USING CSS
11.5.3.3 use the CSS style sheet when creating a site
There are three ways
of inserting a style sheet:
What is CSS?
Inline Styles:
<h1 style="color:blue;text-align:center">This is a header</h1>
�<p style="color:green">This is a paragraph.</p>
Internal Style Sheet:
<head>�<style>�body {� background-color: linen;�}��h1 {� color: maroon;� margin-left: 40px;�} �</style>�</head>
External Style Sheet:
<head>�<link rel="stylesheet" type="text/css" href=“mystyle.css">�</head>
Advantages of using CSS are:
Students in pairs | What do we need change? | Define CSS property |
| Text color | |
| Display a block | |
| Color background | |
| Align the floating block | |
| Add indents around the elements | |
Why do we need use CSS?
The company “Hise-rise" is successfully engaged in the hotel business and has its own website. Apartments in the hotel are divided into classes: "luxury", "junior suite" and "economy". The main menu of the site contains links to get detailed information about the structure of the company and its employees, including contact details and customer reviews. The main page of the site contains images of the interiors of each class of apartments, as well as news and promotions of the hotel. The company's management decided to implement a system of registration and booking of apartments on the website. The apartments are numbered from 100 to 1010, with 11 rooms on each floor. When booking, you must provide the customer's room number, name and ID of the customer's ID card, as well as the customer's valid email address. Customers can check in at any available room available for booking. The registration data must be entered in the database. In the personal account of the administrator, the information should be displayed in the form of a table in a sorted form, and to search for information about the client, the administrator should use an effective built-in form on the site for quick navigation. When booking, a prepayment is accepted, which is 25% of the price of the selected apartment class. After the booking is completed, the customer is sent an electronic receipt with the booking confirmation to the email address specified during registration.
SCENARIO
How do we apply styles to the tags for change visual design? ��Suggest HTML tags, CSS selectors and properties for change visual design for this form
Descriptors | |
Define the basic css properties. Suggest a css properties for solve problem | |
Define the basic html tags. Suggest a html tags for solve problem | |
Define the HTML tag, selectors and the name of the selectors for add css (styles) | |
Names
What should we add to HTML/CSS to change the visual design of menu items (multi-level lists)?
Descriptors | |
Define the basic css properties. Suggest a css properties for solve problem | |
Define the basic html tags. Suggest a html tags for solve problem | |
Define the HTML tag, selectors and the name of the selectors for add css (styles) | |
https://youtube.com/playlist?list=PLp35kypwu3jJcr9x7tZqMC8368K1G7fmi
https://ictlab.kz/html-css-js-templates
Names
What should we add to HTML/CSS to change the visual design of search engine for manager?
Descriptors | |
Define the basic css properties. Suggest a css properties for solve problem | |
Define the basic html tags. Suggest a html tags for solve problem | |
Define the HTML tag, selectors and the name of the selectors for add css (styles) | |
https://youtube.com/playlist?list=PLp35kypwu3jJcr9x7tZqMC8368K1G7fmi
https://ictlab.kz/html-css-js-templates
Names
What should we add to HTML/CSS to change the visual design of web sites sections?
Descriptors | |
Define the basic css properties. Suggest a css properties for solve problem | |
Define the basic html tags. Suggest a html tags for solve problem | |
Define the HTML tag, selectors and the name of the selectors for add css (styles) | |
https://youtube.com/playlist?list=PLp35kypwu3jJcr9x7tZqMC8368K1G7fmi
https://ictlab.kz/html-css-js-templates
Names
What should we use in HTML/CSS for make more templates for web sites? Suggest examples
Descriptors | |
Define the basic css properties. Suggest a css properties for solve problem | |
Define the basic html tags. Suggest a html tags for solve problem | |
Define the HTML tag, selectors and the name of the selectors for add css (styles) | |
Header (100%) | ||
Menu item 1 | Content (text, forms, multimedia) – 50% | Sidebar (25%) |
Menu item 2 | ||
… | ||
Menu item 5 | ||
Footer | ||
Logotype | Header | |||
Menu item 1 | Menu item 2 | … | … | Menu item 5 |
Content block 1 | Content block 2 | Sidebar | ||
Footer | ||||
https://youtube.com/playlist?list=PLp35kypwu3jJcr9x7tZqMC8368K1G7fmi
https://ictlab.kz/html-css-js-templates
Names