Art of css


Published on

Basics to learning CSS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Art of css

  2. 2. The Art of CSS CSS allows separation of the HTML content from its styling. It is responsible for the presentation(text formatting,colors,fonts,borders etc). Applying CSS Can be applied either: i) internally- inline or within the same page holding the HTML content <head> <style type=”text/css”> .....styles </style> </head> ii) Externally- defined in a different file and then called withing the page holding the HTML content.(called in the head of the page) <head> <link rel=”stylesheet” type=”text/css” href=”path to the css file” /> OR use @import method <style type=”text/css”>@import url(path to the css file”)</style> </head> Reasons for using external CSS: a) easier maintenance b) reduced file size c) reduced bandwidth d) improved flexibility CSS Syntax A style takes 3 sections or parts:
  3. 3. 1. Single selector selector {property:value} selector- element you are styling property-property title value-style applying to the property. NB: properties applying to one element are separated using semi-colons(;) selector {property1:value1;property2:value2...;propertyn:valuen} 2. Multiple selectors NB: several elements having same styling are separated using a comma(,). Selector1,selector2...,selectorn{property:value} 3.Comment Tags Unlike HTML which uses <!-- comments -->, CSS uses the following tags for comments: /* comments */ Nb:Can have single line or multiple line comments 4. CSS Classes Elements that require styling can be grouped together depending on the user's design needs.They are grouped into classes.Represented with the use of a dot(.) Example <p class=”kenya”>Is my country </p> <p class=”kenya”>Is a great nation</p> can be styled as: .kenya{property:value}
  4. 4. 5. CSS IDs similar to classes EXCEPT once used can be re-declared. Example <p id=”kenya”>Is my country</p> <p id=”uganda”>Has bananas</p> can be styled as: #kenya{property:value} #uganda{property:value} 6.CSS Margins Margin declares the space around an element. It can take four (4) sets: top,left,bottom and right. The value of the property can be : - length(px) - percentage - or auto It can be declared as a single property as follows: margin: 5px 5px 5px 5px; meaning: 5px top, 5px right, 5px bottom and 5px left. NB: If one set once, then it applies to all sides; margin: 5px; NB: 2 values means application to opposing sides 1. margin: 5px 5px; 1st 5px to top and right sides 2nd 5px to bottom and left 2. margin: 5px 5px 5px;
  5. 5. 1st 5px to top 2nd 5px to right and bottom 3rd 5px to left side 3. If you do not declare the margin of an element. Its value is set to zero automatically 4.Negative values can also be used. a) negative left and top move the elements left or top respectively. b) negative right and bottom make their siblings move to the left and top respectively. CSS Padding Padding- distance between the border of an element and the content within the element. NB:most properties are similar to those of margin,but it does not have auto property and it uses 2values(length-px and percentage). Padding: top right bottom right; padding : 5px 5px 5px 5px; CSS Text Properties a) Text Color color: value; value can be : i) color name eg. Color: green; ii) hexadecimal eg. Color: #000; iii) RGB eg. Rgb(0,0,0)
  6. 6. b) Text Align text-align: value; Value can be: right, left,center or justify c) Text-Decoration text-decoration: value; Value can be: none, underline, overline, line through or blink. d) Text-Transform text-transform: value; Value can be: none, capitalize or lowercase e) Word Spacing word-spacing: value; Value can be: normal or length(px) CSS Font Properties a) Font family font-family:value; value can be: family name(e.g. Verdana) or generic name b) Font-Size font-size: value; Value can be: percentage,length(px),small,large,medium,smaller,larger etc. c) Font-Style font-style: value; Value can be: normal, italic or oblique
  7. 7. d) Font-Weight font-weight: value; Value can be: normal,bold,100-900 CSS Links Pseudo classes Pseudo classes are applied to the links(anchors). Can be: link,visited,hover,focus or active. a: a: a: a: a: link{property:value} visited{property:value} hover{property:value} focus{property:value} active{property:value} CSS Backgrounds The background of an element can be style using CSS. a) Background-color background-color: value; value can be : color name, hexadecimal, rgb or just transparent. b) Background-Image background-image: value; value can be: url(to the image) or none. c) Background-position background-position: value; value can be: top left, top center, top right etc.
  8. 8. d) Background-repeat You can set the image to repeat either horizontally(x) or vertically(y). background-repeat: value; value can be: repeat, repeat-x or repeat-y. CSS Borders a) Border-Color border-color: value; value can be : color name,hexadecimal or RGB format. b) Border-Style border-style: value; value can be: solid, none,dotted,double,hidden etc. c) Border-Width border-width: value; value can be : length(px), thin, medium or thick. d) Border-Bottom border-bottom: value; value can be: i) border-bottom-color: value; ii)border-bottom-style:value;
  9. 9. iii)border-bottom-width:value; NB: These values can be applied to border-top,border-left and border-right. CSS Lists Can be applied to both ordered and unordered lists a) List style image images can be used to represent bullets and other orderings. List-style-image: url(path to image) b) List style position The type of bullets used can also be changed. List-style-position: value; value can be: disc,circle,square,decimal,none etc. CSS Width and Height a) Height height: value; value can be: auto,length(px) or percentage. b) Width width: value; CSS Classifications a) Clear It is used to control the floated elements within a webpage. clear: value; value can be: none,both, left and none.
  10. 10. None- means floating elements can appear to any side of the element. Both-means floated elements cannot appear to the left or the right. Left-means floated elements cannot appear on the left. Right- means floated elements cannot appear on the right. b) Display It controls how an element is displayed on the webpage. Display: value; Value can be: block,inline,list-item and none. Block- creates a <br/> before and after the element. inline- no <br/> list-item- creates a <br/> before and after the element and adds a list item none- element is not displayed on the page. c) Float This controls the display position of the element on the block of a webpage. Float: value; value can be: left,right or none. Left: displays element to the left. Right: displays element to the right. None: no change in the display.(element position not affected) d) Overflow This controls the content if it exceeds it allocated boundary.
  11. 11. Overflow: value; Value can be: auto, hidden,visible or scroll. CSS positioning It changes how elements are positioned on the webpage. Position: value; value can be: static, relative, absolute or fixed. Static- default. Relative- it offsets content to the righ,top,bottom or left which may overlap other content on the page and maintains the normal flow of the webpage. Absolute-this removes the element from the normal flow of the webpage and places the element to the top left of the webpage or its parent element.If it does not have a parent, then it is placed at the top left of the browser. Fixed- just like static, but wont scroll even when other content on the page scrolls.