This week I learned colors, background colors, margins, fonts and color variants in RGB(red green blue), border, hover, visited creating id and class and making changes to the class and ids. following is the HTML(firstcss.html) and CSS(styling.css) for a static web page created using these principles.
firstcss.html:
<html>
<head>
<meta charset="UTF-8">
<title>CSS Demo Page</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<h1>CSS DEMO</h1>
<p>PARAGRAPH COLORING USING CSS</p>
<div>
<p class="a">Class a</p>
<p id="b"> Id b </p>
<h2>HTML CSS JAVASCRIPT</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
</div>
<div>
<h3>To-do List</h3>
<ul>
<li>HTML <input type="checkbox" checked></li>
<li>CSS <input type="checkbox" checked> </li>
<li>JavaScript <input type="checkbox"> </li>
<li>BOOTSTRAP <input type="checkbox"> </li>
<li>ExpressJS <input type="checkbox"> </li>
<li>Nodejs <input type="checkbox"> </li>
<li>MongoDB <input type="checkbox"> </li>
<li>AngularJS <input type="checkbox"> </li>
</ul>
</div>
<p>Static webapplication</p>
<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">Learn about CSS in Wikipedia</a>
<a href= "https://www.w3schools.com/css/default.asp">Learn about css in W3schools</a>
<a href="http://www.google.com">google</a>
<br>
<input type="text" name="name" /><label> Name</label><br/>
<input type="password" name="password" /><label> Password</label><br/>
</body>
</html>
styling.css:
body {
background: pink;
}
h1 {
color: #9b59b6;
}
h2 {
color: orange;
}
li {
color: #0040FF;
}
h3
{
color: yellow;
}
p {
background: yellow;
}
input {
border: 4px solid red;
}
.a {
background: grey ;
}
#b {
font-size: 80px;
border: 2px solid rgb(100,200,300);
}
div p {
font-size: 20px;
}
input[type="text"]
{
background: gray;
}
div:nth-of-type(3) p {
background: pink;
}
div:nth-of-type(3) p:nth-of-type(2){
border: 5px solid white;
}
div:nth-of-type(3) em {
color: white;
font-size: 20px;
}
input:checked{
margin-left: 50px;
}
label{
text-transform: uppercase;
}
#b:first-letter{
color: green;
font-size: 100px;
}
h1:hover {
color: blue;
}
a:visited {
color:gray;
}
firstcss.html:
<html>
<head>
<meta charset="UTF-8">
<title>CSS Demo Page</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<h1>CSS DEMO</h1>
<p>PARAGRAPH COLORING USING CSS</p>
<div>
<p class="a">Class a</p>
<p id="b"> Id b </p>
<h2>HTML CSS JAVASCRIPT</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
</div>
<div>
<h3>To-do List</h3>
<ul>
<li>HTML <input type="checkbox" checked></li>
<li>CSS <input type="checkbox" checked> </li>
<li>JavaScript <input type="checkbox"> </li>
<li>BOOTSTRAP <input type="checkbox"> </li>
<li>ExpressJS <input type="checkbox"> </li>
<li>Nodejs <input type="checkbox"> </li>
<li>MongoDB <input type="checkbox"> </li>
<li>AngularJS <input type="checkbox"> </li>
</ul>
</div>
<p>Static webapplication</p>
<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">Learn about CSS in Wikipedia</a>
<a href= "https://www.w3schools.com/css/default.asp">Learn about css in W3schools</a>
<a href="http://www.google.com">google</a>
<br>
<input type="text" name="name" /><label> Name</label><br/>
<input type="password" name="password" /><label> Password</label><br/>
</body>
</html>
styling.css:
body {
background: pink;
}
h1 {
color: #9b59b6;
}
h2 {
color: orange;
}
li {
color: #0040FF;
}
h3
{
color: yellow;
}
p {
background: yellow;
}
input {
border: 4px solid red;
}
.a {
background: grey ;
}
#b {
font-size: 80px;
border: 2px solid rgb(100,200,300);
}
div p {
font-size: 20px;
}
input[type="text"]
{
background: gray;
}
div:nth-of-type(3) p {
background: pink;
}
div:nth-of-type(3) p:nth-of-type(2){
border: 5px solid white;
}
div:nth-of-type(3) em {
color: white;
font-size: 20px;
}
input:checked{
margin-left: 50px;
}
label{
text-transform: uppercase;
}
#b:first-letter{
color: green;
font-size: 100px;
}
h1:hover {
color: blue;
}
a:visited {
color:gray;
}
Screenshots:
I spent around 6 hours learning about CSS in online sources and implementing the web page.
References:
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://www.w3schools.com/cssref/default.asp
