Day 3
Local Setup STEPS:
- Create an account on CodeSandbox.io
www.codesandbox.io - Create an account on GitHub
www.github.com - Create an account WebMasters Portal
www.bewebmasters.com
HTML Attributes
Key-values added in opening tag.
Global
Enumerated
Boolean
can appear on any tag:
-
id,
class,
style
role
data etc.
no values required, any value given will be regarded as true:
-
disabled,
checked,
autocomplete
readonly etc.
a set of predefined values
-
type etc.
**Note:
-
Some attribute values are case sensitive, eg:
id, class
<div class="container">
- I'm <span class="name-span">
Yash Priyam
</span>
<p class="para1 info" id="one">
- I am a software developer.
</p>
<p class="para2 info" id="two">
- And I love basketball.
</p>
</div>
Working with id
and class
attributes:
id | class |
---|---|
takes only one value (string) | can take multiple space seperated values (string) |
Mainly used to target HTML tags for styling or other puropses.
CSS with HTML
CSS - Cascade Style Sheets.
Q1. Where can you write CSS?
Ans: Three places:
- in a .css file,
- in the
<style>
tag inside the .html file - in the style attribute on HTML tag.
Q2. How can you connect CSS with appropriate HTML?
Ans: Three ways:
- by class name of HTML tag
- by id of HTML tag
- by tag name of HTML tag
Steps for CSS
- Write CSS.
- Connect it with correct HTML
<!-- index.html -->
<div class="container">
- I'm <span class="name-span">
Yash Priyam
</span>
<p class="para1 info" id="one">
- I am a software developer.
</p>
<p class="para2 info" id="two">
- And I love basketball.
</p>
</div>
/* index.css */
.container {
/* class based styling */
}
.name-span {
/* class based styling */
}
span {
/* tag based styling */
}
p {
/* tag based styling */
}
.para1 {
/* class based styling */
}
.info {
/* class based styling */
}
#one {
/* id based styling */
}
#two {
/* id based styling */
}
Some generic CSS rules
width
height
background
border
padding
margin
font
color
display
-
position
- units (px, %, rem, em, vh, vw)etc
Selectors in CSS:
- universal selector (
*
) - class, id, and tag selector
- attribute selectors
- pseudo-classes
- pseudo-elements
Combinators in CSS:
combining selectors
- general, sibling, child,
- descendant, adjacent
- combined, grouped
- Flex
- Grids
Some generic CSS rules
width
, height
** can be set on any element,
fixes the dimensions,
remains as is across phone, desktop, tab
.container {
/* class based styling */
width: 100px;
height: 100px;
}
span {
/* tag based styling */
width: 100px;
height: 100px;
}
#one {
/* id based styling */
width: 100px;
height: 100px;
}
- Create a simple HTML document with the following HTML and add different
width
andheight
to each tag.
Use the inspector the see each tags default width, height and set width, height.
Questions (use a devbox from codesandbox.io)
<!-- index.html -->
<div class="container">
- I'm <span class="name-span">
Yash Priyam
</span>
<p class="para1 info" id="one">
- I am a software developer.
</p>
<p class="para2 info" id="two">
- And I love basketball.
</p>
</div>
.container {
/* class based styling */
width: 100px;
height: 100px;
}
span {
/* tag based styling */
width: 100px;
height: 100px;
}
#one {
/* id based styling */
width: 100px;
height: 100px;
}
Some generic CSS rules
background color:
.rebecca-purple {
background-color: gray;
}
.green {
background-color: hsl(180deg, 70%, 18%);
}
.red {
/* hsl(0deg, 70%, 18%);*/
background-color: #4e0e0e;
}
.yellow {
/*hsl(60deg, 70%, 80%);*/
background-color: rgb(240, 240, 168);
}
.blue {
/* hsl(210,70.6%,80%) */
background-color: rgb(65.9%, 80%, 94.1%);
}
background color:
on the entire background (page)
Some generic CSS rules
background image:
.demo {
width: 100px;
height: 100px;
background: url(https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg);
background-repeat: no-repeat;
/* Consistent styling for image */
background-size: 100%;
background-position: right 50%;
}
Some generic CSS rules
Complex
background image:
#demoBox {
aspect-ratio: 1/1;
border: 0.5px solid hsla(0deg, 0%, 60%, 0.5);
width: 100%;
border: 1px solid hsla(0deg, 0%, 40%, 0.25);
padding: 1rem;
background-image:
url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%;
background-origin: padding-box, border-box, content-box;
/* background:
* url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box,
* url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box,
* linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ; */
}
Some generic CSS rules
borders:
.demo {
width: 100px;
height: 100px;\
border-width: thin; /* thin, medium, thick, 10px */
border-style: solid; /* dotted, dashed, solid, double, groove, ridge, inset, outset */
border-color: yellow; /* any colour in any unit*/
/* border shorthand */
border: 1px solid red;
}
Some generic CSS rules
border radius:
.border {
width: 100px;
height: 100px;
/* border shorthand
border: 2px solid red;
*/
border-radius: 1em;
/*
border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
*/
/*
border-radius: 1em 2em 3em 4em;
*/
/*
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
*/
}
Question
-
Create an image card with rounded borders
-
Create an image card with rounded borders 3 elliptical and 1 rounded border like in the website.
Demo Day 3
By Yash Priyam
Demo Day 3
- 126