CSS Complete Notes

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

Caricato da

pranayprincebeta

Formati disponibili

Scarica in formato PDF o leggi online su Scribd

Il 0% ha trovato utile questo documento (0 voti)

38 visualizzazioni

CSS Complete Notes

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

Caricato da

pranayprincebeta

Formati disponibili

Scarica in formato PDF o leggi online su Scribd

Sei sulla pagina 1/ 46

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 1Three 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{color-purple.font-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; } —— PageaId 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 5Group 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 Page7Direction 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 <font attnibutes <Mttle> <style> body(margin-top'S0px:margin- bottom 50px;margin-left:25px.margin-right:25px) hiffont-tamily: Bauhaus 93;font- size:25pt;color:red; border-style:solid border. color: green:border-width:Spx;width:350px} </style> <inead> <body> <ht>Hartron Skill Centre</n1> </body> <intmi> ll Cent Page9 sareeList-Attributes Unordered lists (<ul>) - the list Items are marked with bullets Ordered lists (<ol>) - the list tems are marked with numbers or letters Fae Re Ordered List Unordered List List-style-type up| decimal,square,circle, <nim= © @ Shenae <te>fontattibytes</tie> |.1. aermies cates Strawberry oXfont-tamily-Algerian:font-size:25px:color-redlist-style- | Blueberry pe Raspberry 2. crTRUS pe lemen 2 Orange | + Grapes <i>Blueberry <li>Raspberry su ‘<i>Citrus, <li> Strawberry Sion Sym ae 7 Sap arion Tag (div ta A web page can be divided into segments or division called div. Each segment starts with <div> and </div>. The div tag has a position attributes that can take one of the two values absolute or relative. font attributes<stitle> <Inead> <body> <div style="background- color-red,color-green;tont- size 24px position absolute top: 150px: left: 300px width. 100px:text-align.center">Hartron</div> <div style="background- color:blue color. grey; font- ‘ize-24px position absolute ;top: 150px;left:420px width: 100px:text-align:center">Skill</div> <div style="background- color purple:colorwnite:font- Size :24px.position absolute top:150pxlet$40px; ‘width: 100px:text-align:center’>Centre</aiv> <Ioody> <intm|> 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 crfettmi> <head> <title>font attributes-ititle> <style> p(border-bottom:5px solid blue, width: 300px;padding-top: 100px;padding- bottom: 100px;padding-left: 100px,padding- right:100px,background-color: grey; font- size:25px) </style> <nead> <body> <p>Hartron Skill Centre</p> </body> <Intml> 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 <htmi> 4 ee ee oe <head> Hartron Skill Centre <title>

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> <nitle> <style> iv{width:1 00px height: 100px;background:blue;position:absolute, “webkit-animation:mymove 5s infinite; animation: mymove 5s infinite; ) @-webkit-keyframes mymove( tromeftOpx;) tofleR:200px;) } @keytrames mymovet trom(len:Opx:) tofleft:200px:) </style> <Mnead> <body> <div></div> <foody> 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<tt> chad dlile>2-indexcitite> <style> bodyttont-tanily-arat) divemain(margin 0 auto.) ‘omoneigt 1009s 100pcolorskybiesborder Ipx sold Diack, postion absoute) onesbackaround-color redzndex 0:6M 20px:top 40px) ‘wotbackground-color yellow Tnden-Tlattadpe ioe pe) three(background-color greenizindew 2ieft Shes ae oe ox) touroachgroundcolor orange.z.inden Stel oprice Weoead Sgyaateackground-color black:z-index lef 40px. ton oeOpx) <istyle><ead> <body> <div id="main'> -ommon one">div#1 </div> -ommon two">divi#2</div> Ommon three’>dival3</div> ‘Ommon four">diviea </div> ‘ommon five">dive’S<idiv> 'Ommon six->civiS~/divs ommon Seven">divi7cidiv> | <idiv><roay> <Intmis ee. gant role in style Pan> is used to set the boundprigg of the ges Ayling specifications. <html> <head> Hartron skiil Centre ‘stitle>internal css 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 15intemal 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 —_____ 18kehtm> 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 aeAudio 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