Embedded Files
Introduction
Introduction
Cascading Style Sheets (CSS) is a language to style an HTML webpage. This includes colors, fonts, layout, and overall design. CSS documents are created to neatly style web pages without overcrowding HTML documents and to allow for easy consistency across different web pages.
Coding
Coding
Introduction
Introduction
There are many ways to use CSS for design, and only a few basics ones are listed below.
Selectors
Selectors
Selectors allow you to style all instances of a particular element. Selectors are used to pick which elements are styled, but the actual declaration of styling is placed within the curly braces of selectors.
Element selectors
Element selectors
Element selectors allow you to style all instances of the same element in the same way. To do so, we put the element followed by curly braces. The styling elements are placed within the curly braces.
<head>
<style>
h1 {color:blue;}
</style>
</head>
<body>
<h3>Header 3 tag is not styled</h3>
<h1>Header 1 tag is styled blue</h1>
</body>
In this example above, we styled the header 1 tag with blue and didn't style the header 3 tag. The code is on the left. Don't worry too much about the implementation, that'll be discussed more below.
Class selectors
Class selectors
Similar to Python, there are classes in HTML/CSS. We can declare certain HTML elements to be part of a class by including class="class-name" within the starting tag. In CSS, we can say that all instances of that class are to have a specific style by putting a period before the class-name then putting all styling elements within the curly braces.
<head>
<style>
.this-class {color: blue;}
</style>
</head>
<body>
<h1 class="this-class">This is under this-class class so it will be styled blue </h1>
<h1>This header doesn't belong to the class so it's not styled</h1>
</body>
In the example above, the first h1 tag belongs to the "this-class" class, which we say is to be colored blue. The second h1 tag doesn't belong to the class, so it's not styled.
ID selectors
ID selectors
ID selectors are similar to classes, but you only use them for one specific element. We can assign one specific HTML element an ID but including id="id-name" within the starting tag. In CSS, we style that element using a hashtag, followed by the id name and styling elements within curly braces. ID's are used the most sparingly.
<head>
<style>
#this-id {color: blue;}
</style>
</head>
<body>
<h1 id="this-id">This has an id and is styled blue </h1>
<h1>This header is not styled</h1>
</body>
In the example above, the first h1 tag has an id that is styled blue. The second h1 tag doesn't belong have an id, so it is not styled and just defaults to black.
Precedence
Precedence
It is important to note that there is a hierarchy of specificity for CSS elements. For example, if an h1 tag belongs to a class and has an id and its element selector is styled, then the most specific styling (id) will take precedence.
<head>
<style>
h1 {color: green;}
.this-class {color: red;}
#this-id{color: blue;}
</style>
</head>
<body>
<h1 class="this-class" id="this-id">Header 1</h1>
</body>
Even though the above example belongs to header 1, a class, and a ID, the ID takes precedence above the other two styling elements.
Text
Text
Font size
Font size
We can change the font size of text within the selector. To do so, we set the font-size within the curly braces of the selector. The font-size can either be in pixels or a percentage, followed by a semicolon.
<head>
<style>
.big {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<p class="big">This is a larger than normal paragraph</p>
<p>Normal size paragraph</p>
</body>
Font
Font
We can also change the font of text within the selector. To do so, we set the font within the curly braces of the selector. Just in case the font we select isn't available, we can also set alternates following the original font.
<head>
<style>
h1 {
font-family: Lobster, Monospace;
color: blue;}
</style>
</head>
<body>
<h1>Monospace font because no lobster!</h1>
<h3>Normal font!</h3>
</body>
Color
Color
Something that you may have noticed we used for examples above was the color styling element, which changes the color of text. To change color, we just say color, followed by the color we'd like.
In addition, we can also change the background color of text by using background-color, followed by the color.
<head>
<style>
h1{
color: Gold;
background-color: Navy;}
</style>
</head>
<body>
<h1>Berkeley!</h1>
</body>
Coloring
Coloring
Selecting colors
Selecting colors
In the examples above, we selected colors by their names, but there are also other ways to select color.
One way is with hex codes, which is a series of 6 letters and numbers. We can use a color picker from the internet to find specific hex codes for color.
<head>
<style>
h1 {
color: #ffcc00;
background-color: #0000b3;
}
</style>
</head>
<body>
<h1> Go bears! </h1>
</body>
Methods of Incorporation
Methods of Incorporation
Introduction
Introduction
There are a few different ways to incorporate CSS with your webpages. The main way is through an external style sheet, but inline and internal CSS are used as well. All of these ways style web pages and their syntax is identical, but how you incorporate them slightly vary.
Internal Head Tag
Internal Head Tag
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<html>
For most of these examples, we've been using internal styling.
Styling elements can be placed within the head tags of an HTML document. This allows for styling a specific web page.
External Style Sheet
External Style Sheet
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>
style.css
style.css
h1 {
color: blue;
}
Most often styling elements are coded using a style sheet separate from the HTML document for the webpage, then the two are linked together. This method is often preferred because the same style sheet can be used for multiple HTML documents so that they have a consistent design.
Inline
Inline
<html>
<body>
<h1 style="color:blue;">This header will be stylized.</h1>
<h1>This header won't be stylized.</h1>
</body>
</html>
Inline CSS is different from the other two in that all the styling elements are placed within the starting tag of an element in an HTML document.
This method may be used for when you want a specific element to deviate from the default stylings of the other elements.
There are many more aspects of CSS out there, and only a few are introduced here, so feel free to explore the internet.
There are many more aspects of CSS out there, and only a few are introduced here, so feel free to explore the internet.
Report abuse