Scribd
Carica
38 visualizzazioni46 pagine

CSS Complete Notes

CSS complete notes in english . For the beginners. Really helpful for those who are new to learning css

Caricato da

pranayprincebeta
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
38 visualizzazioni46 pagine

CSS Complete Notes

CSS complete notes in english . For the beginners. Really helpful for those who are new to learning css

Caricato da

pranayprincebeta
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
CSS (CASCADING STYLE SHEET “CASCADING” means that styles can fall from one style sheet to another, enabling multiple style sheets to be used on one HTML document. Even the simplest htm! document may have tree or more style sheets associated with it including: The browser's style sheet. The user’s style sheet. DHTML (DYNAMIC HYPERTEXT MARKUP LANGUAGE, DHTML is a new and greta OU dogg has evolved to i lemand for eye- atching and mind- meet the incre: catching oe DHTML combine scripting languageéS=Wi table, frame, paragraph, bullet®@? sheets can bells rm lements size, color, position a ECS Plc (JavaScript and VI b d to"Manlpulate the web page’s elements so tha dyibs Gbgddd them can change in response to atadersiRedl ER EDUCATION & TRAINING CENTRE STANDS FOR CASCADING STYLE SHEET CSS describes how html elements are to be displayed on screen, paper, or in other media. © CSS saves a lot of work. It can control the layout of multiple web pages all at once. : Page 1 Three ways to insert css: 1. External style sheet 2. Internal style sheet 3. Inline style sheet External style sheet External CSS contains separate css file which contains only style Property with the help of tag attributes, CSS property written in a separate file with sSxestonieHandgpould be linked to the html document usiie"ink tag. This m ns that for each element, style & be id that will be applied across web pa, eg 6 h1{[Link]-size 26pt) stitle>external css | | External style | sheet | Internal or Embeddéd stylesheet This can be used when a single html document must be styled uniquely. The CSS rule set should be within the html file in the head section i.e. the CSS is embedded within the html file, External style sheet | Internal style sheet internal css | | |

Internal style sheet

| | Inline style sheet ur Inline CSS containggh@ 2S property ter dy section attached with éfément ipline css:-This kind of style is specified withi inline css | |

Inline style sheet

Page3 —— CSS Syntax and Selector » CSS Syntax and Selector 1. Element 1 2. Id selector 3. Class selector 4. Group sélect@r| i ) Aititon Sil L fr NTRE. a The clement selector belee 2 fe TE fe sagcified Clements Nantes TR AINIMes CENTRE 1, Element Selector p{ text-align: center; Color: red; } —— Pagea Id selector The id selector uses the id attribute of an html element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element. To select an element with a specific id, write a hash (#) character, followed by the id of the element. 2. 1D Selector #paral { text-align: center; color: red; \ Class selecto} select eleme: character, followed GyithkLiani? BS MAERRIESs. COMPUTER EDUCATION & xaswen attribute. To () center { text color: ) The css grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space. 7 Page 5 Group Selector hi, h2, p { text-align: center; color: red; Font-Attributes b: tes Font-family open ial, Cali - Al eriafifCambria, etc Font-size s Bs Font-weight Hariror Font-style Ha i cy ry Font-variant ca jor eu CENTRE | Hartron Skill Centre joint), % ercentage) stitle>font attributes

Hartron Skill Centre

SKILL CENTRE COM TeXEAtE Utes T! [ N & TRAINING CENTR Text-transform uppercase, rare capitalize Text-decoration underline, overline,line-through Text-align left, right, center, justify Text-indent 0.5in (inches) Letter-spacing px(pixels) Line-height 2.0,1.5, 1 etc Page7 Direction Word-spacing 4px, 3px, -Spx, -4px Text-shadow 2px etc, color(green) Neo ON s “then atte cttes ra ont tamay Bauhaus 83 fontsice 25pex: ransom upperraneextalgrentc soe Secoration underline. letter-spacing 2px. direction itr. word- spacng tpelerahadee tara e

Hartron Skill Centre

Border attributes

Top border

¢ Margin-left Margin-right Px, | Hartron Skill Centre | [Border attributes Top border “" Hartron evn eeeroc body(margin-top'S0px:margin- bottom 50px;margin-left:[Link]-right:25px) hiffont-tamily: Bauhaus 93;font- size:25pt;color:red; border-style:solid border. color: green:border-width:Spx;width:350px} Hartron Skill Centre ll Cent Page9 saree List-Attributes Unordered lists () - the list Items are marked with bullets Ordered lists () - the list tems are marked with numbers or letters Fae Re Ordered List Unordered List List-style-type up| decimal,square,circle, and . The div tag has a position attributes that can take one of the two values absolute or relative. font attributes
Hartron
Skill
Centre The padding properti#ark Ls€d Edearierate space around an element's contefit sin $id DE dnyEdo fined Aor depgThere are properties for se@ttifigetheliid d ding far GebhTsRIE of an element (top, right, bottom and left). a ee Padding-top %, px, pt Padding-bottom %, px, pt Padding-left %, px, pt Padding-right %, px, pt Page cr fettmi> font attributes-ititle>

Hartron Skill Centre

anc®CuBer ts, of ae The cursor property of CSS¥a ou'to specify the type of default, when a mM a pointer to hand. Cursor Htahelp, wait, e-east, move 4 ee ee oe Hartron Skill Centre

Hartron Skill Centre

 Animation An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use animation, you must first specify some key frames for the animation. Animation property mymove 5s_ infinite Animation Delay 3s, 2s etc Animation direction Seay len, chimi>
etntmi> Z-Index Z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position: absolute, position: relative, position: fixed or position: sticky) Page 13 chad dlile>2-indexcitite> Ght=Hartron Skill Centre Inline Block Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides. You'll have to declare display: inline-block in your CSS code. One common use for using inline-block is for creating navigation links horizontally, I’ve created a horizontal navigation menu with an orange background color. {shtml> |Hartron internal css [Skill Shenae: Centre

Hartron Skill Centre Hartron Skill Centre

S The float CSS PrépartP placEsharEdbeth chon tte heft or right side of its contaified, BlaWidd béxXiafid irfirieRefements to wrap around it. The elements is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning) Page 15 intemal css-/tite> style> formattwicth 200px height 100px | float right) sistyle> sthead>
element has a Th Set to auto , . Max-width: Using Taxavidgh fastead; Ethisgsituation, will improve the browser’s handling of small windows. This is important when making a site usable on small devices. This
element has a max-width of S00px, and margin set to auto. — Page —_____ 18 kehtm> tite>

