Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS - Basics

661 views

Published on

Basics of CSS
This content is useful for learning basics of CSS for any HTML developer.

Published in: Education, Technology
  • Be the first to comment

CSS - Basics

  1. 1. Cascading Style Sheet
  2. 2. • What is CSS?• Syntax• Applying CSS• Commonly used CSS properties• Grouping and Nesting• Floats in Page Layouting• @ rules• Q&AAgenda
  3. 3. What is CSS?CSS, or Cascading Styles Sheets, is a wayto style and present HTML.Cascading Style Sheets, or CSS, is therecommended way to control thepresentation layer in a web document.The main advantage of CSS overpresentational HTML markup is that thestyling can be kept entirely separate fromthe content.CSS
  4. 4. A style sheet consists of a list of rules. Each rule or rule-set consists of one ormore selectors, and a declaration block.selector [, selector2, ...] [:pseudo-class]{property: value;[property2: value2; ...]}/* comment */Syntax
  5. 5. There are three ways to apply CSS to HTML:In-line – written directly inside the tagInternal – embedded into an HTML document.External – written in separate files and then linked to in the HTML<p style="color: red">text</p><style>p {color: red; }</style><link rel="stylesheet" href="style.css">Applying CSS
  6. 6. Selectors are the names given to styles in internal and external style sheets.The property is the style attribute you want to change and Values are assignedto propertiesp{color: red;}selectorproperty valueSelectors, Properties & Values
  7. 7. General Units used in values:px (such as font-size: 12px) is the unit for pixels.em (such as font-size: 2em) is the unit for the calculated size of a font. So“2em”, for example, is two times the current font size.pt (such as font-size: 12pt) is the unit for points, typically used in printedmedia.% (such as width: 80%)Other units include pc(picas), cm, mm and in(inches)Note: When a value is zero, there is no need to state a unit. For e.g. to specifyno border, it would be border: 0.Units
  8. 8. Colors in CSS can take the form of:name - E.g.: color:redRGB value – E.g.: color: rgb(255,0,0)RGBA value - E.g.: color: rgba(255,0,0,1)Hexa value - E.g.: color: #ff0000 or color:#f00HSL value - E.g.: color: hsl(0,100%,50%)HSLA value - E.g.: color: hsla(0,100%,50%,0.3)Colors can be applied using the color or background-color propertyColors
  9. 9. Gradients lets you display smooth transitions between two or more specifiedcolorsBrowsers support two types of gradients - linear and radialLinear Gradientbackground: linear-gradient(to bottom right, blue, white);background: linear-gradient(70deg, black, white);background: linear-gradient(to bottom, blue, white 80%, orange);background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://foo.com/image.jpg);Colors - Gradients
  10. 10. Radial Gradientbackground: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);Repeating gradients used to automatically repeat the color stops.background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);.gradient{width: auto; height: 500px; margin: 0 50px;background: -webkit-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: -moz-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: -o-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background-size: 100% 21px;}.gradient:before{content: ""; display: inline-block; height: 500px; width: 4px;border-left: 4px double #FCA1A1; position: relative; left: 30px;}Colors – Gradients (Contd…)
  11. 11. Text in CSS can be manipulated using the following properties:family - E.g.: font-family: Arial, Helvetica, sans-serifsize – E.g.: font-size:16pxstyle - E.g.: font-style:italic; (normal, italic, oblique, inherit)weight - E.g.: font-weight:bold; (normal, bold, bolder, lighter, 100…900, inherit)variant - E.g.: font-variant:small-caps; (normal, inherit)All in one order – “<font-style>< font-variant ><font-weight>< font-size/line-height>< font-family>”E.g.: font: italic bold 12px/30px Georgia, serif;Other Text properties that can be referred to –Text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-align, text-indent etc…Text
  12. 12. Backgrounds are a core part of CSS, that can be used to add color or images toa page or element. It can be manipulated using the following properties:background-color - E.g.: background-color :rgba(0,0,255,1)background-image – E.g.: background-image: url(image.jpg);background-position - E.g.: background-position: 75px 0; (left, center, right, top,center, bottom)background-repeat - E.g.: background-repeat: repeat; (repeat-x, repeat-y,no-repeat, inherit)background-attachment - E.g.: background-attachment: scroll; (scroll, fixed,inherit)All in one order – background: <color> <image> <position> <attachment><repeat>E.g.: background: transparent url(image.jpg) 50% 0 scroll repeat-y;Background
  13. 13. Box-shadow allows casting a drop shadow from the frame of almost anyelement. It takes the form as below:box-shadow: none | inset <offset-x> <offset-y> <blur-radius><spread-radius> <color>.shadow{box-shadow: 4px 4px 4px 5px #f00;}Shadows
  14. 14. Margin and Padding are the two most commonly used properties for spacing-out elements.Margin is the space outside something, whereas padding is the space insidesomething.Margin and Padding
  15. 15. p{margin: 20% auto;padding: 10px 20px 40px 5px;}Example for margin and padding in shorthanddiv{margin-top:10px;margin-right:10px;margin-bottom: 5px;margin-left: 3px;padding-left: 30px;}Another example with expanded forms:Margin and Padding(Contd…)
  16. 16. Used to set borders around an element. The properties that can be set areWidth - E.g.: border-width: 12px;Style - E.g.: border-style: solid; (none, hidden, dotted, dashed, solid, double groove,ridge, inset, outset, inherit)Color - E.g.: border-color: #ff0000;Radius - E.g.: border-radius:5px;Or shorthanddiv{border :12px dashed #ff0000;border-radius:5px 2px 3px 0;}Borders
  17. 17. class and ID selectors can be defined in order to customize the selectors i.e.you can have the same HTML element, but present it differently dependingon its class or ID.A class selector is a name preceded by a full stop (“.”) and an ID selector isa name preceded by a hash character (“#”).The difference between an ID and a class is that an ID can be used toidentify one element, whereas a class can be used to identify more than one.#top{background-color: #ccc;padding: 20px}.intro{color: red;font-weight: bold;}Class and ID Selectors
  18. 18. Grouping is giving the same properties to a number of selectors withouthaving to repeat them. You can simply separate selectors with commas inone line and apply the same properties to all of them.h2{color: red;}.secondClass{color: red;}.thirdClass{color: red;}h2, .secondClass, .thirdClass{color: red;}Can just be written asGrouping
  19. 19. Nesting is specifying properties to selectors within other selectors.This removes the need for classes or IDs on the p and h1 tags if it is appliedto HTML that looks something like this:#top {background-color: #ccc; padding: 1em;}#top h1 {color: #ff0;}#top p {color: red; font-weight: bold;}<div id="top"><h1>Sport</h1><p>Sport refers to a competitive physical activity.</p><p>"Sport" comes from the Old French desport meaning "leisure“.</p></div>SportSport refers to a competitive physical activity.“Sport” comes from the OldFrench desport meaning “leisure”.CSSOutput:Nesting
  20. 20. Pseudo classes are added to selectors to specify a state or relation to theselector. They are written simply with a colon in between the selector and thepseudo class.E.g. In case of Links -a:link {color:#ff0; text-decoration:none;}a:hover {color:#f00; text-decoration:underline;}a:visited {color:#00f; text-decoration:none;}a:active {color:#ccc; text-decoration:underline;}Other pseudo classes that can be referred to are first-child,last-child, focus, first-letter, before, after etc…Pseudo Classes
  21. 21. Float is a CSS positioning property and can be used to create entire web layoutsClearing FloatsFloats when used need to be cleared and that is done using the clear propertyE.g.: clear:both;Float not cleared Float clearedPage Layouts - Floats
  22. 22. At-rules are clever, powerful little huggers that encapsulate a bunch of CSSrules and apply them to something specific. They can be used to import otherCSS files, apply CSS to a particular media, or embed uncommon fonts.Importing@import rule is used to bolt another stylesheet onto your existing one.This must be placed at the top of a stylesheet, before any other rules.E.g.: @import url(morestyles.css);At- Rules
  23. 23. Targeting media types@media can be used to apply styles to a specific media, such as print.E.g.: @media screen and (max-width: 1000px){#content { width: 100% }}@media screen and (max-width: 800px){#nav { float: none }}@media screen and (max-width: 600px){#content aside { float: none; display: block; }}Note that if, for example, a layout area was 600 pixels wide or less, all three of thesewould be applied (because it would be less than or equal to 1000px, 800px, and 600px).At- Rules(Contd…)
  24. 24. Embedding fonts@font-face is used for embedding fonts in a web page so that a typeface can beused even if it isn’t sitting on the user’s computer.E.g.: @font-face{font-family: “Futura”;src: url(Futura.woff);}OR@font-face{font-family: “Futura”;src: local(“Futura”), local(“Futura LT”), url(“Futura.woff”);font-weight: 400;font-style: normal;}At- Rules(Contd…)
  25. 25. EndThank You !

×