Hello Everyone!
In this blog, We are going to see about HTML and CSS.
What Are HTML & CSS?
HTML, Hyper Text Markup Language, gives content structure and meaning by defining that content as, for instance, headings, paragraphs, or images.
CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.
Both HTML and CSS are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa.
As per rule, HTML will always express content, and CSS will always represent the appearance of that content.
With this understanding of the difference between HTML and CSS, let’s dive into HTML in more detail.
Common HTML Terms:
- HTML Documents
- HTML Headings
- HTML Paragraph
- HTML Links
- HTML Images
- HTML Buttons
- HTML List
Now, Let Us see these terms in brief with examples:
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
HTML Links:
HTML links are defined with the <a> tag:
Example
<a href=”https://www.mbwit.net“>This is a link</a>
The link’s destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src=”mbwtechimpex.jpg” alt=”mbwit.net” width=”104″ height=”142″
HTML Buttons
HTML buttons are defined with the <button> tag:
Example
<button>Click me</button>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Common CSS Terms:
- Selectors
- Properties
- Values
Selectors
As elements are added to a web page, they may be styled using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Selectors may include a combination of different qualifiers to select unique elements, all depending on how specific we wish to be. For example, we may want to select every paragraph on a page, or we may want to select only one specific paragraph on a page.
Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>.
Within CSS, selectors are followed with curly brackets, {}, which encompass the styles to be applied to the selected element. The selector here is targeting all <p> elements.
1
2
p { … }
Properties
Once an element is selected, a property determines the styles that will be applied to that element. Property names fall after a selector, within the curly brackets, {}, and immediately preceding a colon, :. There are numerous properties we can use, such as background, color, font-size, height, and width, and new properties are often added. In the following code, we are defining the color and font-size properties to be applied to all <p> elements.
1
2
3
4
5
p {
color: …;
font-size: …;
}
Values
So far we’ve selected an element with a selector and determined what style we’d like to apply with a property. Now we can determine the behaviour of that property with a value. Values can be identified as the text between the colon,:, and semicolon,;. Here we are selecting all <p> elements and setting the value of the color property to be orange and the value of the font-size property to be 16 pixels.
1
2
3
4
5
p {
color: orange;
font-size: 16px;
}
To review, in CSS our rule set begins with the selector, which is immediately followed by curly brackets. Within these curly brackets are declarations consisting of property and value pairs. Each declaration begins with a property, which is followed by a colon, the property value, and finally a semicolon.
It is a common practice to indent property and value pairs within the curly brackets. As with HTML, these indentations help keep our code organized and legible.
Fig 1
CSS syntax outline including a selector, properties, and values.
Knowing a few common terms and the general syntax of CSS is a great start, but we have a few more items to learn before jumping in too deep. Specifically, we need to take a closer look at how selectors work within CSS.
These are some basic information about HTML and CSS.
I hope this will be useful to you all.
Thank you.
Source:
https://en.wikipedia.org/wiki/HTML
MBW TECHIMPEX 