Css 101


Published on

css presentation

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css 101

  1. 1. CSS 101
  2. 2. What is CSS and how does it work? CSS stands for Cascading Style Sheets CSS uses Styles to define how to display HTML elements External Style Sheets are stored in CSS files HTML was intended to define the content of a document When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. To solve this problem, the World Wide Web Consortium (W3C) created CSS.
  3. 3. CSS syntax A CSS rule has two main parts: a selector, and one or more declarations. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.
  4. 4. Id Properties Id selector only effects a single unique element and is defined with a "#", the class selector is used to specify a style for a group of elements and is defined with a ".“ Use the id tag to apply a style to an element without affecting other like elements#para1{text-align:center;color:red;}<body><p id="para1">This paragraph is affected by the style</p><p>This paragraph is not affected by the style.</p>
  5. 5. Class Properties The class selector is used on  You can also specify that only several elements specific HTML elements should In the example below, all HTML be affected by a class. elements with class="center" will  In the example below, all p be center-aligned: elements with class="center" will.center be center-aligned:{ p.centertext-align:center; {} text-align:center; }<h1 class="center">Center- aligned heading</h1> <h1 class="center">This<p class="center">Center- heading will not be aligned paragraph.</p> affected</h1> <p class="center">This paragraph will be center- aligned.</p>
  6. 6. Internal and External Style SheetsExternal Style Sheet Internal Style Sheet An external style sheet is ideal  An internal style sheet should when the style is applied to be used when a single many pages. document has a unique style. you can change the look of an You define internal styles in entire Web site by changing the head section of an HTML one file. page, by using the <style> tag Each page must link to the  <head> style sheet using the <link> <style type="text/css"> tag. The <link> tag goes hr {color:blue;} inside the head section p {margin-left:10px;} Your style sheet should be body {background- saved with a .css extension image:url("image.jpeg");} </style> </head>
  7. 7. Inline Style Sheets Inline Styles An inline style mixes content with presentation and can create problems if errors arise, as both the html and css follow the same order, meaning an error in ccs or html leads to errors in both your html and css To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property <p style="color:red; float: right;">paragraph.</p>
  8. 8. Box model HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout The CSS box model is a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.
  9. 9. Width and Height of an Element When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
  10. 10. Float Property An element can be pushed to the left or right, allowing other elements to wrap around it Elements are floated horizontally, this means that an element can only be floated left or right, not up or down A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element The elements after the floating element will flow around it The elements before the floating element will not be affected img { float:right; }
  11. 11. Positioning Property The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an elements content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.
  12. 12.  Static Positioning  Fixed: HTML elements are positioned static by p.pos_fixed default. A static positioned element is always { positioned according to the normal flow of position:fixed; the page top:30px; Static positioned elements are not affected by right:5px; the top, bottom, left, and right properties } Fixed Positioning  Relative: An element with fixed position is positioned h2.pos_left relative to the browser window. { It will not move even if the window is scrolled position:relative; left:-20px; Relative Positioning } A relative positioned element is positioned h2.pos_right relative to its normal position { Absolute Positioning position:relative; An absolute position element is positioned left:20px; relative to the first parent element that has a } position other than static. If no such element  Absolute: is found, the containing block is <html> h2 { position:absolute; left:100px; top:150px; }
  13. 13. GroupingGrouping Selectors Grouped: To minimize the code, you can group selectors. h1,h2,p Separate each selector with a { comma color:green;Un-Grouped: h1 } { color:green; } h2 { color:green; } p { color:green; }
  14. 14. Nesting It is possible to apply a style for a selector within a selector In the example below, one style is specified for all p elements, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked“ p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; }
  15. 15. Navigation Bar Navigation Bar = List of Links A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense Next remove the bullets and padding: ul { list-style-type:none; margin:0; padding:0; }
  16. 16. HorizontalVertical  To create a horizontal nav bar you need to use either the float or inline properties Lists are naturally aligned  Inline: vertically ul {ul list-style-type:none; margin:0;{ padding:0; }list-style-type:none; limargin:0; { display:inline;padding:0; }  Float:} ul {a list-style-type:none; margin:0;{ padding:0;display:block; overflow:hidden; }width:60px; li {background-color:#dddddd; float:left; }}