Scribd
Upload
1 views43 pages

HTML && CSS

Uploaded by

mohamedahmedfathi19
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
1 views43 pages

HTML && CSS

Uploaded by

mohamedahmedfathi19
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

HTML

What meaning of HTML


o It’s hyper text markup language
o It’s skiloten language not programming language

<hr> or <hr/>: called horizontal row and this formula called single tag

<br> : line break, it’s add line between words or paragraphs

Essential components of HTML


To detrmine the version of HTML
Browser work according to Rendering mode
Mode Name What Happens

Standards Standard The browser applies modern HTML/CSS


Mode Mode standards as expected.

Quirks Mode Quirks Mode The browser behaves like it did in 1999 to
support old websites with bad code.

Almost Almost The browser mostly follows standards, but


Standards Standards allows small exceptions (like image spacing in
Mode Mode tables).

To make browser work at standard mode write in first


<!DOCTYPE html>

Head tags
Write informations about the web to give information to search engines to rank
your web like description, title

Body tags
Any thing appear to user like photo, vedio, text

Note

Any change in elements at browser : it’s temporary, just refrash the change will
disappear
Single tags
Major of people remarks single tag by put / like <meta/> but write like this is right
<meta>

Attribute
Any thing wrote behind tag called Attribute like

<meta charset = " " > : here charset is Attribute

At html tag
We determine lamguage of website by add

<html lang="en"> : english

<html lang="ar"> : ‫عربي‬

we determine language of web cuz inform browser engines the language of your
website

At meta tag
<meta charset="UTF-8">
tells the browser which character encoding to use when displaying the webpage.

UTF-8
is a universal encoding that supports all languages, including Arabic and emojis,
and helps show text correctly.

<meta name="description" content=" "> :


write description to give him to browser engines search

<meta name="keywords" content=" "> :


keywords that u expected user write it at browser engines search

<meta name="author" content="mohamed ahmed">


Write the name of programmer and not used at all

<meta http-equiv="refresh" content="2">


Make refresh to website defualt after 2 seconds

Interview question
Want to move user from website to another after interval of time by using HTML
only
 <meta http-equiv="refresh" content="5
url=[Link]

This will make user move to youtube after 5 seconds

Css files
To connect css with html use

 <link rel="stylesheet" href="">


o rel reffer to relationship : stylesheet inform that file is css, href : put
link of css file
 <style></style>
U write css at style tag

Note

Css : Cascading Style Sheets

javascript
To connect js with html use

 <script></script>
o U wirte js at script tag
 <script src=""></script>
o U put the file location of js if js isolated at file
Elements divided into
Block
 Elements take 100% of view of his up
 U can know block elements by background color “color take all up view” or
inspects at browser from display

Example of block elements:

o <p> </p>
o <li> </li>
o <div>

Inline
 Elements that take view according to the content that found at itself
 U can know inline elements by background color “color take the view of
content only” or inspects at browser from display

Example of inline elements:

o Elements of formating text


o <span></span>
o <img>
o <a >
Position of sentence
In past

o We use align attribute at paragraph tags but now it isn’t supported by HTML5

Now

o We control position at css file by test-align option

Interview question
Why we don’t use attribute of align ?

When use attribute of align, by defualt he makes option of text-align at CSS file.
So from my mind “‫ ”بالعقل كدا‬I went to make it at css file direct instead of this

Note
Any thing write at HTML5 and colored with red it means that this thing isn’t
supported now

Code and pre tags


<code> write code here </code>
To appear code to user at browser

<pre> spaces and break line will appear by defualt </pre>


To write anything with spaces and break line as defualt without browser deleted it

All elements of formating text


o Is inline elements
o All can made by CSS

Bold text

Strong tag : used for making words bold and refer that sentence is important

b tag : used for making words bold only

italic text

i tags : used for italic text ‫لمجرد الشكل‬

em tags : emphasize text “aslo italic” used when wrote “ ‫حكمه او الجمل المقتسبه او‬
‫”عباره بس من لغه مختلفه‬
underline text

u tag : used for misspelled word or ‫مجرد شكل‬

ins tag : used for inserted text “‫”بقول للعميل ان الكالم دا لسه متحط او جديد في الويب سايت‬

midline text

s tag : ‫مجرد شكل بس‬

del tag : refer that word or sentence is deleted

Move words

