Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now
CSS

CSS Tutorial-Part 1

January 4, 2020 comments off

Cascading Style Sheet (CSS)
CSS is a simple mechanism of describing common presentation semantics for every page is a website. It can control the layout of the Version of multiple web pages all at once.

Selector {
Property1: Property1-value;
Property2: Property2-value;
propertyN: propertyN-value;
}

Selector– The Selector points to the HTML element or HTML Tag you want to find or slect HTML elements based on their element, id, class, attribute, and more.

Property – It indicates that these properties are defined for that element or Selector.

Property- Value – These are values assigned to Properties.

Syntax:-
Selector Selector {Property1: Property1-value; Property2: Property2-value; PropertyN: propertyN-value;}

Ex-

Way style sheet
Internal style sheet/ Embedded Style Sheet
Inline style

External Style Sheet=> An external style sheet is a separate document that contains only CSS rules. An external style sheet help to change the look of an entire website by changing just one CSS file. It should not contain any HTML Tags. It has .css external.

Internal Style Sheet=> Internal Style is a set of style that is created as a part of an HTML document. An internal style sheet may be used if one single page has a unique style. Internal Style sheets are created using element, which is added inside the <head> element of the HTML document.

Inline Style=> Inline is useful when we need to define a specific style for individual elements present on a web page. The style attribute in a specific Tag or element is used to create an inline style. The style attribute can contain any CSS property between double-quotes.

Ex-
For paragraph:-

For Heading

Comment=
A CSS comment starts with /* and ends with / / I am comment */

Id Selector=> The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element.
To select an element with a specific id, write a hash (#) character, followed by the id the element.

Class Selector / Style Class
Class selectors are used where you want to apply a style either on some of the tag or across the several tags without repeating the style rule in an Html document. Using a method of creating styles, you can create styles in the form of style classes in an external style sheet or as an internal style sheet. The class attribute is used to apply style class in HTML Tag.

Type of Style class
* Universal style class= Universal style class starts with a dot operator followed by the class name. Syntax:-

Background =>
We can use background properties to enhance the background style of the element present in the HTML web page.

Background-color- The background-color property allows us to set the background color of an HTML element. we can set this property to a predefined color name, color value or transparent.

background-image- It is used to set the background image of an HTML element. default, the background-image property repeats both horizontally and vertically so it covers the entire element. While setting the background image for an HTML element, we can set this property to none or the URL of an image.

background-repeat- It specifies whether the background image is repeated or not. We can set this property to repeat-x repeat-y or no-repeat. by default, the background- image property repeats an image both horizontally and vertically so it covers the entire element.
Horizontal- repeat-x
Vertical-repeat-y
No repeat- no-repeat.

background-position– It specifies the initial position of a background image. We can set this property to the Left top, Center, right top, center left, x-position y-position.

background- attachment- It specifies whether a background image is fixed or scrolls when the user scrolls the rest of the page. we can this property to either scroll or/ fixed.

Background= It works as a shorthand property for all background properties such as background-color, background-image, background-repeat, background-position, and background-attachment, etc. It sets all these background properties in one definition.

backgroud-clip=> The background-clip property specifies the painting area of the background. We can this property to border-box, padding-box, content-box.

background-size=> The background-size property allows specifying the size of the background image. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
=> contain- scales the background image to be as large as possible.
=> covered – scales the background image so that the content area is completely covered by the background image

background-origin=> The background-origin property specifies where the background image is positioned. We can this property to border-box, padding-box, content-box.

Multiple background Image=>

Full backgroud Image=>

Text=> Text Properties provides various text formatting options.
color, direction, text-align, letter-spacing, line-height, text-decoration,
text-indent, text-transform, text-shadow, vertical-align, white-space,
word-spacing, text-align-last, text-overflow, word-break, word-warp.

The Font property is used to set a font repeated style for the text present on an HTML.
font-family=> We can specify a list of font names for the text contained inside an HTML element, using font-family property.
Ex-

p{ font-family: Arial, serif, “Times New Roman”;}

font-size=> We can specify a font size for the text. We can specify size in the form of a percentage, px, em.
Ex:-

font-stretch=> It specifies a normal, condensed or extended font face. We can set this property to normal, wider, narrower, ultra-condensed,extra-condensed, condensed, semi-condensed,semi-extended, extended, extra-extended, ultra-extended.
Ex-

font-style=> It specifies the style of the font. We can set this property to normal, italic, oblique.
Ex-

font-varint=> It specifies whether or not a font is a small-caps font. We can set this property to either normal or small-caps.
Ex-

font-weight=> The font-weight property allows to set the font-weight of the text present on an HTML Page. We can set this property to normal, bold, bolder, lighter, number (100,200,300 up to 900)
Ex-

font=> It defines a shorthand property for font-style, font-variant, font-weight, font-size, line-height, and font-familt properties.
Ex-

Rajesh Kumar
Follow me
Latest posts by Rajesh Kumar (see all)