web analytics

Working with HTML5 and CSS3

Options
@2021-03-16 07:41:28

Handling White Space

A whitespace character is any empty or blank character such as a space, tab, or line break. The browser reading the HTML code ignores the presence of white-space characters between element tags and makes no distinction between spaces, tabs, or line breaks. Thus, a browser will treat the following two pieces of code the same:

<p>Welcome to my website.</p>

and

<p>

Welcome to my website.

</p>

The browser also collapses consecutive occurrences of white-space characters into a single occurrence, so that the text of the paragraph in the following code is still treated as “Welcome to my website”, ignoring the extra white spaces between “my”
and “website”.

<p>

Welcome to my     website.

</p>

The bottom line is that it doesn’t matter how you lay out your HTML code because the browser is only interested in the text content and not how that text is entered. This means you can make your file easier to read by indenting lines and by adding extra white-space characters to separate one code block from another. However, this also means that any formatting you do for the page text to make the code more readable, such as tabs or extra white spaces, is not transferred to the web page.

@2021-08-14 20:35:53

CSS3 Properties

The following section contains a complete list of visual properties belonging to the CSS3 specifications. All the properties are ordered alphabetically.

 

A

align-content 

align-items 

align-self 

animation 

animation-delay 

animation-direction 

animation-duration 

animation-fill-mode 

animation-iteration-count 

animation-name 

animation-play-state 

animation-timing-function 

B

ackface-visibility 

background

background-attachment

background-clip 

background-color

background-image

background-origin 

background-position

background-repeat

background-size 

border

border-bottom

border-bottom-color

border-bottom-left-radius 

border-bottom-right-radius 

border-bottom-style

border-bottom-width

border-collapse

border-color

border-image 

border-image-outset 

border-image-repeat 

border-image-slice 

border-image-source 

border-image-width 

border-left

border-left-color

border-left-style

border-left-width

border-radius 

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-topb

order-top-color

border-top-left-radius 

border-top-right-radius 

border-top-style

border-top-width

border-widthbottombox-shadow 

box-sizing 

C

caption-sideclear

clip

color

column-count 

column-fill 

column-gap 

column-rule 

column-rule-color 

column-rule-style 

column-rule-width 

column-span 

column-width 

columns 

content

counter-increment

counter-reset

cursor

D

direction

display

E

empty-cells

F

flex 

flex-basis 

flex-direction 

flex-flow 

flex-grow 

flex-shrink 

flex-wrap 

float

font

font-family

font-size

font-size-adjust 

font-stretch 

font-style

font-variant

font-weight

G, H, I, J, K, L

height

justify-content 

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

M

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

N, O

opacity 

order 

outline

outline-color

outline-offset 

outline-style

outline-width

overflow

overflow-x 

overflow-y 

P

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

perspective 

perspective-origin 

position

Q

quotes

R

resize 

right

S, T

tab-size 

table-layout

text-align

text-align-last 

text-decoration

text-decoration-color 

text-decoration-line 

text-decoration-style 

text-indenttext-justify 

text-overflow 

text-shadow 

text-transform

top

transform 

transform-origin 

transform-style 

transition 

transition-delay 

transition-duration 

transition-property 

transition-timing-function 

U

unicode-bidi

V

vertical-align

visibility

W

white-space

width

word-break 

word-spacing

word-wrap 

X, Y, Z

z-index

@2021-08-14 20:42:03

The !important CSS Rule

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

@2022-02-03 18:59:17

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title> element, like this:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.

Comments

You must Sign In to comment on this topic.


© 2024 Digcode.com