Sub tag : sub script move word down, popular use is chemical reactions H 2O

Sup tag : super script move word up, popular use is power of variable x 2

other tags
images
to insert image
must image be in folder behind html file to insert image with easy way

three ways to insert


online
 just put the address of image

offline
 image at folder away from html file
o just put the address of file then / or \ then name of image
extenstion [Link] for instance
 image at folder behind html file
o write name of folder / name of image extenstion

description of image
just write descriptive text for image to appear to user when cuz error like network
or image deleted

attributes of image
these attributes doesn’t used at HTML5, we edit all these things by CSS

height tag : to specifiy height of image

width tag : to specifiy width of image

border tag : to specifiy depth border of image

global attribute “title”


words wrote at it, appear when user come at specific place

used for giving user description about image, sentence, paragraph, anything
audio
if I have
one extension
 <audio src="" controls></audio>
o Put source of file only and must write controls, to appear audio at page

more than one extension “best practise”


 <audio controls>
<source src="" type="">
<source src="" type="">
<source src="" type="">
message
</audio>
o Best practice to put same audio with different extesions cuz if engine
browser doesn’t support one of them automatically move to another and it
will reach message if he doesn’t support any source of them
o Must write controls to appear audio
o Write type of audio cuz engine of browser identify or know the type of source
from type

type attribute
Tells the browser the media file’s format so it can decide whether it can play it or
skip it.

‫النوع‬ MIME type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav

AAC audio/aac

M4A audio/mp4

media types
attributes at audio
 <audio src=" " controls loop muted autoplay> </audio>
o Loop : make sound repeated automatically but must user start audio by
himself
o Muted : make sound mute until user unmute it
o Autoplay : works under specific conditions, it makes sound work
automatically when user enter website
Video
Attributes of video
It’s look like audio at insterting

Autoplay
o we can make it here but must muted setted

Width && height


o can give number of pixel or percentage to appear at website

Preload
 Auto
o it’s special for user cuz preperation downloading video for user to
watch easy
o “‫”المستخدم ميستناش الفيد يحمل‬
o but it makes website is too heavy
 none
o video doesn’t download any thing until user play it.
o this make lightly website
 metadata
o it downloads the informations of video not the media of it

Note

we can use this at audio

Poster
o it’s image appear before playing the video “background for it”

‫مش عارف احط ساب تايتل للفيديووووووووووووووووووووووو‬


HTML ‫ للبيزك بتاعت ال‬88 ‫في تاج التراج في سطر كود‬
Table
tags
Thead,Tbody, Tfoot
o this tags even u write them anywhere inside table tag, their positions are
const, used to make table arranged

Tr tag
o express row

Td tag
o express column

Th tag
o express important column

Caption tag
o express the description or title of table

attribute
Colspan attribute
o merge number of columns u write it

Suadi attribute
o merge number of rows u write it
List
Type of list
Unorder list
o Using it moreeeee than other lists
o <li> : called List item

Order list
Attributes
Type

o latin, number, alphabiticly

reversed

o to reverse arranging and arrange items from high to low

start

o choose number u want start arrange from it

Description list
Low using this list

dt tag
o Description term, used for writing item u want to put definition or description
to him

dd tag
o description details, used for writing definition to previous element or item
semantic elements container
container
website u build it, divided into parts so each part in site called container and
express container by div tag

HTML5 containers
semantic elements tags
Feature is added in html5 to make engines “‫ ”متتلغبطش‬and easy to understand your
website

semantic elements
it’s same div exactly but descriptive for each part

types of tags of semantic elements


o header
o nav
o main
o section
o article
o aside : side bar
o footer

u can use div tag instead of tags of semantic elements but the best practice to
engines is tags of semantic elements
link
anchor tag
o used for directed user to internal or external website, image, mail, phone
number,
o done js code “not used now”

hyper text reference


o u put URL of wanted to be directed to at it

target
o default is same “_self” : open link at the same tab
o “_blank” : open link at new tab

URL
Divide into

Absolute
o Websites like Facebook, YouTube

Relative
o Website found at your folder, image
input from user
Label

It’s description for input

For attribute

name that u put it at label refer to input u connect it to him, just double click on
name of label after write for

type of input
submit

it’s send information

reset

it’s clear all information

attribute
value
o it’s change the name of button

or

o hold the info at ‫ المكان الي بتدخل فيه المعلومات‬and user can edit on it

