CSS Overview and Examples

CSS
// Styling the web since 1994

• Goal of HTML is to have a clear separation between document
structure and document presentation and so CSS is born

CSSfying the web: Inline
<p style="color: red">text</p>
• Pros
• Quick addition of styles
• Full control of style at the element declaration viz. Style applied
inline cannot be altered by styles applied using other ways.
Example
• Cons
• Reusability/maintainability of styles is not possible since they are
declared inline to the element
• If the color red has to be applied to another <p> element, it has to
be re-declared using style attribute
• Deviating from the Goal of HTML documents’ content and
presentation

CSSfying the web: Embedded
<!DOCTYPE html>
<html>
<head>
<title>CSS
Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
• Pros
• All styles are at one place which
gives a quick understanding of
presentation of the application
• Cons
• Reusability is achieved but only
to an extent
• Lets consider an application
having multiple pages with
multiple forms.
Submit button in a form has to
look the same through out the
application.
Since embedded styles are
declared within a page, they have
to be duplicated for other pages
• Deviating from the goal of
content and presentation
separation. Grouping is
achieved yet interfering with
the content.

CSSfying the web: External
// style.css
p {
color: red;
}
a {
color: blue;
}
// html file – see link
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet"
href="style.css">
...
• Pros
• Grouping of styles
• Modularization
• Reusability of styles
• In sync with the goal
• Cons
• No cons for the scope of this session
;)

Selectors
• To style multiple elements at once, we can use selectors
• Mainly there are 3 different kinds of selectors
• Tag selectors – p, div, span, etc.
• Used for html tags or any custom tags
• Id selectors – #container, #footer, #header, etc.
• Used for any html elements with id defined as
<p id="footer">text</p>
• Class selectors – .nav-link, .submit-btn, .icon, etc.
• Used for any html elements with class defined as
<button class="submit-btn">Submit</button>
• Example.
p {
color: red;
}
#footer {
color: grey;
}
.submit-btn {
background-color: blue;
}

Selectors contd…
• Along with aforementioned selectors, there are other selectors which
are used in different purposes
• Attribute selectors
• a[target=‘_blank’]
• Pseudo selectors
• :first-child
• :hover
• :focus
• …
• Before & After selectors
• ::before
• ::after
• Descendant & Child selectors
• p span  for any span inside p tag
• p > span  for immediate child span inside p tag
• Adjacent (sibling) selectors
• p + div  when p and div are siblings
• Example.

Box Model
• Every element in HTML follows CSS box model
• Width of the element is
width of <content> + padding-left + padding-right + border-left-
width + border-right-width + margin-left + margin-right
• Similarly, height of the element is
height of <content> + padding-top + padding-bottom + border-top-
width + border-bottom-width + margin-top + margin-bottom

CSS Positioning
• Types
• Static
• Relative
• Absolute
• Fixed
• Example

CSS Specificity
• If two (or more) conflicting CSS rules point to the same element, there are some
basic rules that a browser follows to determine which one is most specific and
therefore wins out
• The actual specificity of a group of nested selectors takes some calculating:
• every ID selector (“#whatever”) a value of 100,
• every class selector(“.whatever”) a value of 10 and
• every HTML selector (“whatever”) a value of 1.
Then you add them all up for the specificity value
• Example:
• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors, 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector + id selector +
class selector + HTML selector, 1+100+10+1)
• If the selectors are the same then the last one will always take precedence
• Example
• Reference

CSS Examples
• Display
• Positioning
• Navigation
• Shape
• Shadow
• Animation, Animation-2
• Media-Queries
• Before & After
• Sphere

Best practices
• Modularize CSS into multiple files at design time if possible.
E.g., common CSS, module1 CSS, etc.
• Create own sub-language for CSS
• “footer-btn” class for a button which is in footer, etc.
• [HTML] Document content should convey semantic meaning
• Older browsers struggle with and get carried away with tables
and can seriously damage your accessibility.
• If you have tabular data, then, it should be arranged in HTML table
• Responsiveness
• Lengths
• Using media-queries for multiple screens
• https://github.com/bendc/frontend-guidelines
• http://caniuse.com/

References
• http://www.w3.org/Style/LieBos2e/history/Overview.html
• http://www.w3.org/TR/CSS21/selector.html%23id-selectors
• http://www.htmldog.com/guides/css/intermediate/specificity
• https://www.futurehosting.com/blog/web-design-basics-rem-
vs-em-vs-px-sizing-elements-in-css
• www.barelyfitz.com/screencast/html-training/css/positioning

CSS Overview and Examples

More Related Content

What's hot

Similar to CSS Overview and Examples

Recently uploaded

CSS Overview and Examples