HTML & CSS
CSS stands for Cascading Style Sheets and it represents the design conventions that are applied to the display of HTML elements on screen, paper and other media.
CSS syntax is expressed in the form of a rule-set consisting of a selector and a declaration box. Colors are specified using predefined color names. CSS can be added to HTML elements in three ways: inline, internal and external.
CSS Syntax
The rule starts with a call to an element tag or name followed by curly braces { ... } (open and close) with a list of style properties inside.
body {
background-color: powderblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Verdana;
font-size: 20px;
}
Simple HTML and Inline CSS
Using the element attribute style="" to directly style the HTML element tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML and Inline CSS</title>
</head>
<body style="background-color: powderblue; font-family: Verdana;">
<h1 style="background-color: yellow; color: black; text-align:center;">My First HTML with Inline CSS</h1>
<img src="https://picsum.photos/300" alt="Lorem Picsum" style="display: block; margin: 5% auto;">
<div class="container" style="border: 3px solid red;">
<p style="background-color: green; color: yellow; padding: 10px 5px 20px 5px; margin: 20px 20px 20px 20px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</body>
</html>
Internal CSS
The style element tag contains the rules for the page using the following.
<style>...</style>
The HTML element tag style is placed within the <head> ... </head> element.
Yes, the element tag name style is same as element attribute style="..."
The rule starts with a call to an element tag or name followed by curly braces { ... } (open and close) with a list of style properties inside.
The CSS comment tag /* ... */ does not displayed in the browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML and Inline CSS</title>
<style type="text/css">
/* <-[open syntax]
This is CSS comment syntax
[close syntax]-> */
body {
background-color: powderblue;
font-family: Verdana;
}
h1 {
background-color: yellow;
color: black;
text-align: center;
}
img {
display: block;
margin: 5% auto;
}
.container {
border: 3px solid red;
}
p {
background-color: green;
color: yellow;
padding: 10px 5px 20px 5px;
margin: 20px 20px 20px 20px;
}
<style>
</head>
<body>
<h1>My First HTML with Inline CSS</h1>
<img src="https://picsum.photos/300" alt="Lorem Picsum">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</body>
</html>
External CSS
A separate style sheet which contains the rules linked to each page using the following.
<link type="text/css" rel="stylesheet" href="style.css">
The HTML element tag link is placed within the <head> ... </head> element.
The rule starts with a call to an element tag or name followed by curly braces { ... } (open and close) with a list of style properties inside.
The CSS comment tag /* ... */ does not displayed in the browsers.
HTML File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML and Inline CSS</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML Element Tags -->
</body>
</html>
CSS File style.css
/* <-[open syntax]
This is CSS comment syntax
[close syntax]-> */
body {
background-color: powderblue;
font-family: Verdana;
}
h1 {
background-color: yellow;
color: black;
text-align: center;
}
img {
display: block;
margin: 5% auto;
}
.container {
border: 3px solid red;
}
p {
background-color: green;
color: yellow;
padding: 10px 5px 20px 5px;
margin: 20px 20px 20px 20px;
}
HTML & CSS
HTML Hypertext Markup Language provides basic structure to the site and CSS Cascading Style Sheets, is used to style the appearance of content-using, for example, fonts or colors.
Learn how to add style and pizzazz into a website or content management template.
Additional Cources
HTML
Learn how to code HTML, Hypertext Markup Language using online tools and resources to build and deploy a website.
The 2-hour session is designed to provide a foundational understanding of HTML to help build and deploy a website.
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Learn how to integrate the framework into a website or content management.
Quality Assurance (QA)
Learn how to fix webpage issues on different types of screen sizes, browsers, operating systems, and other platforms.
We will examine the design precess and testing for the best website experience to the particular user base.