Customizing Basic Unordered Lists Using CSS
Unordered lists can be powerful tools for making an article or blog post easier to read. Internet surfers do not like to spend a lot of time on one web page looking for specific information, so lists can be effective for driving home a point or summarizing the content of a page. Unordered lists are not necessarily aesthetically pleasing, but adding some simple code to your CSS style sheet can make a drastic improvement. Creating an … Read entire article »
CSS Text Properties
Text properties can be defined within the CSS style sheet or inline with the text in the XHTML/web page file using the <span> </span> tags. The following example uses only three properties. Letter Spacing Letter spacing defines how much space is between each letter. The value can be set to either normal or a specific length. <span style="letter-spacing: 4px">This text has a letter spacing of 4.</span> This text has a letter spacing of 4. <span style="letter-spacing: -2px">This text … Read entire article »
Filed under: CSS
Formatting CSS Fonts
Fonts are highly-customizable with CSS. You can do all sorts of silly things, although some definitely are not recommended. CSS style properties can be defined within the CSS file, but they can also be used inline. That is, in the XHTML file. This is easily done by using the <span> </span> tags. The “style” attribute indicates that the following text is to use the properties specified within the <span> tag. The … Read entire article »
Filed under: CSS
Defining Fonts with CSS
In “Customizing the Body Using CSS,” we learned how to set the general font for the page. In “CSS: Pargraph and Div Tags,” we learned how to further customize the <h1>, <p>, and <div> tags. Today, we will take it a step further and create a custom tag for subheadings. You may create as many custom tags as you wish, based on this concept. The subheading tag will format the subtitles throughout … Read entire article »
Filed under: CSS
Customizing a Background with CSS
Background images are nifty. They add color and flair to a web page and can be incredibly useful for branding. The drawback, however, is that they can make it incredibly difficult or annoying to read the words on a page. There are options, though! Image Editing The first option is to edit the image so that it is very light in color. This is done by raising the brightness and gamma, and lowering … Read entire article »
Filed under: CSS
Floating Images with CSS
No web page is complete without images, even if they serve no greater purpose than aestheticism. They are a necessary element because that is what people want to see. Words are great – anyone will tell you that “content is king” – but images make paragraph perusing less daunting. No image formatting will simply place an image inline with text. Image wrap allows the words to wrap around the image, including it in the paragraph. … Read entire article »
CSS Paragraph and Div Tags
Our sample web page also uses <h1>, <p>, and <div> tags. Those must also be defined. The <h1> tag is used to display the title of the page: “My Sample Page.” This is using a larger, bolder font. In this example, I want the title to be aesthetically pleasing and not overpowering, so it will be dark gray, a little larger than the body font, and bold. It will also be … Read entire article »
Customizing the Body Using CSS
Style sheets are incredibly useful when creating a uniform look across multiple web pages. CSS also simplifies the coding within each page. The first step in using a stylesheet is to create the look of the web page by defining each tag in the stylesheet. Let’s start with the basic elements. Currently, the web page displays the default browser settings because the style.css file is blank: What we see when we visit a web … Read entire article »
Filed under: CSS
Creating Cascading Style Sheets (CSS)
Cascading style sheets (CSS) simplify the code used to style web pages. This is especially useful if a website consists of many pages. For example, WordPress uses CSS. Anyone can edit the CSS in the style.css document to make changes across all of the pages, even if there are hundreds or thousands. This is much better than having to open each web page file to make the changes. Prerequisites for … Read entire article »
Filed under: CSS
