• CSS was developed by W3Consortium in the year of 1996.
  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML
  • CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.
  • CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.
  • A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Why CSS:

  • The primary aim of the CSS is to provide additional styles to the HTML document.
  • It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design.
  • By using the CSS, we can apply the styles to HTML elments including fonts, colors and layout.

Advantages of using CSS:

  • More formatting options.
  • Lightweight code.
  • Faster download times.
  • Search engine optimization benefits.
  • Easier to maintain and update.

Ways to specify styles:

  1. Inline styles,
  2. Internal styles,
  3. External styles.

Inline styles:

  • Styles are placed right where you need them, next to the text you wish to decorate.
  • You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element.
  • Here is the example for applying the inline styles to the html element.

  • The output of the html file will display like below,

Internal styles:

  • An internal stylesheet holds the CSS code for the webpage in the head section of the particular file.
  • This makes it easy to apply styles like classes or id’s in order to reuse the code. The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
  • The styles are writtten within the <style> tag inside the <head>…</head>
    Example:

  • The output of the html file will display like below,

External styles:

  • The External Stylesheet is a .css file that you link your website to. This makes it so that what ever you change in the .css sheet, will effect every page in your website.
  • This prevents you from having to make many code changes in each page. This is for “global” site changes.
  • An External Style Sheet is a file containing only CSS syntax (no document content or elements) and should carry a MIME type of “text/css.
  • Example:
  • You need to save the .css file separately within the same folder.

  • The output of the html file will display like below,

SELECTORS:

  • A CSS selector is the part of a CSS rule set that actually selects the content you want to style.
  • In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.
  • Below are the basic selectors that are available
  1. Element selector
  2. Id selector
  3. Class selector
  4. Attribute selector

Element selector:

  • The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.
  • Example:

ID selector:

  • If we want to apply style to an element with the specific id then we use the id selector.

Example:

Class selector:

  • If we want to apply the style to multiple elements, then we define class attribute to those elements and apply styles to them using the class selector.
  • Examples:

Attribute selectors:

  • If we want to apply the styles to the html elements with a specific attribute or attribute having specific text then we are going to use the attribute selectors.
  • Examples:

Combine Selectors (or) combinators:

  • A combinator is something that explains the relationship between the selectors.
  • A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
  • There are four types of combinators available in CSS:
  1. The descendant selector
  2. The adjacent sibling selector
  3. The general sibling selector
  4. The child selector

Descendant selector:

  • The (space) combinator selects nodes that are descendants of the first element.
  • Syntax:   div  P    { }
  • div p will match all <p> elements that are inside a <div>
  • Example

  • The output of the above code will display in the browser like below,

Adjacent Sibling Selector:

  • The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
  • Syntax:   div + P   { }
  • div + p will match the first <p> element that directly follow the <div>.
  • Example:

  • The output the above code will display in browser like this,

Sibling Selector:

  • The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
  • Syntax:   div ~ p  { }
  • Div ~ p will match all <p> elements that follow a <div>.
  • Example:

  • The output of the html file will be displayed in browser like below,

Child selector:

  • The > combinator selects the element that are direct children of the first element.
  • Syntax:   div > p { }
  • Div > p will match the first <p> elements that follow a <div>.
  • Example:

  • The output of the html file will display in the browser like below,

PSEUDO CLASSES:

  • Pseudo-classes allow the selection of elements based on state information that is not contained in the document tree.
  • A pseudo-classes always starts with a colon (:).
  • A pseudo-class is used to define a special state of an element.

For example, it can be used to:

  • Style an element when a user mouses over it.
  • Style visited and unvisited links differently.
  • Style an element when it gets focus.

Anchor pseudo classes:

  • It will show you the <a> tag elements to display in various styles while doing some actions like clicking on it, hovering over it, etc

Example:

  • a:visited will show all <a> elements that have been visited by the user.
  • a:active will show the <a> elements that is in active or curently opened by user.
  • a:hover will show the <a> element in different background color in which the user is hovering the mouse.

