Scribd
Upload
3 views

HTML CSS

The document provides an overview of HTML and CSS basics, including elements, styling properties, and layout techniques. It covers topics such as the CSS box model, display properties, positioning, and responsive design using media queries. Additionally, it discusses the use of classes and IDs, as well as various layout methods like Flexbox and CSS Grid.

Uploaded by

thanhlta1234
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML CSS

The document provides an overview of HTML and CSS basics, including elements, styling properties, and layout techniques. It covers topics such as the CSS box model, display properties, positioning, and responsive design using media queries. Additionally, it discusses the use of classes and IDs, as well as various layout methods like Flexbox and CSS Grid.

Uploaded by

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

HTML

<p></p>

<a href=” ” target=”_blank”> </a>

Css basic

Space (around ann element) = margin


Hover : pseudo-class

Active: change when active

Opacity: 0.7 (<1)

Transition: opacity 1s

Box-shadow: 4 values ( position, posiontion, position, color)\


Rgb()

Rgba(0, 0, 0, 0,15)

If not hover we have the basic styling, else adding more the box-
shadow(in the sample of the video)

Hex to rgb caculato

MARGIN is the sapce around the element

Height and width is not the good idea

PADDING is the space inside the box

CSS Box Model


-how much space an element take up

-how far it is away from other elemrnts

Padding is the better way replace for height and width

Vertical-align: top

<p> by default , come with margin at the top and bottom

Class name selector > element selector ( has more priority)

Hmtl entity (search on Internet use for copying the icon)

Text-decoration: underline/ line-through/ overline


<strong></strong> create the bold element in the tag

<u></u> underline element

<span></span> most generic element

HTML Structure

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body> </body>

New file to just contain css


Button.css

Move css code to that file

How to load css file to html file

Link element

Does not require closing tag

Call void element

</html>

Add to the <head>

<link rel=”stylesheet” href=”styles/button.css” >

Google Font

Roboto Pick the style that you want


COPY the code exactly\

<html> web page

Text.css is inside the styles folder so we have to add “styles/…”


<input> type has many type of inputing email, date time.
Password and many more

With the class use .{}

With the id use #

CSS Display Porperties

Three types of elements

1. Block element = take up the entire line in their container


2. Inline block = only takes up as much space as needed
3. Inline element = appear within a line of text
(<stromg></strong>
Switching block to inline block element
<div></div>
Element “div” = division
= just a box = container

Vertical-align: top

The space outside of the element called “margin’

Lesson 10: Nested Layouts Technique

Two typpe of layout

1. Vertical Layout
2. Horizontal Layout

Google Drawing

Draw some rectangle to know what type of layout we need


CSS Grid

1 fr = free space

Flex Box is similar to CSS grid but more flexible

The layout is more rigid (for Grid)


Grid = rigid layout

FlexBox = flexible layout

Justify-content: start, end, center, space-between

Align-item: center atart end

Creating 3 section

Max-width: width can be less than 300px

Justify-content:

Align-item
Box-shadow: inset 1px(horizontal to the right) 2px(moved 2px to the
bottom) 5px(blur) rgba() color of blur

Icon search

{height 25px; margin-top 4px; }


Search-button{ height: 40px, width: 66px, background-color: rgb(240,
240, 240), border-width: 1px, border-style: solid, border-color: rgb()

Margin-leftL: -1px;

Margin-right: 8px;

Positive margin pushed the element

Negative element subtract space and pull the element to side

Right side{

Backgroud-color: lightblue;

Width: 180px;

Display: flex;

Align-items: center

Justify-content: space-beteween

Flex-shrink: 0 don’t shrink(mức độ co lại của 1 phần tử flex khi tổng


kích thước của tất cả các phần tử lớn hơn kích thước của vùng chứa.
CSS Position add another dimension to our page

Keep the header at the top of the page

Position Porperty

Position: static (default position)

Position: Fixed

Top: 0 ;

Left, bottom and right

Position: absolute;

Background-color: red;

Color: white;

FIXED: placed in the brower window

Absolute: placed on the page


z-index: determines which elements appear in front and which elements
appear behind. So the default Z index is zero.

Put “absolute” inside “fixed” To create a closing button

“relative” position nothing changed display element as normal, excerpt


put ‘absolute’

10px right from the element relative

And similar with the top

New CSS technique


Target all img inside sidebar-link

Justify-content for horizontal (ngang)

Align-item for vertical (doc)

Flex-direction row horizontal, flex-direction column vertical

Pointer-envents: none

Responsive Design

Look good on every screen size


Media Query

@media(max-width: 600px){

Have a bun of css here

Padding: top bottom left right vertical horizontal

Margin top right bottom and left

Border = width style color :


Inheritance(Su ke thua)

Sematic Element (header, nav = same as div have the meaning to the
screen readers)

Sidebar

C1: Float:left + width 25% 75%

C2: Container : Display: Flex + Flex-Basis 25% 75% +

C3: Display: grid +grid-template-column auto auto

You might also like