DEV Community

Bhuvana Sri R
Bhuvana Sri R

Posted on

Day 1 & 2 of My Java Full Stack Journey:Starting with HTML & CSS Basis

Hii Everyone,

I'm starting my Java Full Stack Learning and it's my first day!
Today I learned the basics of HTML and CSS.

HTML Tags I've Learned

What is HTML?

  • HTML stands for HyperText Markup Language
  • Create web pages,It's like Skeleton of a webpage
  • Use simple tags
  • Whether it's an online store or social media-they all use HTML in background

Why is HTML?

  • Displays web content
  • foundation of web development

Basic Structure of HTML

<html>
<head>
     <title>My First web Page</title>
</head>
<body>
     <h1>Welcome</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

What is CSS?

  • Stands for Cascading Style Sheet
  • Used to style HTML element
  • With CSS,you can control color,size,font etc...

CSS Rule

p{
color:red;
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  • In this,P is a selector
  • Inside that declaration,we use property and a value

Types of CSS

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Applied directly to HTML element using style attribute

<h4 style="color:blue;font-style:italic;">Welcome</h4>
Enter fullscreen mode Exit fullscreen mode

Internal CSS

Defined within the section of HTML document

<head>
<style>
h4{
color:red;
}
</style>
</head>
Enter fullscreen mode Exit fullscreen mode

External CSS

Defined in a separate CSS file and linked to HTML file using tag

Save the css file name like style.css

h4{
color:blue;
}
Enter fullscreen mode Exit fullscreen mode

HTML file

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Text</h3>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Header

  • It is a section at the top of a webpage that contains
  • Navigation Menu
  • Search Bar
  • Other introductory Content 
<header>
<h1>geeksforgeeks</h1>
</header>
Enter fullscreen mode Exit fullscreen mode

Section

Define a section of content that typically related to the heading

<section>
<h2>HTML Tags</h2>
<p>It is a fundamental building blocks of HTML</p>
</section>
Enter fullscreen mode Exit fullscreen mode

List

There are two types of List

  • Ordered list - marked as numbers and alphabets 
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  • Unordered List - marked as bullets,square etc... 
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Block

  • Starts with new line
  • Browsers automatically add some space before and after element

Examples: <div>,<p>,<h1>

Inline

  • Doesn't start with new line
  • Occupy the space needed for their content

Examples: <a>,<img>

Additionally I Learned How to install Linux OS on My own

Top comments (0)