This div element has a max- width of 500px, and margin set to auto.

This div element has a max- width of S00px, and margin set to auto.

[Ei cements wn of SO mr ao THO pR and mrgin oT nied clon hare nw color, offset (the distance between, n ths plurradius. shea TT, “C.\Users\Administrator\Desktop Page ae Audio The auto play attributes is a Boolean attribute, When Present, the audio will automatically start playing as soon as it can do so without stopping. EEE sstyle> body{background-color aqua} audio{margin-left:20px}

Play music herell

“audio sr="audio/yaari_tony_kakkar- 174168¢7-526c-4bbe-bb79- 79¢79224168a,.mp3" controls>Your browser Not supported audio please updatell body> The Hat Qn web page. To show a video in webpageluke GENTR Element. CNM DNITED CN Ate khtmi> stitle> poragrapl paragraph
paragraph 5 in the div

paragraph 1 in the div.

paragraph 2 in the div.

paragraph 4 in the div.

paragraph 6 in the div.

Child selector; T lel nts that are the children i Cart Ss oO ri The following examptpigqlegts allE AP ER Bents that are children of a eter MGSTER EDUCATION tena iene paaamee hae p{background-color-yellow) | * Shee Jeera in hed Sinvac> Siheae |psreroh in ae, sae fomaeet $n =p=paragraph 1 in the div.

paragraph 2 in the div.

paragraph 3 in the div

‘

paragrapn 4 Jn the div.

paragraph 5 in the div.

paragraph 6 in the div.

=intmi> — a Page 22 Adjacent Sibling Selector: The adjacent sibling selector selects all elements that are the adjacent siblings of specified elements. Sibling elements must have the same parent element, and “adjacent” means “immediately following”. The following example selects all

elements that are placed immediately after

elements. paragraph 1 in the div paragraph 4 in the div.

paragraph 1 In the div.

paragraph 2 in the div

paragraph 3 in the div.

paragraph 4 in the div.

KILL = The followingexanpalpsis qi eck alt Ee clementsythet are siblings of elements. TRAINING CENTRE fe Fe) Fer selects all a ENSRE™ nt. __ Page 23 5

paragraph 1 in the div.

paragraph 2 in the div.

paragraph 3 in the div.

some code

paragraph 4 in the div.

 CSS counters are Jike incremented they are used) ~ To work with CS: | po Colin targa, ” scour wins properties: ¢ Counte it CounteBin rements lue. | paragenphy 1 in the av paragenph 2 ia the div ppagraph'3 in the di. paragraph 4 in the div. variable'values can be I track, many times ¢ Content- inserf§ BeetateHebhTaRte © Countecl) Gr heb Brite € AfuB GibncAdds tM bhlue of a counter tla Remehtl MG CENTRE setannu 50:) countertannuy 24 __ Page oofew 2 Web Designing AutoCad PHP 1 Cor Draw Icon The simplest way to add an icon to your web page, is with an icon library, such as font awesome. Add the name of the specified icon class to any inline html element (like or ) All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc) Font Awesome Icons;, 08 YOU ty oe Hay, To use the FontAwWeso! ie gO [Link] , Sign in, and getag) he section of your web page: | Google Te SKILL CENTRE et ea Jc To use the cobae fi eke Rela g Nice the section> cf ink ff BSS. clouds/1> erial i=; ‘ ave hment The CSS overflow property sp ‘0 clip the content or to add ree ea rty ofan WwW is too big rer ered « ) to fit in the s The overflow propertyiaas the fotowingsyalue 5 © Visible- defatietREbUErRoW ie Hot chsHed the content renders outside RHé LM erie Bese MTR E e Hidden-The overflow is clipped, and the rest of the content will be invisible e Scroll- The overflows is clipped, and a scrollbar is added to see the rest of the content. e Auto- similar as scroll, but it adds scrollbars only when necessary. Page 27 a : 7 eT $s Visibl fi CSS overflow div(background-color aqua; wldth:200px, helght:200px,border:2px dotted black; overfiow:visibl The CSS overflow property specifies whether 10 ite sone loa eran shen cote! ofa slneat serge sive the eid ren ‘toa SP The CSS overflow property specifies whether to clip {he content or to add scrolbars when the content of an element is too big to fit in the specified areacip> nim CSS overtowet> The CSS overflow property specifies whether fo clp | the content or to add scrolibars when the content of an ‘element is 00 big to ft in the specified area
The CSS overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified areaTh CSS overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area
chead> r = rN oe Se urs coorane: wet: On: sesh ent reve cd as a ren, pine Seem gery smn wae Secor werent ce cee eS Eg ‘Spaced een pony rates became deren ne Sscrencea ion nme crated sate EsSceron cers reo e coerce ent atet Scrol CSS overflow | The C55 overflow prpeny specifies whether o clip the contet or | todd gerolbare when the content ofa element i 100 big to fit in ‘specified aren |CSS overflow The CSS overflow property specifies whether 1 clip the conten or | todd scrollbars when the content ofan element sto bi to fit a | the specified area Attr selector(Attribute selector) Types of Attribute selector: > Simple attribute > Value attribute > Tilled sign attribute > Pie attribute Pay 29 > Caret attribute > Dollar sign attribute > Star sign attribute Simple Attribute: © Itis possible to style HTML elements that have specific attribute or attribute values. css [attribute] selector * The [attribute] selegtat eS elements with a specified ape pectgound co © The foll ts with a “Kheartron SKILL CENTRE [CSS Attribute Selector | Click Me 1 ‘o> “ile Attrbute selector CSS Attribute Selector
wD heete"counter him" target="_blank" itles"Annu">Cliek Me | Click Me 3
| | — Star sign attribute: oselect p specified value. SKILL CENTRE COMPUTER EDUCATION Background-coldr:dofid® !N ING CENTRE { } © The following examples select those elements which title attribute is same and the given title should be there. No matter where the title locates. Page 35 CSS Attribute Selector ‘Attribute selector Click Me 2 Click Me 3 background-color aqua, | Click © a | | CSS Attribute Selector


‘counter htm!" >Click ‘counter html">Click Me 4 ‘Annu>Click Me Kelley Annu">Click | | | =intmi> I nce YOUR fay, ” 5 's smoothly, . Meee “auras WER EDUCATION © Transitiol a ING CENTRE © Transition-timing-t iL [ Famoe ‘width: 100px; height: 100px, ‘background-color: red; tansion-propery with transition 2s, transition-delay:ts; div hover ( wiatn: 300px;, } ‘Istyle> Transition
eee Specify the speed of the transition The transition-timing-function property specifies the speed curve of the transition effect. The-transition-timing-function property can have the following values: * Ease: Specifies a transition effect with a slow start, then fast, then end slowly (this is default). © Linear: a wee a nee 4 ffect poe the same speed BNO from start to Ease-in: seh it ee © Ease-out: Specifi s © Ease-in-ou andend. ~""*wg : . r(n,n,n,n): Cel ir own values ina | title> |

| | eins rere ave Fol Ms PEE A, stle> | i | Page 38 Transform The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. Rotate div.a{ Hetty width: 150px; height: 80px; ce Your ¢ background-color: yellow" transform:rotate(20 transform: rotatezodeeh }div.b { width:150px; height:80px; background-color: yel transform: A i transform: skewY(20deg): ky A's): ! a rtr transform: scaleY(1.5): ve SKILL CENT Cate COMPUTER EDU: Shoshotaecn> = & TRAINING
Hartron ! skewY(20deg): ">Skill

transform: scaleY(1.5):

Centre { width:150px; height:80px; background-col Page 39 CSS 2D Transforms ae eh transforms CSS transforms allow you to move, ri elements. With the CSS transform pro transformation methods: Otate, scale, and skew perty you can use the following 2D ¢ Translate() e Rotate() © Scalex() © ScaleY() an? your ‘He Br, * Scale() e SkewX() SkewY() Skew() Matrix() CSS 2D Or ro Nn NTRE _ COMPUTER EDUCATION Function 8) TRAINING ©$spiiptiqn matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values translate(x,y) Defines a 2D translation, moving the element ‘along the X- and the Y-axis translateX(n) Defines a 20 translation, moving the element along the X- axis L —. Page = ot 40 translateY(n) scale(x,y) | | scaleX(n) scaleY(n) rotate(ongle) Defines a 2D translation, moving the element along the y- axis Defines a 2D scale transformation, changing the elements width and height Defines a 2D scale transformation, changing the element's width ee Ulett, changing the element's e ge skew(x-angle, y-an skewX(angle) skewY(angle) l De S PZ HEME YS FR Bn along the X-axis 4B) TeRnds Db be Gradstdiritdtlo Riding the Y-axis, The translate() Method The translate() method moves an element from its current Position (according to the parameters given for the X-axis and the Y-axis). rae (The translate() Method: |i | { | [Svan 3009 | Regn eee | Dacharoun oer: yeow | border: 1px solid black, | — ] \ansior Wanslte(SOp.100p) | transform, translate(S0px, 100p), ) | ‘sht>The transiate() Methodeint> | Hartron Skil Centre ur The rotate() Methaga\° ¥ "She, “ boraer ip sobe black, > myaiv ‘ transform: ratate(20deg) transform rotate(20deg), : “au Se aiadaatait Sei la This lv clervant rotated clockwise 20 degrees, element (according to the parameters given for the width and height). Page EEE Eee 42 d ' The scaleX() Method The scalex() method increases or decreases tl element. The scaleY() Method The scaleY() method increases or decreases th element. Shen ‘The seale() Method he width of an e height of an TThis div element is two times f its original width, and three imes of its original height. “styie> The skew() Method | div( width: 300px; asa normal a alee height: 100px; background-color: yellow; border: 1px solid black; i ) foes anit Ironton skew(20deg,104eg) ie } a |

The skew() Method

|
| & TRAINING CENTRE The skewX() Method div{ transform: skewX(20deg); } The skewY() Method div { transform: skewY(20deg); } Page i _ The matrix() Method © The matrix() method combines all the 2D transform methods into one. © The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. e The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),transl ateY()) anc YOUr tay feet crim sae The matrix() Method “th: 300pr: eight: 100px: background-color: yellow: border: 1px solid black. ) mydiv( transform: matrix(1, -0.3, 0, 1, 0, 0); ) The matris() Method
This a normal div element. (

Potrebbero piacerti anche

<