Introduction
Web pages are created using HTML and CSS.
- HTML is used to establish a page‘s structure. It also lets us add text, links and images.
- CSS is used to control the design and layout of the page.
HTML elements
HTML elements are the building blocks of web pages.
HTML elements describe each piece of content on a web page so that the web browser knows how to display it.
Heading elements
Headings are described by heading elements. There are six levels of heading elements: h1 to h6. The h1 element is used to describe the main heading of the page.
<h1>This is the main heading!</h1>
<p>
In HTML, paragraphs are described by paragraph elements, or p elements.
<p>We are learning HTML.</p>
<a>
The defining feature of the Web is the presence of links. Clicking on links leads to other web pages. The a element is used to create links.
The a element is similar to the h1 or p elements, but it has two key differences:
- First, it has an href attribute which equals the website you want to link to.
- Second, you get to choose the link text that users see on the page.
<a href="http://www.baidu.com">Search</a>
<img>
The img element is used to add images to a page. The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the img.
<img src="logo.png">
<ul> and <li>
In HTML, a bulleted list is described using a Ul element. Each item in the list is placed inside an li element.
<ul> <li>Home</li> <li>About</li> </ul>
<html> and <body>
Everything inside a web page is nested inside the html element
The body element contains the actual content of the web page - everything nested inside <body> and </body> shows up in the web browser
The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn‘t have a closing tag. The doctype ensures that you web page displays consistently when its visited from different browsers.
<!DOCTYPE html> <html> <body> <h1>Web Development</h1> <P>We‘re learning HTML</P> </body> </html>
<div>
A div element groups other element together into sections of the web page, such as a navigation bar, he main body, and the footer.
CSS
The HTML to the right never changes.
A web page is a collection of HTML elements. CSS is used to control the appearance of an HTML element.
The code to the right specifies that h1 elements be colored red. This code is called a CSS rule.
H1{
color:red;
}
CSS Rules
A web page is a collection of HTML elements. CSS can control the design of an element, like its color, font, and spacing.
CSS can also control where an element sits on a page to create a page layout.
CSS uses rules to style HTML elements. Here‘s how CSS rules work:
- A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here the h1 CSS selects all h1 HTML elements on the page.
- inside the braces {}, a property and its value define what aspect of the h1 elements to style. setting the color property to red changes the color of the h1 element to red.
Together, a selector and its property-value pairs are called a CSS rule.
Class Attribute
HTML elements can be CSS selectors, but they‘re not the only selectors available. Another available selector is the class selector.
<div class="header">
<h2>Heading</h2>
<p>Subtitle</p>
</div>
<p>Hello world</p
The class can be targeted from CSS by using a dot .
.header {
color : blue;
}
The .header selector applies a blue text color only to the elements nested inside
<div class="header">..</div>
Combining Selectors
It‘s possible to be even more specific by combining classes and element names.
.header p {
color: blue;
}
This CSS selector selects any p element nested inside an HTML element with the class namd header ad colors it blue.
Color
we can use color names to change the text‘s color. But this only works for 140 colors.
instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors. RBG value and hex numbers express colors as different amounts of red, green and blue.
- RGB values range from 0 to 255, with 255 being the brightest.
- Hex numbers vary from 00 to ff, with ff being the brighest.
.jumbotron h1 {
color: rgb(102,153,0);
}
.jumbotron h1 {
color: #9933cc;
}
font-family
The font-family property sets the font of an HTML element‘s text.
Three fonts commonly used with font-family are:
- font-family: arial, Helvetica, sans-serif;
- font-family: "Times New Roman" , Times, serif;
- font-family: "Courier New" , Courier, monospace；
font-size
The font-size property sets the size of an HTML element‘s text.
Text size can be measured in pixels, ems, or rems.
.jumbotron h1 {
color: red;
font-family: ‘shift‘ , sans-serif;
font-size: 60px;
}
The background-color property sets the color for the background of an HTML element.
Instead of a solid color, the background-image property sets an image as the background of an HTML element.
The border property sets the width, style, and color of an element‘s border
The padding property creates space between the content and border of an element. This whitespace is useful in order to improve readability and organization of the page.
The padding property sets the padding on all sides. It‘s possible to set the padding on each side.
The properties padding-top, padding-bottom,padding-left, and padding-right are available to set the padding on each side of an HTML element.
The margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.
The margin property sets the margin on all sides. It‘s possible to set the margin on each side.
The properties margin-top, margin-bottom,margin-left, and margin-right are available to set the margin on each side of an HTML element.
The properties margin-left, and margin-rightare available to set the margin on either side of an HTML element. If one of these properties is set to auto, then it will take as much as possible.
To move the HTML element to the far left of the screen, use margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.
To center an element, set margin-right: auto andmargin-left: auto. The margin to the left and right will be equal and the element will be centered.
<head> && <link>
Here‘s an example of using CSS in a web page:
- The head element contains information that the web browser needs to display the page.
- The link element tells the browser where to find the CSS file used to style the page. The
relattribute tells the browser that the file being linked is a CSS file to style the page. Thehrefattribute gives the browser the path to the CSS file. - The body element contains the content of the page that shows up in the web browser.
CSS Layout
What CSS properties are available to move elements around and create page layouts? Here are three common CSS properties.
1. Display
CSS treats HTML elements like boxes. A box can be ‘‘block‘‘ or ‘‘inline‘‘.
- Block elements display on a new line
- Inline elements display on the same line as their neighboring elements
2. Position
The position property is used to move an HTML element to a precise positon on the page.
By setting position: relative, you can use the CSS properties top, left, bottom, and right to shift an element away from where it would have normally appeared on the page.
3. Float
The float property moves an element to the far left or far right of the page.
Bootstrap:
Is a collection of prewritten CSS rules used to build web pages faster. Bootstrap provides styles out of the box for several common components on a web page, such as grid layouts, navigation, showcases, and much more.
The grid
A grid is a useful way to create page layouts.
Bootstrap‘s grid is made up of 12 equal-sized columns. Each piece of content is aligned to this grid by specifying the number of columns to span.
Tabs
Tabs are common navigation technique that give links to different parts of a site.
Pills
Pills are a set of buttons that give links to different parts of a site.
Jumbotron
Many sites have a large showcase area featuring important content. Bootstrap calls this large showcase a jumbotron.