Search topics, tutorials, questions and answers...

HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS

ADVERTISEMENTS
CSS BASIC

CSS Introduction
CSS Getting Started
CSS Syntax

CSS Syntax
CSS Selectors
CSS Color
 
CSS Background
CSS Fonts In this tutorial you will learn how to define CSS rules in your stylesheet.
CSS Text
CSS Links
Understanding CSS Syntax
CSS Lists
CSS Tables A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then applied to
the corresponding elements such as paragraphs, headings, etc. in the document.
CSS BOX MODEL
A CSS rule have two main parts, a selector and one or more declarations:
CSS Box Model
CSS Dimension
CSS Padding
CSS Border
CSS Margin

CSS ADVANCED

CSS Outline
CSS Cursors
The selector specifies which element or elements in the HTML page the CSS rule applies to.
CSS Overflow
CSS Units Whereas, the declarations within the block determines how the elements are formatted on a webpage.
CSS Visual Formatting Each declaration consists of a property and a value separated by a colon ( : ) and ending with a
CSS Display semicolon ( ; ), and the declaration groups are surrounded by curly braces {} .
CSS Visibility
The property is the style attribute you want to change; they could be font, color, background, etc. Each
CSS Position
property has a value, for example color property can have value either blue or #0000FF etc.
CSS Layers
CSS Float
CSS Alignment h1 {color:blue; text-align:center;}

CSS Pseudo-classes
CSS Pseudo-elements To make the CSS more readable, you can put one declaration on each line, like this:
CSS Media Types
CSS Sprites Example Try this code »
CSS Opacity
1 h1 {
CSS Attribute Selectors 2 color: blue;
CSS Validation 3 text-align: center;
4 }
CSS3 FEATURES

CSS3 Border In the example above h1 is a selector, color and text-align are the CSS properties, and the given
CSS3 Color blue and center are the corresponding values of these properties.
CSS3 Background
CSS3 Gradients Note: A CSS declaration always ends with a semicolon ";", and the declaration groups are


CSS3 Text Overflow
always surrounded by the curly brackets "{}".
CSS3 Drop Shadows
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transitions
Writing Comments in CSS
CSS3 Animations Comments are usually added with the purpose of making the source code easier to understand. It may
CSS3 Multi-Column Layouts help other developer (or you in the future when you edit the source code) to understand what you were
CSS3 Box Sizing trying to do with the CSS. Comments are significant to programmers but ignored by browsers.
CSS3 Flexbox
A CSS comment begins with /* , and ends with */ , as shown in the example below:
CSS3 Filters
CSS3 Media Queries
Example Try this code »
CSS3 Miscellaneous
1 /* This is a CSS comment */
CSS3 EXAMPLES 2 h1 {
3 color: blue;
CSS3 Practice Examples
4 text-align: center;
CSS3 FAQ's Answers 5 }
6 /* This is a multi-line CSS comment
CSS3 REFERENCE
7 that spans across more than one line */
CSS3 At-rules 8 p {
CSS3 Properties 9 font-size: 18px;
10 text-transform: uppercase;
CSS3 Animatable Properties
11 }
CSS3 Color Values
CSS3 Color Names
You can also comment out part of your CSS code for debugging purpose, as shown here:
CSS3 Web Safe Fonts
CSS3 Aural Properties Example Try this code »
More references
1 h1 {
2 color: blue;
3 text-align: center;
4 }
5 /*
6 p {
7 font-size: 18px;
8 text-transform: uppercase;
9 }
10 */

Case Sensitivity in CSS

Therefore, to be on safer side, you should assume that all components of CSS rules are case-sensitive.

You will learn about the various types of CSS selectors in the next chapter.

« PREVIOUS PAGE NEXT PAGE »

ADVERTISEMENTS
 Learn To Speak a Learn To Speak a
Language Language
Toucan Toucan

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updat

ABOUT US CONTACT INTERACTIVE TOOLS

Our Story Contact Us Font Awesome Icon Search Utility HTML Formatter

Terms of Use Report Error Title & Meta Length Calculator HTML Color Picker

Privacy Policy Advertise Bootstrap Button Generator SQL Playground

Bootstrap Icon Finder HTML Editor

Copyright © 2022 Tutorial Republic. All Rights Reserved. Shar