Scribd
Upload
10 views

Css Notes

Uploaded by

shreyashkatiyar3243
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

Css Notes

Uploaded by

shreyashkatiyar3243
Copyright
© © All Rights Reserved
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