The output of the html file will be displayed in the browser like below,

Display Block:

  • To display the block element like a tooltip. For that create a div element and make the property of the block element into display in that div element.
  • The display : none property will hide the paragraph element, to hide from the screen.

Example:

  • The output of the above html program will display in the browser like below,

  • Hover on the text to display the block.

First – child:

  • The :first-child selector allows you to target the first element immediately inside another element.
  • It is defined in the CSS Selectors as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
  • If we want to select the first element of specific type inside any other element we are going to use this.

Example:

  • Here it will apply the styles to the first child of the every <p>

  • The output of the html element will be displayed on the browser like below,

Focus:

  • The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
  • Any element that are in “focus“, when they are selected and ready to enter text(mostly the text box or text area).
  • If we want to apply the style when an input element is focussed we are going to use these styles.

Example:

  • Click on the input box to type the text, and you will see the control is focused with different background color.

n-th chiild:

  • The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.
  • It is defined in the CSS Selectors as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
  • The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
  • n can be a number, a keyword, or a formula.

Example:

  • The output of the above html file will be displayed in the browser like below,

Odd and Even childs:

  • :nth-child takes an argument : this can be a single integer, the keywords “even” or “odd”, or a formula.
  • Keywords “even” and “odd” are straightforward, the “odd” will take the 1, 3, 5 etc rows and the “even” takes the 2, 4, 6 etc rows respectively.
  • Example:

  • The output of the above html file will be displayed in the browser like below,

nth  child an+b:

  • If an integer is specified only one element is selected but the keywords or a formula will iterate through all the children of the parent element and select matching elements.
  • Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b,where:
  • a is an integer value.
  • n is the literal letter “n”.
  • + is an operator and may be either “+” or “-”.
  • b is an integer and is required if an operator is included in the formula.
  • It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected.
  • Example:

  • It will selects all elements whose index is multiple of 3.
  • Therefore, the output will display like the rows which are multiple of 3 will get different background color.

PSEUDO ELEMENTS:

  • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
  • pseudo-elements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects.

Syntax:

  • As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements.
  • However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.
  • The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
  • The most commonly used pseudo-elements are as follows,
  1. ::first-letter,
  2. ::first-line,
  3. ::after,
  4. ::before.

:: first-letter:

  • The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element.
  • Use this element to add special style to the first letter of the text in a selector.

Example:

  • The output of the above html file will be displayed in the browser like below,

:: first-line:

  • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
  • Use this element to add special styles to the first line of the text in a selector.

Example:

  • The output of the above html file will be displayed in browser like below,

:: after:

  • In CSS, ::after creates a pseudo-element that is the last child of the selected element.
  • It is often used to add cosmetic content to an element with the content property.
  • Use this element to insert some content after an element.
  • It is inline by default.

Example:

  • The output of the above html file will display in the browser like below,

:: before:

  • Use this element to insert some content before an element.
  • In CSS, ::before creates a pseudo-element that is the first child of the selected element.
  • It is inline by default.
  • Example:
  • The output of the above html file will be displayed in the browser like below,

:: selection:

  • The ::selection selector matches the portion of an element that is selected by a user.
  • Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.
  • Example:

  • Whenever the selection is made in the paragraph the selection element will display the text and the background with different styles.

BOX MODEL:

  • All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
  • The CSS box model is essentially a box that wraps around every HTML element. It consists of:
  1. Height,
  2. width,
  3. margins,
  4. Borders,
  5. Padding and
  6. actual content.
  • When you set the width and height properties of an element with CSS, you just set the width and height of the content area.
  • To calculate the full size of an element, you must also add padding, borders and margins.

Div with box style:

Example:

  • The output of the box model will display like below,

 

