It is week 3 of Jadu full stack fellowship and we have so far covered most of the HTML and CSS. I am loving the practical hands on experience. As for the Professional development classes, we worked on developing a growth mind-set in our life.
CSS:
Let’s discuss the technical aspects of this week’s class. We studied essentials and intermediate CSS. Some advanced concepts like Flexbox and their types were also discussed.
Overview:
CSS stands for Cascading Stylesheet. It is used to tell how HTML elements are to be displayed and styled on web pages. We can use same CSS to design multiple pages also. It saves a lot of time. We use .css extension for CSS files.
Syntax:
The syntax of CSS is as follows:
Selector {declaration}
H1 {property: value}
H1 here is the selector you want to style. Declaration block contains the declarations which include a property and its value separated by the colon.
Eg: p{
Color: blue;
Font-size: 12px;
}
This is a code of CSS indicating that the “p”(paragraph) of html must have blue colored text and 12px font size.
Selectors:
The selectors can be of three main types:
· CSS element selector can select any html element by its name. e.g. we use “h1” as selector if we want to change the style of header 1 element. H1{color: red;} It shows that the color of all the <h1> elements in the html should turn red.
· In html we can use CSS id selector. We first give special id to any element. E.g. <p id=”introduction”></p>. Now we can style the <p> with unique id and changes will be visible only in that specific id as we will use only it as selector. #introduction {font-size: 20px;} The font size will be increased this way of only the paragraph with id selector “introduction”.
· Another method is to use CSS Class Selectors. We give class to any element and then style it by using that class as a selector. For example, we can give class as <p = class=”bright”> to paragraphs we want in bright colors and then style it in html as follows: .bright{color: yellow}
Inline — in page — out of page:
· CSS can be mentioned in the html line, which holds most precedence. We use style attribute inside the html element tag for it. For example,
<p style=”color:blue”>This is blue colored line</p>
· Another way to style is include the CSS in page, in the header tag. We use <style> tag in the <head> element of html file. This way is usually not recommended. E.g.
<head>
<title>Website</title>
<style>
p
{
color: silver;
}
</style>
</head>
· Third way is to write CSS in a separate page outside the html page. For example, we can create style.css file and do CSS styling in it. We should then include this file in head element of our html.
<head>
<title>Website</title>
<link rel=”stylesheet” href=”./index.css” />
</head>
Other CSS:
body {
font-family: “Lato”, sans-serif;
background-color: grey;
}
//font family is used to describe font of body and background color of body is set to grey
h2 {
color: #ff00ff;
border: 2px solid black;
margin: auto;
}
//We set color of all <h2> elements to given hexacode. We have given a black border of 2px thickness to all <h2> elements. Margin auto means to horizontally center the element within its container.
p {
color: hsl(174, 72%, 56%);
background-color: rgb(255, 99, 71);
padding: 20px 10px 5px 1px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
Padding is used to create space around an element’s content, inside of any defined borders.
span {
color: yellow;
font-weight: 900;
text-transform: lowercase;
text-decoration: line-through;
font-size: 10px;
margin-left: auto;
display: block;
}
a[href=”https://google.com"],
a[href=”https://microsoft.com"]
{
color: green;
}
//change color of links
.input_place:focus {
font-size: 24px;
}
// change font size after focusing with cursor on it
.hover_me:visited {
color: lightpink;
}
I hope this helped. I’ll post a blog about the growth mind-set soon.
