Cascading Style Sheet (Css)

  

CSS Notes

1. Introduction to CSS

1.1 What is CSS?
  • CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML.
  • It controls the layout, colors, fonts, and spacing of web pages.
1.2 How to Use CSS

CSS can be applied in three different ways:

  1. Inline CSS: Defined within the HTML elements using the style attribute.
  2. Internal CSS: Defined in the <style> tag within the <head> section of an HTML document.
  3. External CSS: Defined in an external .css file, linked to the HTML document using the <link> tag.

2. CSS Syntax

2.1 CSS Rule Structure

A CSS rule consists of two parts:

  1. Selector: The HTML element you want to style.
  2. Declaration Block: The property-value pairs that define how the element will be styled.

selector {
    property: value;
}

Example:

body {
    background-color: lightblue;
    color: black;
}

3. Selectors

3.1 Element Selector

Applies styles to all elements of a specific type.

p {
    font-size: 16px;
    color: blue;
}
3.2 ID Selector

Applies styles to an element with a specific id. The id selector is prefixed with #.

#header {
    font-size: 24px;
    text-align: center;
}
3.3 Class Selector

Applies styles to all elements with a specific class. The class selector is prefixed with ..

.button {
    background-color: green;
    color: white;
    padding: 10px;
}
3.4 Universal Selector

Applies styles to all elements on the page.

* {
    margin: 0;
    padding: 0;
}
3.5 Descendant Selector

Targets elements that are inside another element.

div p {
    color: red;
}

4. CSS Properties

4.1 Text Properties
  • font-family: Specifies the font of text.
  • font-size: Specifies the size of the text.
  • font-weight: Specifies the thickness of the text.
  • color: Specifies the color of the text.
h1 {
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: darkblue;
}
4.2 Box Model Properties

The CSS box model describes the rectangular boxes generated for elements. It consists of the following:

  • content: The actual content of the element.
  • padding: The space between the content and the border.
  • border: The border around the padding (optional).
  • margin: The space outside the border.
div {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}
4.3 Background Properties
  • background-color: Sets the background color of an element.
  • background-image: Sets a background image for an element.
  • background-size: Specifies the size of the background image.
body {
    background-color: #f0f0f0;
}

div {
    background-image: url('background.jpg');
    background-size: cover;
}
4.4 Display and Positioning
  • display: Defines how an element is displayed. Common values: block, inline, inline-block, none.
  • position: Specifies the position of an element. Common values: static, relative, absolute, fixed, sticky.
div {
    display: block;
    position: relative;
    top: 20px;
}
4.5 Borders and Shadows
  • border: Defines the border around an element.
  • border-radius: Rounds the corners of the element's border.
  • box-shadow: Adds shadow to an element.