placeholder
o hold the info u write it at ‫المكان الي بتدخل فيه المعلومات‬
o it will hide when user start writing
o user can’t edit on it

required
o when u write it at specific input, so browser can’t send info without the input
u write this attribute at it

name

o is the name of the field. The backend uses it to identify the data that is being
sent to it.
o Must name found to transfer data, without it data can’t be sent
feildset tag
o make bord or background for your data

legend tag
o this title for field tag

form tag
attribute
action
when u click to submit, the browser will move u to URL u put it at action

query string
o it’s data that appear after ? that found in URL, appear by method = “get”
that found at form attributes or by default
o this is data that transfer to back end
o it can’t appear when put post at method attribute

when u used post at method

o data sent to back-end at body request not at URL

method : post

o used at sensitive information

method : get

o used at global information


css3
Css
Cascade style sheet

It’s style the tags of html

Typing Css
Internal Css
By using style tag at head of html

External Css
By link tag to link to an external file

Inline Css
By using style attribute inside html elements

Link
Rel : explain the relationship between the file and html

href : URL of Css file

Attributes of Css
Color

Colored the text

Font-size

Control at the size of text

Font-weight

Control at thickness of text


Selector
Element u want to edit on it, and Css apply on any text inside this selector
“element”

Attributes at {}

Must isolated by semicolon

We can choose selector by


Name of element “name of tag”

o Just write name of element, style will apply to all elements founded

Class

o Used for group of elements


o Write dote then the name that u give the class to
o If u want to give style to all same class just write dot name
o If u want specific element to give him style write his name after dot “if we
give class name to more than one element”

Id

o Used to ‫ تمييز‬element at your page


o ‫يستخدم غالبا مع عنصر واحد يعني مينفعش يبقي فيه عنصرين ليهم نفس االي دي‬
o Work as class, just use # instead of dot

*{}

o Used for applying style on all elements found at html file

Attribute of
Class

We use it to specialized specific element(s) like ‫الرقم القومي‬


Padding && margin default

‫االتنين بيتعاملو نفس المعامله بظبط‬


If we have 4 number

Padding : Top right bottom left ;

If we have 2 numbers

Margin :Top&bottom , right&left ;

Margin auto
‫بيوسطن المساحه الخارجيه ملهوش دعوه بالكونتنت المكتوب‬
Work at horizontal only, doesn’t work with vertical
%
Attribute of
All of this apply on block elements only not inline and talk about
percentage here

Width

o Default value is : auto , “full screen width of up { width of body } ”


o If u decrease width of body, by default width will decrease in default values

height

o default value if no content found is zero


o percentage u write at height is depend on up
o up by default make height value according to content founded
o if u write percentage at height so percentage depends on value of width of
up

max-width & min width

o interact with the width of browser not content

max-height

o interact with the height of content not browser

border-radius

1 number

o All radii are equal

2 numbers

o Top left & bottom right , top right & bottom left

4 numbers

o Top left, top right, bottom right, bottom left

If I want make circle from border

o Check height = width


o Radius = half width or put it as 50%
Text-align

o Work with block elements cuz it have ‫عرض‬


o Default value is left
o Text become at center or right relative to position of up
o It directed ‫ أبناء‬of up element “selector”

Inline element

‫ملهاش عرض زي عناصر البلوك‬


o So text-align doesn’t work at this inline elements
Background
To insert image as background inside selector use

o background-image: url(download\ \(1\).jfif);

when u insert image, by default it’s repeat if u want stop repeat use

o background-repeat: no-repeat;
o and default value is : repeat

when u scroll page and want background fixed use

o background-attachment: fixed;
o default value is : scroll

to control background position at avatar of up


Selector
Sibling Selector
Elements that found at the same scope

Adjacent Sibling Selector


Writing by +

‫ بيتسمي‬scope ‫ علطول الي موجودين في نفس ال‬selected element ‫ الي بعد ال‬element ‫ال‬
Adjacent Sibling Selector

Execution done on
the after sibling selector element only

general Sibling Selector


Writing by ~

All sibling elements found after selected element when all at the same scope only

Execution done on
the after sibling selector element only

u can access to selector by attribute of it


[attribute]
o Means execute code on any element have this attribute

[attribute = “value”]
o Means execute code on any element have this attribute with this value

Element [attribute]
o Means execute code on specific element have this attribute

element [attribute= “value”]


