CSS

CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheet.
CSS is used to design HTML tags.
CSS is a widely used language on the web.
CSS used for web designing. It helps the web designers to apply style on HTML tags.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External style-sheet are stored in CSS files.

CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:

Create Stunning Web site
Become a web designer
Control web
Learn other languages

CSS Syntax

A CSS rule-set consists of a selector and a declaration block

Selector indicates the HTML element you want to style It could be any tag like <h1>,<title>,<table> etc.

The declaration block contains one or more declarations separated by semicolons. For the above example,

there are two declarations:

color: red;
font-size: 12 px;

A Property is a type of attribute of HTML element.

Values are assigned to CSS properties.

p is a selector in CSS (it points to the HTML element you want to style: <p>

color is a property, and green is the property value
text-align is a property, and left is the property value

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style. There are several different types of selectors in CSS.

CSS Element Selector
CSS Id Selector
CSS Class Selector

CSS Element Selector

The element selector selects HTML elements based on the element name. You can select all <p>, <body>, <h1> ....elements on a page like below.

example:

CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.

CSS Class selector

The class selectors HTML elements with a specific class attribute. It is used with a period character. To selector elements with a specific class, write a period (.) character, followed by the name.

Note: A class name should not be started with a number.

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

Inline CSS
Internal CSS
External CSS

Inline CSS

we can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML documents.This method mitigates some advantages of style sheets.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Disadvantages of Inline CSS

You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not stored at a single place.
It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
Inline CSS does not provide browser cache advantages.

Inline styles are defined within the "style" attribute of the relevant element.

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page.

External CSS

The external style sheet is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates to change the look of the entire web site by changing just one file.
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
External styles are defined within the <link> element, inside the <head> section of an HTML page.

An external style sheet can be written in any text editor, and must be saved with a .css extension.The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks.

CSS Comments

CSS comments are generally written to explain your code. It is very helpful for the users who reads your code so that they can easily understand the code.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

that you can add comments to HTML source by using the  syntax

CSS Backgrounds

CSS background property is used to define the background effects on element.

There are 5 CSS background properties that affects the HTML elements

background-color
background-image
background-repeat
background-attachment
background-position

The background-color property specifies the background color of an element

Here, the <h1>, <p>, and <div> elements will have different background colors:

CSS background- image

The background-image property specifies an image to use as the background of an element.

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange

If the image image above only horizontally (background-repeat:repeat-x;)

Showing the background image only once is also specified by the background repeat property.

CSS background-position

The background-position property is used to specify the position of the background image.

You can set the following positions:

1. center

2. top

3. bottom

4. left

5. right

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed.

CSS Border

The CSS border is a shorthand property used to set the border on an element.
The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS border style

The border-style property is used to specify the border type which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

none - Defines no border
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the

border-color value

ridge - Defines a 3D ridged border. The effect depends on the

border- color value

inset - Defines a 3D inset border. The effect depends on the border-color

value

outset - Defines a 3D outset border. The effect depends on the

border- color value

CSS Border Width

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

Note: The border-width property is not used alone. It is always used with other border properties like "border-style" property to set the border first otherwise it will not work.

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

Note: If border-color is not set, it inherits the color of the element.

CSS Border - Shorthand Property

There are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-left
margin-bottom

All the margin properties can have the following values:

Example

Margin: Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

There are four types to specify the margin property.

You can use one of them.

margin: 50px 100px 150px 200px;
margin: 50px 100px 150px;
margin: 50px 100px;
margin 50px;

Example

margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

margin: 25px 50px;

top and bottom margins are 25px
right and left margins are 50px

margin: 25px;

all four margins are 25px

The inherit value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example

CSS Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. We can also change all properties at once by using shorthand padding property.

CSS Padding Properties

CSS Padding Value

Activity 1

What does CSS stand for?
What is the correct HTML for referring to an external style sheet?
Where in an HTML document is the correct place to refer to an external style
sheet?
How do you insert a comment in a CSS file?
Which property is used to change the background color?
What property would you use to create space between the element’s border

and inner content?

8. How do you change the left margin of an element?

9. What does the ID selector do?

References:

Tutorial created by P.A.D.Kaushalya.