HTML and Css
HTML and Css
s i t ?
And
at i
CSS
wh
1. HTML (Structure):
Think of HTML as the "skeleton" or the structure of your webpage. It's the <h1>Welcome to My Website</h1> <!-- This is a title -->
part that defines what elements you have on your page like text, images, <p>This is my first webpage!</p> <!-- This is a paragraph -->
buttons, and links.
h1 {
color: blue; /* Make the title text blue */
} Flexibility: You can customise a webpage's appearance and
2. CSS (Style):
p{
layout with CSS without changing the HTML. By linking a
CSS is like the "clothes" that make your webpage look nice. It tells the single CSS file, you may apply uniform styles throughout
font-size: 16px; /* Make the paragraph text size 16px */
web page how to look – like colors, fonts, spacing, etc. } the website.
Result:
Efficiency: Because the browser stores the CSS file and
When you open this in a web browser, you will see:
Putting HTML and CSS Together: does not have to download it each time a page loads,
HTML creates the structure (e.g., the title and text). The title "Welcome to My Website" in blue. writing organised and well-structured HTML and CSS code
CSS is used to style those elements (e.g., making the title blue and adjusting the The paragraph "This is a simple webpage I created." speeds up page loads.
paragraph size). with 18px text size.
HTML
<h1> is part of a heading hierarchy, which includes tags <h1> through <h6>.
The <h1> tag is one of the most important elements in HTML, used to
define the main heading on a webpage. Think of it as the title of a book
or the headline of an article—it tells people and search engines what
the page is about. It’s usually the biggest and boldest text on the page,
grabbing attention right away.
Styling Paragraphs
You can make your paragraphs look exactly how you want using CSS. For example:
Change the font, size, or color.
Add or reduce spacing between lines or paragraphs.
Align the text left, right, center, or justify it.
When you use <p>, it automatically creates a block of text with space above and below it, making it easier to read. For
example, if you write:
html
<p>This is a paragraph of text.</p>
Your browser will display it as a distinct block, separating it from other content.
width and height:
height and width (CSS-based): While the HTML attributes define the image’s
intrinsic size, you can also control the image's display size using CSS (using
width and height in CSS). This is more flexible and responsive than setting it
directly with HTML.
border: 5px solid black; adds a 5-pixel-wide solid black border around the image.
width: 300px; resizes the image width to 300 pixels.
height: auto; ensures the aspect ratio is maintained when resizing.
<A>
The <a> tag in HTML is used to create hyperlinks. A
hyperlink allows users to click and go to another page,
website, or specific part of the current page. It’s one of
the most crucial parts of the web.
When the hr> tag is used alone, it creates a simple grey line that is the length of
the page; however, when you style it with CSS, it becomes much more adjustable;
you could change its colour, make it thinner or thicker, add dotted or dashed
effects, or even use gradients to make it look more recent and professional. This
makes the hr tag not only a useful tool but also a design element that can
improve the website's overall look.
<DIV>
The <div> tag in HTML is a block-level element used to group content together, making
it easier to organize and style sections of a webpage. It doesn't have any visual styling
by default but becomes powerful when combined with CSS for design and layout
purposes.
What Happens?
The <div> groups the heading, paragraph, and button together into a single styled
section.
CSS is applied to make the section visually appealing: a light gray background, rounded
corners, padding, and a shadow to give it depth.
The content is centered, and the button has hover effects, enhancing interactivity.
KEY RULES OF CSS
These "enclose" an object's styles. The curly braces should contain anything you want to style.
Semicolons:
Despite being opposites in their roles (content vs. appearance), they work well together because
HTML provides the foundation, while CSS makes that foundation visually appealing and
functional. HTML organizes the elements, and CSS makes them look good, ensuring that a
webpage is both structured and attractive. This separation of concerns allows for cleaner, more
maintainable code, and lets web developers focus on either the content or the style without
interfering with the other.
Thank you