o Means execute code on specific element have this attribute with this value

[attribute ^= “value”]
o Means execute code on any element have this attribute when start with
specific value
[attribute $= “value”]
o Means execute code on any element have this attribute when end with
specific value

[attribute *= “value”]
o Means execute code on any element have this attribute with specific value

‫مش هتفرق موجوده في األول وال النهايه المهم تبقي موجوده‬value of attribute

[attribute ~= “value”]
o Means execute code on any element have this attribute with specific value

space ‫ وقبلها‬space ‫ دي تبقي كلمه يعني بعدها‬value ‫بس المهم ال‬

If we put i after the value word this ‫ بتلغي‬case sensitive like this

[attribute *= “value” i ]

‫ الكود هيشتغل عادي‬lower case ‫ وانت روحت كتبتها‬upper case ‫ مكتوبه‬value ‫يعني لو كانت ال‬
][ ‫ في اخر ال‬i ‫بشرط تكون حاطط ال‬
Translate of elements
Transform
Translate()
o It moves the element with the direction x and y
o If u give one number, it will move the element at x-axis only
o If number is negative, it moves opposite direction
o Default value is (0px,0px)

Scale value()
o Control at volume of element and content of element together “zoom in-
out”
o Default value is 1
o If u want magnify element put number > 1
o If u want small element put number < 1
o If he take number with negative value, it will flip ”‫ ”يشقلب‬the element
o Scalex() : control at width
o Scaley() : control at height

Rotate value()
o Make element and it’s content rotate together
o U give it degree (60deg)
o Rotatex() : it’s rotate about x-aixs
o Rotatey() : it’s rotate about y-aixs

skew value()
o it makes deviation for element and it’s content from x-axis and y-axis
o default value is (0,0)
o If u give one number, it will deviate the element at x-axis only and consider
deviation from
y-axis is zero
o Skewx() : deviate form x-axis
o Skewy() : deviate form y-axis

Matrix value(scalex, skewy, skewx, scaley, translatex,


translatey )
o It take 6 values
Translate scale rotate : now we
can use this as attributes not value
for attributes
Transition
Values of transition
Transition : properties default all duration time timing function “shape of
transition” delaying time
Inline elements

Apply margin at left, right sides only

Block elements
Apply margin at all directions

Display : Inline-block
Make element takes advantages of inline and block together . try it

to make element hidden but it’s place found


o visibility: hidden;

to make element hidden and it’s place deleted


o display : none;

to control at transparency of element


o opacity : value ;
o value range between 0 to 1
Used at projects
Display
Grid
Flex

Connection between elements


o When we click on a link in the page (like "Home" or "Projects"), we want it to
take us to a specific section.
o To do that, we use an id, not a class, because the browser uses id to find that
exact part of the page.
o We write at link the # then name of id

Type of pages
Single page SPA
o A Single Page Application is a website that loads only one HTML page.
o When you click on buttons or links, the content changes without reloading
the whole page.
o The changes happen using JavaScript.

Key Points:

 Only one main HTML page

 Fast page transitions (no refresh)

 Uses JavaScript to update content

Multi pages MPA


o A Multi Page Application is a website with many HTML pages.
o When you click on links or buttons, the browser loads a new page from the
server.
o Each page is a separate HTML file.

Key Points:

 Many HTML files

 Full page reload every time you go to a new page

 Easier for SEO and simple websites


Structure of page
<body>

<!-- ✅ ‫ رأس الصفحة‬-->


<header>
<h1>My Website</h1>
<!-- ✅ ‫ شريط التنقل‬-->
<nav></nav>
</header>

<!-- ✅ ‫ المحتوى الرئيسي‬-->


<main>
<!-- ✅ ‫ قسم عام‬-->
<section id="home">
<h2>Welcome</h2>
<p>This is the homepage of our website.</p>
</section>

<!-- ✅ ‫ مقالة مستقلة‬-->


<article>
<h2>Latest News</h2>
<p>We just launched our new feature!</p>
</article>

<!-- ✅ )‫ شريط جانبي (اختياري‬-->


<aside>
<h3>Useful Links</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
</ul>
</aside>
</main>

<!-- ✅ ‫ التذييل‬-->
<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>

</body>
‫‪Flex-Boxparents‬‬
‫‪Display : flex‬‬
‫الزم اكتبها في ال ‪ up‬عشان ال ‪ children or items‬تستجيب‬

‫‪Value of inline-flex‬‬
‫لو كتبتها في ال ‪ up‬هيتشكل علي حسب حجم ال ‪ items‬الي عندو‬

‫لو مكتبتهاش ف ال ‪ up‬هياخد ال ‪ default value‬مهما كان حجم او عدد ال ‪items‬‬

‫‪Flex-direction‬‬
‫لما بكتبها في ال ‪ up‬ف بيحددلي ال ‪ items‬شكلها يبقي عامل ازاي هل هي تترتب ‪as row or‬‬
‫‪column‬‬

‫بعد ما بحدد ‪ row or column‬ف ال ‪ items‬بتترتب علي حسب اتجاه الصفحة يعني لو كان عندي اتجاه‬
‫الصفحة ‪ rtl‬ف ال ‪ items‬هتترتب من اليمين للشمال ولو ‪ ltr‬ف ال‪ items‬هتترتب من الشمال لليمين‬
‫"دا الطبيعي لو لغة الصفحة انجليزي"‬

‫‪Value of flex-direction‬‬
‫‪Row-reverse && column-reverse‬‬
‫بتعكس اتجاه ال ‪ items‬علي حسب اتجاه الصفحة‬

‫‪Flex-wrap‬‬
‫‪Default value is nowrap‬‬

‫‪Value of wrap‬‬
‫لما بكتبها في ال ‪ up‬بتخلي ال ‪ items‬الي عندي لو كتيره او عرضها اكبر من ال ‪ up‬بتنزل لصف جديد او‬
‫عمود جديد‬
‫‪Value of wrap-reverse‬‬
‫بتعمل ‪ wrap‬لل ‪ items‬بس في عكس االتجاه يعني بدل ما ينزلو لتحت بيطلعو فوق‬

‫‪Flex-flow‬‬
‫‪Is shorthand for flex wrap and flex direction‬‬

‫‪Write the two value of flex wrap and flex direction at it‬‬
Justify-content
Default value is flex-start

‫ ممكن تحطهم في األول او االخر او‬direction of up ‫ بتاعي في مكان نسبي الي‬items ‫بتحط ال‬
‫النص‬
justify- ‫ فا كدا ال‬flex direction is row and direction of up is ltf ‫يعني مثال لو عندي ال‬
‫ وال اخرها وال في النص وقيس كل الكالم دا‬row ‫ هتتحكم في العناصر انها تيجي في اول ال‬content
column or rtf ‫بقي لو‬

Instead of value of flex start and flex end use


Right, left and center
up is ;ltr or ‫ دي بتخلي العناصر علطول تروح يمين او شمال او ف النص وملهاش عالقه ال‬values ‫ال‬
rtf

Spaces
Value of space between
‫بتعمل مسافات متساويه بين العناصر بس ملهاش دعوه باالطراف‬
Value of space around
‫بتعمل مسافات متساويه بين العناصر و مسافات بين األطراف بس بتكون مسافه األطراف اققل من‬
‫المسافات الي ما بين العناصر‬
Value of space evenly
‫بتعمل مسافات متساويه بين العناصر واالطراف‬

Align-items && align-content


Default value is stretch “‫”يعني العنصر بتاعي بيتمد علي حسب طول االب‬

Value of it is : flex start , center , flex end

Align content
Work on all content without space

Work when flex-wrap : wrap ; only

Doesn’t work with flex-wrap : nowrap ;

We can write space between around evenly

 But works only when found more than one “column or row”
Align-items
Work on content but make space between them

Work when flex-wrap : wrap or nowrap;

We cant write space between around evenly

We can’t write space between around evenly

If flex direction work on row

o Justify content work on row


o Align items work on column
o Align content work on column

If flex direction work on column

o Justify content work on column


o Align items work on row
o Align content work on row

Gap
‫بتديلها قيمه وبتكون القيمه دي هي المسافه الي ما بين العناصر وبعضها‬
Flex-Boxchildrens
Flex box here
We will talk about attributes that put only at children not parent

Algin-self
Same the value and ‫ تصرف‬of parent at align items

Default value is stretch

Other values is flex start end , center

Order
default value is 0

Item with higher order transfer to the last position

If all numbers of order are equal, the position will “‫ ”يترتب‬according to the arrange
of them at html

Flex grow
Default value is zero

children‫ ف ال‬flex grow at children ‫ وانا روحت حطيت ال‬parent ‫لو فيه مساحه متبقيه من ال‬
‫ الي انتا كاتبهالو‬value ‫هياخد المساحه دي علي حسب ال‬

‫ دي مش هتشتغل‬attribute ‫ ف ال‬parent ‫لو مفيش مساحه متبقيه من ال‬

Flex shrink
Default value is 1

If I don’t want make shrink to my items so give him zero as value

If I give to my item the highest value so priority of shrinking ‫ هتبقي ليه هو‬and he is
the first element will shrink

‫ف كل لما الرقم بيزيد بتاع االنكماش كل ما يكون ليه األولوية انه ينكمش عن العناصر التانيه الي معاه‬

Flex basis
Control at the
o Height of the element if flex direction is column
o Width of the element if flex direction is row

Values of it as the value of height


Flex
Is shorthand for flex basis and flex shrink and flex grow

Flex : grow value , flex shrink , flex basis ;

Compare between flex and grid


Flex box Grid
Design When I have web design When I have many rows and columns
have one dimension only integrated together
like all rows or all columns
Level of Easy for one dimensional Easy for complicated web
hard web
Gridparents
Display grid
Must written at parent

Grid template columns


Make columns when u write values as
Pixel
‫كل لما تكتب رقم كل ما عمود يزيد عندك وهكذا‬
Percentage
‫ الي عندي من مساحه ال‬element ‫لما تكتب نسبه ف النسبه دي بتبقي عباره عن نسبه العمود لل‬
parent

Auto
‫ بس طالما المساحه المتبقيه تسمح‬content ‫بتاخد مساحه علي قد ال‬

1fr (fraction)
‫بياخد نسبه من المساحه المتبقيه‬
‫ بس بتكون‬auto ‫ هوا بياخد كل المساحه وبيسيب مساحه لل‬auto ‫البلطجي يعني لو اجتمع مع ال‬
‫المساحه الي سايبها علي قد الكونتنت بس‬
Minmax(min value , max value)
‫دي بتحددلك اققل قيمه واكبر قيمه ايه للعمود بتاعك‬
‫ في الماكس فاليو عشان‬auto ‫فيه مشكله اني لو مش عارف المحتوي بتاع عمود معين ف ممكن اكتب‬
‫ دي تاخد مساحه وتكبر علي حسب المحتوي الي هيتكتب عشان الشكل ميبوظش‬cell ‫ال‬

Repeat(number of columns u want them , volume of each one of them)


If I put auto-fill as value in number of columns u want them, he will create columns
according to the width of the parents

To use all areas founded write minmax() at volume of each one of them

column-gap
spaces between your columns

gap
it takes 2 value gap : (row gap value column gap value)

if u give one value he consider row gap value = column gap value
Grid template rows
Must determine the height of parent ‫ عشان تشغل‬this attribute

Same values at Grid template columns

justify content
work on x-axis only under any condition

this attribute doesn’t work when found repeat( number of columns , 1fr)

this attribute works when found repeat( number of columns , auto)

‫ هتاخد المساحه كلها‬fr ‫ اما ال‬content ‫ هنا هتاخد مساحه ال‬auto ‫الن‬

Spaces
Value of space between

‫بتعمل مسافات متساويه بين الصفوف بس ملهاش دعوه باالطراف‬


Value of space around

‫بتعمل مسافات متساويه بين الصفوف و مسافات بين األطراف بس بتكون مسافه األطراف اققل من‬
‫المسافات الي ما بين الصفوف‬
Value of space evenly

‫بتعمل مسافات متساويه بين الصفوف واالطراف‬

Align content
Work on y axis only under any conditions

This attribute doesn’t work when not found space of height at parent to elements

Spaces
Value of space between

‫بتعمل مسافات متساويه بين االعمده بس ملهاش دعوه باالطراف‬


Value of space around

‫بتعمل مسافات متساويه بين االعمده و مسافات بين األطراف بس بتكون مسافه األطراف اققل من‬
‫المسافات الي ما بين ا العمده‬
Value of space evenly

‫بتعمل مسافات متساويه بين االعمده واالطراف‬


Gridchildrens
To control of number of columns or rows u want
element to take them
Grid-column : number of start column line / number of column end line ;

Grid-column -start: number of column start line;

Grid-column-end : number of column end line;

If u write this Grid-column : 1/-1 ; this mean your column cell will take all
cells of column founded at the selected column

All this apply on rows

There Is other way for inserting rows and columns


U come to every element and give him name at attribute

Grid-area : head ;

Then u come to parent and write this

Grid-template-area:

“head head . ”

“ aside main aside”

“ aside main aside”

“footer footer footer ”

Dot here mean that this cell is empty

If u give any element grid area name must use it


Example
.test-items{
background-color: blueviolet;
margin: 10px;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-template-areas:
"iteam1 iteam1 iteam1"
"iteam2 iteam3 ."
"iteam2 iteam3 ."
"iteam4 iteam4 iteam4"
;
}
.item1{
background-color: aqua;
margin: 10px;
padding: 10px;
grid-area: iteam1;
}

.item2{
background-color: rgb(156, 250, 5);
margin: 10px;
padding: 10px;
grid-area: iteam2;

.item3{
background-color: rgb(227, 12, 195);
margin: 10px;
padding: 10px;
grid-area: iteam3;

.item4{
background-color: dimgrey;
margin: 10px;
padding: 10px;
grid-area: iteam4;

}
Shadow-box
Values at it

Box-shadow : horizontal shadow | vertical shadow | blur | spread | color | inset

We can add more than one shadow by , like this

Box-shadow :

horizontal shadow | vertical shadow | blur | spread | color | inset ,

horizontal shadow | vertical shadow | blur | spread | color | inset ,

horizontal shadow | vertical shadow | blur | spread | color | inset ,

horizontal shadow | vertical shadow | blur | spread | color | inset ;


learn at project
attributes
place items

margin top

outline

‫ في‬value ‫ وبحط ال‬input ‫ بيظهر في لما بعمل‬radius ‫الخط الي بيظهر خارج البوكس وملهوش‬
none ‫االغلب‬

Scale

Must write this at head “logo”


<head>

<link rel="stylesheet" href="[Link]


awesome/6.4.0/css/[Link]">

</head>

To install library that I take logo from it

Text align
It controls the inner content of element which has display block

it doesn’t have any direct access to inline elements

it controls the position of the children elements according to parent element “ ‫الزم‬
‫”االب يكون بلوك‬

direction
has two values is ltr or rtl

ltr which mean page take the english language as default

rtl mean u make element or page as arabic language

text transform
make your text uppercase or lowercase or capitalize

letter or word spacing


it makes spaces between letters or words and each other
line height
it makes height spaces between each line and other

text decoration
when I put none value it deletes any decoratation for text

white space
browser deal with space by ignoring it at default, and solve this problem by

give pre value to white space to appear spaces I write it

if I want the text to keep the parent wrap and in the same time want to appear
spaces give

pre-wrap value to white space

word-wrap
if word is too long and exist from it’s parent so I give break down value to word
wrap to solve this problem

position

Positio Offset is calculated from Keeps its place Moves with


n in normal flow? scroll?

relativ Its original position Yes Yes


e

absolu Closest positioned ancestor No Yes


te (not static) or <html> if
none

fixed Browser window (viewport) No No

sticky Nearest scrollable ancestor Yes (until Partially


or container sticky point) (moves until it
sticks)
‫‪z-index‬‬

‫هو رقم بيحدد ترتيب الطبقات (‪ )stack order‬للعناصر لما تتداخل فوق بعض‪.‬‬ ‫‪‬‬

‫كل ما الرقم أكبر → العنصر بيظهر قدام العناصر ذات الرقم األصغر‪.‬‬ ‫‪‬‬

‫بيشتغل فقط لو العنصر له ‪ position‬غير ‪( static‬يعني يكون ‪ relative‬أو ‪ absolute‬أو ‪fixed‬‬ ‫‪‬‬
‫أو ‪.)sticky‬‬

‫القيم‪:‬‬ ‫‪‬‬

‫رقم موجب (مثًال ‪ → )10‬أمام عناصر أقل رقم‪.‬‬ ‫‪o‬‬

‫رقم سالب (مثًال ‪ → )1-‬وراء عناصر أكبر رقم أو االفتراضي‪.‬‬ ‫‪o‬‬

‫‪ → auto‬بياخد الترتيب من العنصر األب‪.‬‬ ‫‪o‬‬

‫‪List style‬‬
‫‪List-style : ‘none’ to hide the points‬‬

You might also like