Visibility hidden and Display none:

  • Visibility : hidden – > will not render the element but still reserve the space
  • Display:none -> will not render the element but will not reserve the space
  • display:none means that the tag in question will not appear on the page at all. (although you can still interact with it through the dom).
  • There will be no space allocated for it between the other tags.
  • Example:

  • The output of the file will display like this,

  • visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
  • The tag is rendered, it just isn’t seen on the page.

Example:

  • In the output, you can see the space was allocated to the div with class = ”visible”.

BOX SIZING:

  • The box-sizing CSS property defines how the user agent should calculate the total width and height of an element.
  • The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.
  • By default, the width and height of an element is calculated like below,
●        width + padding + border = actual visible/rendered width of an element’s box

●        height + padding + border = actual visible/rendered height of an element’s box

The box-sizing property can be used to adjust this behavior:

  • content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.
  • Example:

  • The output will display in the browser like this,

  • border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
  • Example:

  • The output of the above file will display like below,

POSITIONS:

  • The position is a CSS property that specifies how an element is positioned in a document.
  • The top, right, bottom, and left properties determine the final location of positioned elements.
  • A positioned element is an element whose computed position value is either,
  • ◆  static.
    ◆ relative.
    ◆ fixed.
    ◆ absolute.

Static:

  • This is the default for every single page element. Different elements don’t have different default values for positioning, they all start out as static.
  • The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control.
  • Elements render in order, as they appear in the document flow
  • Example:

  • All the elements takes the window position as default position.

 

Relative:

  • This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”.
  • If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will not effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static;.
  • But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.
  • Example:

  • The output of the relative position in the browser will display like below,

Fixed:

  • This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself.
  • The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
  • The element is positioned relative to the browser window.

 

Example:

 

  • Add more data to scroll throught the webpage and you can see the fixed position of a div element in the top right.

Absolute:

  • This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
  • You use the positioning attributes top, left, bottom. and right to set the location.
  • Remember that these values will be relative to the next parent element with relative (or absolute) positioning.
  • If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

Example:-

The output will display in the screen like below, the absolute position will take its parent position as base.

BACKGROUNDS:

  • The background CSS property is a short way to declare all background style options at once, including color, image, origin and size, repeat method, and other features.
  • It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one.
  • Some of the property values of the background property is,
  • Background-image
  • Background-position
  • Background-size
  • Background-repeat
  • Background-attachment
  • Background-origin
  • Background-clip
  • background-color

Background Image:

  • The background-image property sets one or more background images for an element.
  • By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Example:

  • The same image will be repeated to cover the whole webpage as shown below.

Background – repeat:

  • The background-position property sets the starting position of a background image.
  • If a background-image property is specified, the background-repeat property in CSS defines if it will repeat.

Example:

  • The background image is applied to the x direction only. So, it will apply the background image horizontally.


  • For the same example apply the position for Y and the image applied vertically like below,

 

Background – position:

  • The background-position property in CSS allows you to move a background image (or gradient) around within its container.
  • The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin, for each defined background image.
  • You can set the position of the image anywhere in your webpage.

Example:


  • The background image will display according to the position set by the user.

 

 

TEXT STYLES:

  • This text is styled with some of the text formatting properties.
  • Some of the text properties are as follows,
  • text-align,
  • text-color,
  • text-transform,
  • text-size,
  • strike out
  • uppercase

titlecase, etc

Text-align:

  • The text-align property is used to set the horizontal alignment of a text.
  • You can align the text in any of the positions like left, right and center.

Example:

  • The output file will be displayed in the browser like below,

Text-decoration:

  • The text-decoration property is used to set or remove decorations from text.
  • The value text-decoration: none; is often used to remove underlines from links
  • The possible ways of text decorations are,
    • None,
    • Underline,
    • Overline,
    • Line-through,
    • Blink

Example:

  • The output of the above file will be displayed in the browser like below,

TEXT TRANSFORM:

  • The text-transform property is used to specify uppercase and lowercase letters in a text.
  • It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word

Example:

The output of the above html file will display in the browser like below,