What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.CSS Syntax
1. A CSS rule-set consists of a selector and a declaration block:The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be centre-aligned, with a red text colour:
Example: TRY IT YOURSELF
2. If you have elements with the same style definitions. It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example: TRY IT YOURSELF
3. CSS Colours
Colours are specified using predefined colour names, or RGB, HEX, HSL, RGBA, HSLA values.
COLOUR NAMES
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Example: TRY IT YOURSELF
4. Background Colour
You can set the background colour for HTML elements:
Hello World
This will help define your website and give it clarity and focus. It is important to think about what colours go together and how you can make it look as nice as possible. Remember no one likes a jarring or messy looking website.
Please change the paragraph to say something you would like to say about he website you will create.
Example: TRY IT YOURSELF
5. Border Colour
You can set the colour of borders:
Hello World
Hello World
Hello World
Try different colours than those suggested. Example: TRY IT YOURSELF
6. CSS Backgrounds
The CSS background properties are used to define the background effects for elements.
CSS background properties:- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS Colour Background:
The
The background colour of a page is set like this:
Example: TRY IT YOURSELF
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example: TRY IT YOURSELF
Example: TRY IT YOURSELF
background-color
property specifies the background colour of an element.The background colour of a page is set like this:
Example: TRY IT YOURSELF
Background Image - Repeat Horizontally or Vertically
By default, thebackground-image
property repeats an image both horizontally and vertically.Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example: TRY IT YOURSELF
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use thebackground-attachment
property:Example: TRY IT YOURSELF
No comments:
Post a Comment