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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to CSS Overview and Examples

Similar to CSS Overview and Examples (20)

Recently uploaded

Recently uploaded (20)

CSS Overview and Examples