Scribd
Upload
17 views4 pages

Htmlandcsselements

HTML elements like <header>, <section>, <article>, <aside>, <main>, and <div> are used to structure content on a webpage. Empty tags like <meta> and <link> don't require closing tags. The <link> tag is used to link external CSS files using attributes like "rel", "href", and "type". Images can be added using the <img> tag with "src" and "alt" attributes. Navigation is built with lists <ul><li></li></ul> and links <a href=""></a>. CSS is used to style elements by selecting them and applying properties like "font-size", "color", "width", "padding", and "margin".

Uploaded by

aakarsh.kunchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views4 pages

Htmlandcsselements

HTML elements like <header>, <section>, <article>, <aside>, <main>, and <div> are used to structure content on a webpage. Empty tags like <meta> and <link> don't require closing tags. The <link> tag is used to link external CSS files using attributes like "rel", "href", and "type". Images can be added using the <img> tag with "src" and "alt" attributes. Navigation is built with lists <ul><li></li></ul> and links <a href=""></a>. CSS is used to style elements by selecting them and applying properties like "font-size", "color", "width", "padding", and "margin".

Uploaded by

aakarsh.kunchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Basics:

Empty tags are tags which don't require closing tags. Some of them are:
<meta>, <link>

HTML Opening Tag:


<!DOCTYPE html>

Whenever working on vscode, to link a css page, just write link and then press tab.

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


rel is the type of file you are making. stylesheet is for css. href is
hyperreference which allows the index to access this file.

make index.html as the main file. don't name it differently

HTML elements like elements and headers are placed like boxes.

<header> is the headings of the website page

<section> can be used to create a section anywhere and you can add anything to it.

<img src="" alt=""> is a way to add images from online links.

<nav> can be used for the navigation bar

<footer> can be used to add a footer to the website. Here you can have contact
number, social media handles over here.

<article> can be used to group multiple entities together.

<aside> is a tag that can be used to put content which is not directly connected to
the main website content. This can be a side feature.

<main> is the container that is going to contain the main content of the page in
which the user is.

<div> describes nothing in the website. But this can be used to structure the
website better.
Don't use div tag everywhere. Use other tags for important content. Use div when it
is absolutely necessary.

Linking Pages(related to navigation):


<a href=""> This can be used as a link to other pages from one page. This is a
closing tag. But whenever you want to put the name of the page, you can do it in
the middle of the tags.
In order to add links to external pages, you can add the link in the href command
and you can go to the page.

to give your elements a distinct feature, you can make id's for them. These id's
will allow you to style only specific attributes and elements. and when you want to
style this, you can add the name and with a hashtag in the start and style it
accordingly. But the issue with id's is that you cannot use it in multiple
elements. Even though the desired result is seen, if you want to run this through a
website validator, it won't pass.

This is why we use classes. for class you simply write class before you want to
give it the name. And instead of giving a hashtag you give a full stop and then
write the class name. if you leave a space in your quotation marks for the class
name and write another name, you can add another styling to your element or
attribute.

images can be added in a variety of ways to your website. They can be added in a
container, normal way, or background.
IMG is a way to add the url for your image and alt is a way to name your image
whenever you want to differentiate it from other images. you can add a width and
height attribute within the image element. you can add images as a background and
write background size. your sizes can be written in percentages. if the image
duplicates itself multiple times, you can write background-repeat: no-repeat; and
if you want to prevent the duplication altogether, then you can write background-
size: cover; you can write background position if you want your image to be
centered by writing background-position: center;

if you want to add a hover image, go to CSS, whatever your class name is for your
image, add a colon, and add the pseudoelement hover in it. but there is an issue.
when you load the website and hover over the image for the first time, it will
flicker. so to remove this you can write a pseudoelement called after to pre load
the website. you can write content within the curly brackets and add the URL of the
image you want to add. but with this, you can by mistake add another image.
position: absolute; you can add width and height to 0. You can make an overflow as
hidden and the z-index as -1.

you can add a transition element in your hover effect here. you can write all.
Occasionally, you can write width or height. you can also write ease-in-out, ease-
out, or ease-in.

in your nav tag, you can make a ul(unordered list) tag for your buttons in it. then
you can add an li(list item) tag to add the names for your buttons. to link the
button to another page, you can add an anchor tag(<a> </a>) which will allow you to
add a button to the navbar along with the link to the other page.

If you want to add a hero section, which you will probably do, then you can use the
main tag. But if you think that this information is not important enough, then you
can add it in a section tag

css:
Whichever element you want to style, you can write its name and then put curly
brackets and write any css code you want to write in the curly brackets.

font-size changes the size of the fonts. write the fonts in px


font-weight changes how thick the lines of the font are. write a number
color changes the color
font-family has the font which you want your text to be
font-style allows you to change it to italic, bold or anything you want a specific
text to be
text-align allows you to place that specific text where ever you want to place it
text-decoration allows us to put a few lines are any tiny decoration around text
text-transform allows us to put it in lowercase, uppercase and anything you want to
make your text

line height allows you to add spacing between different lines


you can use word-spacing to increase or decrease the amount of space present
between different words

width and height can be used to size boxes in our website. You can put background-
color in these boxes as well.
Margins are spacing within different boxes in a website. you can have margines in
all of the directions. you can write only one margin element and then write four
values in this order, top,right, bottom, left

padding is the extra space within a container. padding is to create an outline for
your texts or images.

float is a way to make the text or any element move to any direction near any other
content in whichever direction you want it to go.
z-index can be used to position content wherever you want it to go. you can give a
number to it in order to move it whereever you want it to.

border can be given a color in order to outline different divs and images in order
to differentiate.

cursor element can make the cursor change whenever it hovers over an element.
display can make some elements disappear if you say none in it.
visibility can also be put at a setting of hidden

it is important to create a reset.css file before you start writing your css code.
this is because at times there might be issues with the fact there are some random
elements in your website which are unnecessary. So, a few websites are used for the
code they write to reset your website. This is called New CSS reset

flexbox:
this is another way to structure our content in a website
flexbox only works on content which is directy inside a header container
flex-direction allows you to change the way your content is placed next to each
other.
flex-wrap is a way to change the way your content wraps around in a line.
justify-content and align-content are ways to organize content in specific
containers
gap can be used to change the space between different content
order is a way to order your content in a specific container
flex-basis is another way to add width to your content. flex-basis is the basis of
the amount of minimum spacing required. we can tell the content to take over teh
remaining spacing if there is any
flex-grow can be used to takeover the remaining spacing
flex-shrink is a way to size your content according to the text which is in it
align-items is a way to align the items in a main container however you want it to
be
align-self is a way to align your content separately

to improve the look of the text in your website, you can use google fonts, download
a font which you like and add it in the website. this will allow using more
fonts.add the downloaded file to the root folder. before adding the font, you can
first add a link rel=preconnect href= https://fonts.google.com(or the link of the
site you sourced your font from). This will help you load the font faster. and then
add another preconnect in which you write https://gstatic.com in order to load the
fonts even faster.

positioning is another way to organize content in website. it is different from


flexbox. so the default positioning of all the content is static. but we can change
it to relative in order to move the content according to its position.

in order to make your navigation bar sticky, you can put its position as fixed

the calc() function can be used to find out exact dimensions of objects and
elements in our websites by minusing pixels from percentages, viewwidth, viewheight
or any other measurement
in order to declare a variable, you need to add two dashes before you write the
variable name. this is the declaration for a variable. and after you do this, in
order to use the variable, you can write var() in any attribute and you are sorted.

You might also like