CSS - this is used to control the design and the layout of the page
HTML elements is used to structure a website
There is the heading element. There are six levels of heading elements from h1 to h6.
Creating a heading
The h1 element is used to describe the main heading of the page.
<h1> Heading </h1> - text a user can see
Creating a paragraph <p>
A new article headings are usually followed by paragraphs these are coded as
<p> paragraph </p> - text a user can see
Creating a link <a>
To create a new link the website code used is
<ahref="http://www.google.com/">Search</a>
First red - Attribute name
Middle Red - Attribute value
Green - Attribute value
Adding an image<img>
To add a image the website code used is
<imgsrc="logo.png">
Red - Attribute value
Green - image address
Creating a list <ul> and <li>
In addition to paragraph and images, content and can be presented as lists. To add a list the website code used is
<ul>
<li>Home</li>
<li>About</li>
</ul>
Making the website works on different browsers<html> and <body>
<!DOCTYPEhtml>
<html>
<body>
<h1>Web Development</h1>
<p>We're learning HTML </p>
</body>
</html>
How to control the appearance of a HTML using CSS
Changing the colour:
h1{
color:pink;
}
How the CSS rule works:
1. The CSS rule starts with a selector. A selector specifies which HTML elements to style. The h1 in the CSS selector selects all h1 HTML elements on the page.
2. Inside the brace {}, a property and its valuedefine what aspect of the h1 elements to style. Setting the color property to red changes the colour of the h1 element to red.
Class Selector:
<div class="Header">
<h2>Heading</h2>
<p>Subtitle</p>
</div>
<p> Hello world </p>
When this Header has been coded blue it turns to the colour requested, however because "Hello World" is outside of the code <div> it remains unstyled
There are 140 colours, these colours can be chosen though tyoing values to change the brightness.:
- RGB values range from
0to255, with255being the brightest. - Hex numbers vary from
00toff, withffbeing the brightest.
There are three common fonts that are used which are:
font-family: Arial, Helvetica, sans-serif;font-family: "Times New Roman", Times, serif;font-family: "Courier New", Courier, monospace;
However you can uses Google fonts , this is a free collection of over 600
different fonts.
How to change the font size
Text size can be measured using pixels, ems, or rems.
How to change the background image
.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
}
How to change the border
.jumbotron h1 {
3px solid #cc0000: ;
}
How to change the padding
.jumbotron h1 {
padding: 0px;
border: 3px solid #ffffff;
}
How to change the Margin
.jumbotron h1 {
margin: 0px;
border: 3px solid #ffffff;
}
