Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .
Syntax
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.
Selector;
A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Selectors may include a combination of different qualifiers to select unique elements, all depending on how specific we wish to be.
For example, we may want to select every paragraph on a page, or we may want to select only one specific paragraph on a page.
Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <div> or <p>.
Within CSS, selectors are followed with curly brackets, {}
elements specified by attribute, in particular:
id: an identifier unique within the document
class: an identifier that can annotate multiple elements in a document
eg:
p{….}
Properties:
Once an element is selected, a property determines the styles that will be applied to that element.
Property names come after a selector, within the curly brackets, {}, and immediately preceding a colon,
:. There are numerous properties such as:
background, color, font-size, height, and width and new properties are often added.
eg:
p{
color : ….;
font-size: ….;
}
Values:
The behavior of the property in CSS is determined by the value we set.
Values can be identified as the text between the colon, :, and semicolon, ;
eg:
p{
color : orange;
font-size:16px;
}
Figure below shows the syntax of Working with Selectors:
NOTE
The first step is to become familiar with the different types of selectors.
We’ll start with the most common selectors: type, class, and ID selectors.
Selectors:
Type Selectors:
Type selectors target elements by their element type.
The following code shows a type selector for division elements as well as the corresponding HTML it selects.
eg:
CSS:-
div{……}
HTML:-
<div>…..</div>
<div>…..</div>
Class Selectors:
Class selectors allow us to select an element based on the element’s class attribute value.
Class selectors are a little more specific than type selectors, as they select a particular group of elements rather than all elements of one type.
Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements.
Within CSS, classes are denoted by a leading period, ., followed by the class attribute value.
eg:
CSS:-
.awesome{……….}
HTML:-
<div class=”awesome”>….</div>
<p class=”awesome”>…….</p>
ID Selectors:
ID selectors are even more precise than class selectors, as they target only one unique element at a time.
ID selectors use an element’s id attribute value as a selector.
Within CSS, ID selectors are denoted by a leading hash sign, #, followed by the id attribute value.
eg:
CSS:-
#ankitpathshala{…..}
HTML:-
<div id=”ankitpathshala”>……</div>
Referencing CSS:
The best practice for referencing our CSS is to include all of our styles in a single external style sheet, which is referenced from within theelement of our HTML document.
<head>
<linkrel=”stylesheet”href=”
main.css”>
</head>
Within the element of the HTML document, the element is used to define the relationship between the HTML file and the CSS file. Because we are linking to CSS, we use the rel attribute with a value of style-sheet to specify their relationship. Furthermore, the href(or hyperlink reference) attribute is used to identify the location, or path, of the CSS file.
Using a single external style sheet allows us to use the same styles across an entire website and quickly make changes site wide.
Other Options for Adding CSS
Other options for referencing CSS include using internal and inline styles. You may come across these options at times but they are not used as they make updating websites difficult.
CSS has certain rules to select elements on a web page so that we can then style those elements.
The way we tell our CSS rule which HTML elements to style is by using selectors. There are many types of selectors but here we just want to review the one we showed in the talk-through: the element selector.
The element selector selects HTML elements based on their tag names. Each HTML element—<h1>, <p>, <li>, <body>—and any other HTML element can be selected with CSS by using the tag name without the angle brackets (< and >). For example, you can select all of the <p> tags in your webpage by using the element selector p. Here’s a CSS rule that changes the color of each paragraph on a web page:
In the previous practice we created a basic webpage. Here we will add a reset to the webpage to make it load on every browser.
See the Pen PageReset by Ankit (@AnkitPathshalaCoding) on CodePen.
Refer Tutorial
take the challenge to complete the projects
The First step to make your webpage look even more awesome.
Change the colour of the header of your webpage to red. then,
place
an image of your favourite animal in the webpage. And describe why you think it
is the best.
Hint
<img src=’ ’ rel=’’>
Also use the <strong> </strong>and <em></em> tags to make ev
Code live & see your Changes on result section
See the Pen Challenge: Colorful creature by Ankit (@AnkitPathshalaCoding) on CodePen.