A Quick Guide To CSS3 - Introduction, Wordwrap and Backgrounds



CSS is an acronym for Cascading Style Sheet.

Cascading  - Declare once use anywhere. Cascade the styling rules to any level, from parent to child level elements.
Style Sheet - Defines style rules.

CSS3 is the extended version of CSS2. CSS3 has arrived with so many new features and enhancements can make any webpage a gem with fewer efforts.

We will cover here CSS selector syntax, properties, browser support, and useful information about its all controls. Its a quick guide so we will cover a more crisp cheat sheet kind of guide rather than the detailed one. To know more about CSS from basic please follow the link -
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS3 Word Wrap 

Word Wrap is a property of CSS3 that is used to break the words and wrap into next line.

Syntax
Word-wrap : normal | break-word | initial | inherit

Normal - break the line at normal word break points.
Break-word - unbreakable word breaks into a new line.
Initial - used to set a default value.
Inherit - used to take computed value.

Example
p {
    width: 100px;
    background: #70ea70;
    word-wrap: break-word;
}



CSS3 Backgrounds 

These are used to set the various properties of the background of the webpage.

Property Value options
background-image URL | none
background-attachment scroll | fixed
background-image URL | none
background-color color | transparent
background-size length | % | auto | cover | contain
background-position top right | top left | top center | bottom left | center | center right and so on
background-repeat repeat | repeat-x | repeat-y | no-repeat

Example
#back {
 width: 300px; 
 height: 200px;
 background-position: center bottom, left top;
 background-repeat: no-repeat;
 background-color: #90ee90;
}

Next : CSS 3 Borders, Fonts and Text

No comments :

Post a Comment

Comment Here