Scribd
Upload
2 views

3.CSS Basics

CSS (Cascading Style Sheets) is a language used to describe the appearance of documents created with markup languages, first introduced in 1996. It allows for styling elements through various methods such as inline styles, internal stylesheets, and external stylesheets. The document also covers different types of selectors, including class, identifier, context, and other selector designs for more specific styling needs.

Uploaded by

mamedresul1501
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

3.CSS Basics

CSS (Cascading Style Sheets) is a language used to describe the appearance of documents created with markup languages, first introduced in 1996. It allows for styling elements through various methods such as inline styles, internal stylesheets, and external stylesheets. The document also covers different types of selectors, including class, identifier, context, and other selector designs for more specific styling needs.

Uploaded by

mamedresul1501
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS basics

CSS
Cascading Style Sheets

CSS ( Cascading Style Sheets is a special language for describing the appearance
of a document that is created using a markup language. This term was coined by
the Norwegian engineer Haakon Wium Lee in 1994, who is currently Opera's
technical director Software .
The first version was adopted in 1996. It provided options for changing font,
color, text attributes, text alignment, and others.
In 1998, CSS2 was released, which introduced the ability to block layout.
In 2006, the CSS3 specification was released, which introduced animation and
the ability to use variables.
CSS
Ways to Integrate CSS into Pages

< div style =" color : red ; " >


There are 3 main ways to integrate CSS
into HTML markup:
<style> _ _
div { • using the style attribute ;
color : red ; • using the <style> tag placed within
} the <head> tag ;
</style> _ _
• via a separate file with the
extension . css attached to the page.
< link href ="StyleSheet.css" rel ="
stylesheet "/>
CSS
CSS semantics

<style> _ _
The selector can be a tag, a separate
selector { class, an identifier, or a complex
property : value ; selector.
property : value ; If a tag name is specified as a selector,
property : value ; then all elements of this tag will
}
correspond to this style.
</style>
Moreover, if there are text elements
inside these tags, they will inherit
certain rules.
CSS
Selector-class

...

<style> _ _
.class1 {
A class is a special type of selector that
color : red ; can be used to mark one or several
padding :
10px ; elements.
}
</style> _ _ To specify a class selector, you must use
... the construct in CSS . ClassName .
< div class = class = " ClassName " in the opening tag .
< p class ="class1"
>
...
CSS
Selector-identifier

...
<style> _ _
An identifier is a special type of selector that
#id1 { can be used to mark one element. By
color : red ;
padding : 10px ; default, it is assumed that there is only one
width : 100px ;
height : 200px ;
element with such a selector on the page.
}
</style> _ _ To specify an identifier selector in CSS, you
...
must use the #Identifiername construct .
< div id =
id = " IdentifierName " attribute in the
... opening tag .
CSS
Context selectors
...
<style> _ _
div p {
If you need to define a style for an
color : red ; element nested within another element,
padding : 10px ;
width : 100px ; then the best solution is to construct
}
</style> _ _ nested (contextual) selectors.
... The first is the selector of the parent
<div> _ _
<p> </p> _ _ _
element, and the second is the selector
</div> _ _ of the child element that will be nested
...
within it.
CSS
Other selector designs

<style> _ _
div + p {
}
Adjacent selector . Required to set styles for the element immediately
div > span { following the specified selector in the code.
}
Child selector . Required to set the style for an element that is a direct
img [title] { descendant of the specified selector.
} Attribute selector . Required to style a selector that has a specific
attribute.
* {
} Universal selector . Required to set styles simultaneously for all markup
</style> _ _ elements.
<link rel ="stylesheet" href ="style.css">

<head>
<meta charset = "UTF-8" >
<meta name = "viewport" content = "width=device-width,
initial-scale=1.0" >
<title> FORMS </title>
<link rel = "stylesheet" href = "style.css" >
</head>
div {
margin-top : 10px ;
margin-bottom : 50px ;
margin-left : 20PX ;
}

h1 {
color : blue ;
margin : 0 ;
margin-left : 20px ;
}
fieldset {
margin-bottom : 20px ;
}
label {
margin-right : 40px ;
}

You might also like