CSS Examples: In this page includes CSS Reference Examples, CSS Code Examples, CSS box model Example, CSS Selectors Examples, CSS Media Examples, etc. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
CSS Example 1: CSS Box Model Tutorial and CSS Box Model Reference
CSS Box Model Tutorial And CSS Box Model Reference- It consists of Content, Padding, Border, and Margin. The example below describe the CSS box model.
Content – The content part of the box, where text and images appear.
Padding – Clears an area around the content part. The padding is transparent.
Border – A border that goes around the padding and content part.
Margin – Clears an area outside the border. The margin is transparent.
The CSS box model allows us to add a border around elements, and to define space between elements.
Example 2: CSS Selector Example Tutorial and CSS Selector Reference
CSS Selector: helps to select or find an element for manipulation in html document.
Some commonly used selector types-
Element selector : To select an element using element name.
Example : use of Css Element Selectors
body {
background-color: #bbb; text-align: left;
}
h1 {
color: #eee; text-align: left;
}
p {
font-family: “Arial”; font-size: 20px;
}
body, h1 and p are element selectors.
-
Id Selector: To select an element using specific Id.
Example : use of Css ID Selectors
#body-bg {
background-color: #bbb; text-align: left;
}
#heading {
color: #eee; text-align: left;
}
#content-paragraph {
font-family: “Arial”; font-size: 20px;
}
#body-bg, #heading and #content-paragraph are ID selectors.
-
Class : To select an element using Class name of an element.
Example : use of Css Class Selectors
.body-bg {
background-color: #bbb; text-align: left;
}
.heading {
color: #eee; text-align: left;
}
.content-paragraph {
font-family: “Arial”; font-size: 20px;
}
.body-bg, .heading and .content-paragraph are Class selectors.
-
Type : To select an element by type (like input type text or submit.)
Example : use of Css Input Type Selectors
input[type=”text”] {
background-color: #bbb; text-align: left;
}
input[type=”submit”] {
color: #eee; text-align: center;
}
input[type=”reset”] {
font-family: “Arial”; font-size: 20px;
}
input[type=”text”], input[type=”submit”] and input[type=”reset”] are input type selectors.
-
Attribute Selector : To select an element by attributes.
Example : use of Css Attribute Selectors
a[target] {
background-color: #bbb; text-align: left;
}
a[target] Attribute selectors.
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.