Scribd
Upload
10 views3 pages

Css Notes

Uploaded by

shreyashkatiyar3243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views3 pages

Css Notes

Uploaded by

shreyashkatiyar3243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

css notes

<style>
button{ to give button attributes; can use transition element for animations}
button:active{ things after clicking}
button:hover{ bringing cursor on the button}
a:visited{ changing link props when already visited}
if a class is defined by name "substance" for example
.substance:hover/active{ will give attributes to the substance components}
you can also define a shadow attribute
box-shadow: px px px (color); here third px is for blur and first 2 are x y cords.
rgba() a value is the opacity of the color
</style>
<style>(font)
font-family:Arial;
font-weight:bold;
font-style:italic;
width:px;
line-height:px;
text-decoration:underline;
</style>
Text Elements
Java is the <strong>best</strong> language.->bold element
Java is the <u>best</u> language.->underlined element
Java is the <span class="">best</span> language.->basic element
<img src="" alt=""> src=link alt=alternate text if img not loading
<figure> used to include self contained info </figure>
<figcaption> used inside figure</figcaption>
<em>add emphasis to text, italics</em>
<ul><li>add list items</li></ul> ul for unordered list ol for 1,2,3..
<form action="url"> <input type='text' //opt name=""></form> to create an input
taker which sends input to the url.
<input type="" placeholder=""> text showing until input given
<input type="password/email/text/submit/file/number/date">
<input required> <input minlength=8>
<label for=""><input id=""></label>
<input type="radio"> mcq option button
<label><input></label> ensures clicking the text also clicks the radio button
<input value=""> specifies where the input should go
<fieldset></fieldset> boxe for input elements etc together which are contained
therefore for user entry elements first create fieldsets
<legend></legend > add captions to fieldset
input type=checkbox
also you can add id and name to input tags
<input checked> already ticks the option
inside head element:
<link rel="stylesheets" href="zyx.css"> to link css code to html file
<meta name="viewport" content="width=device-width,initial-scale=1">
inside body elemnt for designing
.class{
font-family: impact,serif; //secondary font serif is impact unavailable
}
for adding more than one class to same div
<div class="aclass bclass">
padding/margin: 10px 20px; 10px-top&bottom 20px-right&left
<form action="url" method=post> sends input to url (method and action both are imp)
<label> inserts text inside fieldsets
<input pattern="[a-z0-5]{8,}"> min. length of input 8 and combination of lowercase
and numbers 0-5
label{
display:block; displays different label texts in different lines
give same name attribute to two different radio inputs to make them select one at a
time
<input max= min=>
<select>
<options></option>
</select>
<option value=""> if there is some value 1,2,3,4,etc then only form is submitted
<textarea rows= cols=> multiline input text
p/fieldset/a/anyclass:last-of-type{} as it says
vertical-align:middle;
input [type=""]{}
{box-shadow:px px px px color;}
{filter:blur(px);}
in body you can also use a header element
*{} global selector for css
{box-sizing:border-box/content-box;}
{display:flex;
flex-direction:row/column/row reverse/column-reverse;
flex-wrap:wrap/nowrap;
justify-content:center;
align-items:center;
gap:px;}
nav>p>a>input etc to point to certain specific elements
.class input/a/p for classes
.class label, .class p{}
display:inline-block; for setting elements into a single line;
text written here <span> is used</span>
now using flex and justify-content here will effect text inside span
.class{
list-style:none; removes bullets of ul list elements
}
p:not(.class) to exclude some class from the elements
<input type=submit value=send> submit button with text send
<a href="#someplace">Text</a>
<section/input/etc aria-labelledby="someplace">This place</> clicking the text link
will bring user here
<table>
<caption></caption>
<thead><td></td>
<th></th>
</thead>
<tbody>
<th></th>
<td></td>
</tbody>
</table>
The CSS clip property is used to define the visible portions of an element. Set the
span[class~="sr-only"] selector to have a clip property of rect(1px, 1px, 1px,
1px).
The clip-path property determines the shape the clip property should take. Set the
clip-path property to the value of inset(50%), forming the clip-path into a
rectangle within the element.
To prevent the text content from overflowing, give your span[class~="sr-only"]
selector an overflow property set to hidden and a white-space property set to
nowrap.

position:sticky;
span[class~="sr-only"]

You might also like