div {
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

5. CSS Layout Techniques

5.1 Flexbox

The Flexbox layout allows you to distribute space dynamically between elements inside a container.

.container {
    display: flex;
    justify-content: space-between;
}

.item {
    width: 30%;
}
5.2 Grid

The CSS Grid layout allows you to create complex grid layouts with rows and columns.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.item {
    background-color: lightgray;
}
5.3 Float

The float property is used to place elements next to each other.

div.left {
    float: left;
    width: 50%;
}

div.right {
    float: right;
    width: 50%;
}

6. CSS Pseudo-Classes and Pseudo-Elements

6.1 Pseudo-Classes

Pseudo-classes are used to define the special state of an element.

a:hover {
    color: red;
}

input:focus {
    border-color: blue;
}
6.2 Pseudo-Elements

Pseudo-elements are used to style specific parts of an element.

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

div::before {
    content: "Important: ";
    font-weight: bold;
}

7. CSS Transitions and Animations

7.1 CSS Transitions

CSS transitions allow you to change property values smoothly over a specified duration.

div {
    background-color: blue;
    transition: background-color 0.5s ease;
}

div:hover {
    background-color: red;
}
7.2 CSS Animations

CSS animations allow you to create more complex and continuous animations.

@keyframes example {
    0% { background-color: blue; }
    100% { background-color: red; }
}

div {
    animation: example 2s infinite;
}

8. Media Queries

Media queries are used to apply different styles to different screen sizes or devices.

@media screen and (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

Assessment: Regular Tests, Assignments, and Final Project Evaluation

Certification: Certificate of Completion from Disha Institute

 

Number of Days Depends on your practice and feedback. The more you practice and review your work, the faster you will complete the course.

For Batch time and Fess contact to Below Address and Number.

Zamanat Sir

(MCA / Bsc. I.T / ‘A’ / ‘O’ / CCC / Govt. Certified  Domain Skill Trainer )

   Disha Institute 153 Vijay Nagar Opp. Rg Pg College W.K Road Meerut 

(9411617329 , 9458516690) 

Comments

Post a Comment

Popular posts from this blog

VBA Modules for Excel Automation (Advance Excel)

  Essential VBA Modules for Excel Automation 1. Auto-Adjust Column Width Automatically adjust all columns to fit content. Sub AutoFitColumns() Cells.EntireColumn.AutoFit End Sub 2. Delete Blank Rows Removes all empty rows in the active sheet. Sub DeleteBlankRows() Dim rng As Range Set rng = ActiveSheet.UsedRange Dim i As Integer For i = rng.Rows.Count To 1 Step -1 If WorksheetFunction.CountA(rng.Rows(i)) = 0 Then rng.Rows(i).Delete End If Next i End Sub 3. Highlight Duplicates Highlights duplicate values in a selected range. Sub HighlightDuplicates() Dim rng As Range Set rng = Selection rng.FormatConditions.AddUniqueValues rng.FormatConditions(1).DupeUnique = xlDuplicate rng.FormatConditions(1).Interior.Color = RGB(255, 0, 0) End Sub 4. Merge Multiple Sheets into One Merges all sheets into a single sheet. Sub MergeSheets() Dim ws As Worksheet, destSheet As Worksheet Set destSheet = Sheets.Add destSh...
Read more

Java Programming

  Java Programming Notes 1. Introduction to Java Programming 1.1 What is Java? Java is a high-level, class-based, object-oriented programming language developed by James Gosling and Mike Sheridan at Sun Microsystems (now owned by Oracle). Java is platform-independent, meaning it can run on any device or operating system that has the Java Runtime Environment (JRE) installed. 1.2 Structure of a Java Program A basic Java program consists of: Class declaration : The class is the blueprint of the object. Main method : The entry point of a Java program, public static void main(String[] args) . Statements inside the main method to perform tasks. public class HelloWorld { public static void main (String[] args) { System.out.println( "Hello, World!" ); } } 2. Java Data Types 2.1 Primitive Data Types Java has eight primitive data types: byte : 8-bit integer. short : 16-bit integer. int : 32-bit integer. long : 64-bit integer. float : 32-bit floating point. d...
Read more

Excel Shortcuts

  Top Excel Shortcuts & Vba 1. Basic Shortcuts Shortcut Action Ctrl + N New Workbook Ctrl + O Open Workbook Ctrl + S Save Workbook Ctrl + P Print Workbook Ctrl + Z Undo Ctrl + Y Redo Ctrl + X Cut Ctrl + C Copy Ctrl + V Paste Ctrl + A Select All 2. Navigation Shortcuts Shortcut Action Ctrl + Arrow Keys Move to the edge of data (up, down, left, right) Shift + Arrow Keys Select cells in a direction Ctrl + Home Go to cell A1 Ctrl + End Go to last used cell Page Up / Page Down Move one screen up/down Alt + Tab Switch between open applications 3. Formatting Shortcuts Shortcut Action Ctrl + B Bold Ctrl + I Italic Ctrl + U Underline Alt + H + A + C Center Align Ctrl + Shift + L Apply/Remove Filters Ctrl + Shift + % Apply Percentage Format Ctrl + Shift + $ Apply Currency Format Ctrl + 1 Open Format Cells Dialog 4. Working with Rows & Columns Shortcut Action Ctrl + Space Select Entire Column Shift + Space Select Entire Row Ctrl + Shift + "+" Insert Row/Column Ctrl + "-...
Read more